:root {
  --ink: #172334;
  --muted: #5d7288;
  --brand: #005a96;
  --blue: #005a96;
  --cyan: #08a9d6;
  --green: #18b981;
  --red: #b84242;
  --line: #d7e5ef;
  --soft: #eef6fb;
  --bg: #f3f8fb;
  --card: #fff;
  --shadow: 0 18px 46px rgba(8, 43, 70, .1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

body[data-app="admin"] {
  background: #f4f7f8;
  overflow-x: hidden;
}

body[data-app="admin"] #app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

body[data-app="admin"][data-sidebar="collapsed"] #app {
  grid-template-columns: 78px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 14px;
  background: #11283a;
  color: #eaf4f8;
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-sidebar.collapsed {
  align-items: center;
  gap: 10px;
  padding: 18px 9px;
  overflow-y: auto;
  overflow-x: visible;
}

.admin-brand {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.admin-brand img {
  width: 154px;
  max-width: 100%;
  padding: 9px 10px;
  background: #fff;
  border-radius: 8px;
  object-fit: contain;
}

.admin-brand b {
  font-size: 18px;
}

.admin-sidebar.collapsed .admin-brand {
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.admin-sidebar.collapsed .admin-brand img {
  width: 46px;
  height: 46px;
  padding: 6px;
  border-radius: 8px;
}

.admin-sidebar.collapsed .admin-brand b {
  display: none;
}

.admin-sidebar nav {
  display: grid;
  align-items: start;
  gap: 8px;
}

.admin-menu-group {
  display: grid;
  align-self: start;
  gap: 5px;
  padding: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
}

.admin-menu-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  color: rgba(234,244,248,.9);
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.admin-menu-group summary span {
  min-width: 0;
}

.admin-menu-group summary::-webkit-details-marker {
  display: none;
}

.admin-menu-group summary::after {
  content: "+";
  color: rgba(234,244,248,.72);
  font-size: 16px;
}

.admin-menu-group[open] summary::after {
  content: "-";
}

.admin-menu-group div {
  display: grid;
  gap: 3px;
  padding-top: 4px;
}

.admin-sidebar button {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  color: rgba(234,244,248,.82);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
}

.admin-sidebar button:hover,
.admin-sidebar button.active {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
}

.admin-menu-group button {
  min-height: 34px;
  padding-left: 16px;
  font-size: 13px;
}

.admin-nav-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: none;
  place-items: center;
  border-radius: 7px;
  color: #dff2fb;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.admin-sidebar button.active .admin-nav-icon,
.admin-sidebar button:hover .admin-nav-icon,
.admin-menu-group[open] > summary .admin-nav-icon {
  color: #075b86;
  background: #e7f7fc;
  border-color: rgba(255,255,255,.4);
}

.admin-sidebar.collapsed nav {
  width: 100%;
  gap: 8px;
}

.admin-sidebar.collapsed .admin-menu-group {
  width: 100%;
  gap: 4px;
  padding: 5px;
  border-radius: 9px;
}

.admin-sidebar.collapsed .admin-menu-group summary {
  justify-content: center;
  min-height: 40px;
  padding: 0;
}

.admin-sidebar.collapsed .admin-menu-group summary span,
.admin-sidebar.collapsed .admin-nav-label {
  display: none;
}

.admin-sidebar.collapsed .admin-menu-group summary::after {
  display: none;
}

.admin-sidebar.collapsed .admin-menu-group div {
  gap: 4px;
  padding-top: 5px;
}

.admin-sidebar.collapsed button {
  justify-content: center;
  min-height: 40px;
  padding: 0;
  border-radius: 9px;
}

.admin-sidebar.collapsed .admin-menu-group button {
  padding: 0;
}

.admin-sidebar.collapsed .admin-nav-icon {
  display: inline-grid;
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

.admin-main {
  min-width: 0;
  overflow-x: clip;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 28px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #dbe5e9;
  backdrop-filter: blur(14px);
}

.admin-menu-toggle {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(8, 43, 70, .06);
  font-weight: 900;
}

.admin-menu-toggle:hover {
  color: var(--brand);
  border-color: #a9d0e6;
  background: #f7fbfd;
}

.admin-menu-toggle span {
  font-size: 22px;
  line-height: 1;
}

.admin-topbar b,
.admin-topbar small {
  display: block;
}

.admin-topbar small {
  color: #647784;
  font-size: 12px;
}

.admin-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.admin-top-context {
  min-width: 130px;
}

.admin-user-chip {
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 7px 10px;
  background: #f5f8f9;
  border: 1px solid #dbe5e9;
  border-radius: 8px;
}

.admin-user-chip b {
  font-size: 13px;
}

.admin-user-chip small {
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-lang-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
}

.admin-lang-switch button {
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #183246;
  font-weight: 900;
}

.admin-lang-switch button.active {
  color: #fff;
  background: #146b8f;
}

.admin-top-actions a,
.admin-top-actions button,
.table-actions button,
.form-actions button,
.order-status-tool button,
.inline-status button,
.admin-login-error a {
  min-height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  color: #183246;
  font-weight: 800;
}

.admin-top-actions .admin-lang-switch button {
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-weight: 900;
}

.admin-top-actions .admin-lang-switch button.active {
  color: #fff;
  background: #146b8f;
}

.admin-top-actions .primary,
.form-actions .primary,
.order-status-tool .primary,
.inline-status .primary {
  color: #fff;
  background: #146b8f;
  border-color: #146b8f;
}

.form-actions button:disabled,
.table-actions button:disabled {
  cursor: not-allowed;
  color: #8a98a5;
  background: #edf1f4;
  border-color: #d7e0e6;
}

.admin-content {
  display: grid;
  gap: 18px;
  padding: 24px 28px 42px;
}

.admin-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.admin-page-head span {
  color: #16835f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.admin-page-head h1 {
  margin: 4px 0;
  font-size: 30px;
  line-height: 1.12;
}

.admin-page-head p {
  max-width: 780px;
  margin: 0;
  color: #627582;
}

.admin-search input {
  width: min(320px, 34vw);
  min-height: 42px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.admin-metric,
.admin-panel,
.admin-chart {
  background: #fff;
  border: 1px solid #dbe5e9;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(17,40,58,.06);
}

.admin-metric {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.admin-metric span,
.admin-metric small {
  color: #627582;
  font-weight: 800;
}

.admin-metric strong {
  font-size: 26px;
  line-height: 1.05;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, .6fr);
  gap: 14px;
}

.admin-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.span-full {
  grid-column: 1 / -1;
}

.admin-panel,
.admin-chart {
  min-width: 0;
  padding: 16px;
}

.admin-panel h3,
.admin-chart h3,
.admin-form h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

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

.panel-title h3 {
  margin: 0;
}

.panel-title span {
  color: #627582;
  font-weight: 800;
}

.admin-filter-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  padding: 12px;
  background: #f5f8f9;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.admin-filter-panel label {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.admin-filter-panel input,
.admin-filter-panel select {
  min-height: 36px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
}

.admin-filter-panel button,
.admin-filter-panel .filter-reset-link {
  min-height: 36px;
  padding: 0 12px;
  color: #183246;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.filter-config-wrap {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.admin-filter-panel .filter-config-trigger {
  white-space: nowrap;
}

.admin-filter-panel .filter-config-trigger.active {
  color: #fff;
  border-color: #087da6;
  background: #087da6;
}

.filter-config-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  width: min(320px, calc(100vw - 40px));
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(8, 43, 70, .16);
}

.filter-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2edf3;
}

.filter-config-head b {
  color: #10243a;
  font-size: 13px;
}

.filter-config-head button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.filter-config-popover label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: #203c52;
  font-size: 13px;
}

.filter-config-popover input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  height: 16px;
  padding: 0;
}

.filter-config-popover small {
  color: #6f8290;
  font-weight: 800;
  line-height: 1.45;
}

.quote-filter-panel {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.quote-filter-panel label {
  flex: 0 0 126px;
  gap: 3px;
  font-size: 11px;
}

.quote-filter-panel .filter-serviceType {
  flex-basis: 168px;
}

.quote-filter-panel .filter-origin,
.quote-filter-panel .filter-destination {
  flex-basis: 148px;
}

.quote-filter-panel button,
.quote-filter-panel .filter-reset-link,
.quote-filter-panel .filter-config-wrap {
  flex: 0 0 auto;
}

.quote-filter-panel input,
.quote-filter-panel select,
.quote-filter-panel button,
.quote-filter-panel .filter-reset-link {
  min-height: 32px;
  border-radius: 7px;
}

.order-filter-panel {
  grid-template-columns:
    minmax(82px, .62fr)
    minmax(108px, .85fr)
    minmax(118px, 1fr)
    minmax(128px, 1.08fr)
    minmax(112px, .88fr)
    minmax(112px, .88fr)
    auto
    auto;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.order-filter-panel .filter-status {
  min-width: 82px;
}

.order-filter-panel .filter-reset-link,
.order-filter-panel .filter-config-wrap {
  align-self: end;
  white-space: nowrap;
}

.order-filter-panel label {
  gap: 3px;
  font-size: 11px;
}

.order-filter-panel input,
.order-filter-panel select,
.order-filter-panel .filter-reset-link,
.order-filter-panel .filter-config-trigger {
  min-height: 32px;
  border-radius: 7px;
}

.order-filter-panel .multi-order-filter-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
}

.multi-order-filter-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #34566a;
  font-size: 11px;
  font-weight: 800;
}

.multi-order-filter-label small,
.multi-order-count {
  color: #748b99;
  font-size: 10px;
  font-weight: 650;
}

.multi-order-input-shell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 7px;
  overflow-x: auto;
  border: 1px solid #bdd2de;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(20, 61, 82, .04);
}

.multi-order-input-shell:focus-within {
  border-color: #0782aa;
  box-shadow: 0 0 0 3px rgba(7, 130, 170, .12);
}

.order-filter-panel .multi-order-input-shell input {
  flex: 1 0 230px;
  min-width: 230px;
  min-height: 28px;
  padding: 3px 6px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.multi-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 27px;
  padding: 3px 5px 3px 9px;
  border: 1px solid #a9d5e3;
  border-radius: 999px;
  background: #eaf7fb;
  color: #075f80;
  font-size: 11px;
  font-weight: 850;
}

.multi-order-chip button {
  display: grid;
  width: 19px;
  height: 19px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #cceaf3;
  color: #075f80;
  cursor: pointer;
  line-height: 1;
}

.multi-order-clear {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 3px 9px;
  border: 0;
  background: transparent;
  color: #667f8e;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.supplier-type-filter-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d9e7ed;
  border-radius: 11px;
  background: #f5f9fb;
}

.supplier-type-filter-title {
  color: #3c5b6c;
  font-size: 11px;
  font-weight: 900;
}

.supplier-type-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.supplier-type-filter-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #cbdde5;
  border-radius: 8px;
  background: #fff;
  color: #3c5b6d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.supplier-type-filter-options button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #e9f2f6;
  color: #607b8a;
  font-size: 10px;
}

.supplier-type-filter-options button:hover {
  border-color: #82bfd1;
  background: #f0f9fc;
}

.supplier-type-filter-options button.active {
  border-color: #087da3;
  background: #087da3;
  color: #fff;
  box-shadow: 0 5px 14px rgba(8, 125, 163, .17);
}

.supplier-type-filter-options button.active b {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

@media (min-width: 1121px) {
  .admin-filter-panel.order-filter-panel {
    grid-template-columns:
      minmax(82px, .62fr)
      minmax(108px, .85fr)
      minmax(118px, 1fr)
      minmax(128px, 1.08fr)
      minmax(112px, .88fr)
      minmax(112px, .88fr)
      auto
      auto;
  }
}

.admin-table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.table-page-suppliers table {
  min-width: 980px;
}

.table-page-suppliers .table-col-name {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 150px;
  max-width: 190px;
  background: #fff;
  box-shadow: 1px 0 0 #dce8ee, 8px 0 14px rgba(27, 69, 90, .04);
}

.table-page-suppliers thead .table-col-name {
  z-index: 6;
  background: #f4f9fc;
}

.table-page-suppliers .table-col-supplierCode {
  min-width: 125px;
}

.table-page-suppliers .table-col-supplierServices {
  min-width: 190px;
  white-space: normal;
}

.table-page-suppliers .table-col-serviceCountries {
  min-width: 145px;
  white-space: normal;
}

.table-column-toolbar {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  min-height: 36px;
  margin: 0 0 8px;
  pointer-events: none;
}

.table-column-trigger {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: 5px;
  min-width: 74px;
  height: 34px;
  padding: 0 10px;
  color: #183246;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(17,40,58,.12);
  pointer-events: auto;
}

.table-column-trigger b {
  font-size: 12px;
  font-weight: 900;
}

.table-column-trigger.active {
  color: #fff;
  background: #146b8f;
  border-color: #146b8f;
}

.table-column-popover {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 10;
  width: min(420px, 82vw);
  padding: 12px;
  background: #fff;
  border: 1px solid #dbe5e9;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(17,40,58,.18);
  pointer-events: auto;
}

.table-column-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.table-column-popover-head b {
  color: #183246;
}

.table-column-popover-head button {
  min-height: 28px;
  padding: 0 8px;
  color: #146b8f;
  background: #eef6fb;
  border: 1px solid #cddce3;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.table-column-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.table-column-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 8px;
  background: #f8fbfd;
  border: 1px solid #e0e9ed;
  border-radius: 7px;
  color: #183246;
  font-size: 12px;
  font-weight: 800;
}

.api-config-panel,
.api-doc-layout,
.api-doc-notes {
  margin-top: 14px;
}

.api-workbench-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 18px;
  align-items: center;
}

.api-workbench-hero h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: 28px;
}

.api-workbench-hero p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.65;
}

.api-workbench-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.api-workbench-stats article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.api-workbench-stats b {
  display: block;
  color: var(--blue);
  font-size: 24px;
}

.api-workbench-stats span {
  color: var(--muted);
  font-weight: 900;
}

.api-workbench-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.api-workbench-tabs a {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 12px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.api-workbench-tabs a.active {
  border-color: rgba(8, 125, 166, .48);
  background: #edf9fb;
  box-shadow: inset 4px 0 0 #0f9f8f;
}

.api-workbench-tabs b {
  font-size: 15px;
}

.api-workbench-tabs span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.api-workbench-section {
  margin-top: 14px;
}

.api-integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.api-integration-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.api-integration-card.ready {
  border-color: #9bd7c4;
  background: #f0fbf6;
}

.api-integration-card.working {
  border-color: #a8d4eb;
  background: #f0f8fc;
}

.api-integration-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.api-integration-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.api-integration-card h3,
.api-integration-card p {
  margin: 0;
}

.api-integration-card h3 {
  color: var(--ink);
  font-size: 18px;
}

.api-integration-card-head b {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #0b5f7f;
  border-radius: 999px;
  background: #e8f4f8;
  font-size: 12px;
}

.api-integration-card p {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.api-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.api-chip-row span {
  padding: 5px 8px;
  color: #075f82;
  border-radius: 999px;
  background: #e9f5fa;
  font-size: 12px;
  font-weight: 900;
}

.api-integration-card details {
  padding-top: 8px;
  border-top: 1px solid #dce9ef;
}

.api-integration-card summary {
  cursor: pointer;
  color: #9a5b00;
  font-weight: 950;
}

.api-integration-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #334e63;
  font-weight: 800;
  line-height: 1.6;
}

.api-config-grid label.wide {
  grid-column: span 2;
}

.api-config-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.api-config-actions .button-link,
.api-config-actions button {
  min-height: 44px;
}

.api-doc-summary {
  margin-top: 14px;
}

.api-doc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
}

.api-doc-card b {
  color: var(--ink);
  font-size: 18px;
}

.api-doc-card strong {
  color: var(--blue);
  font-size: 28px;
}

.api-doc-card span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.api-example-panel pre {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 16px;
  color: #d9f5ff;
  background: #0f2f43;
  border-radius: 8px;
  line-height: 1.55;
  font-size: 13px;
}

.api-response-box {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: #f3f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 800;
}

.api-response-box code {
  color: var(--blue);
  overflow-wrap: anywhere;
}

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

.api-note-grid article {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.api-note-grid b {
  color: var(--ink);
}

.api-note-grid span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.dedicated-template-picker {
  display: grid;
  gap: 5px;
  min-width: min(360px, 100%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dedicated-template-picker select {
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 10px 9px;
  text-align: left;
  border-bottom: 1px solid #e4ecef;
  vertical-align: top;
}

.admin-table th {
  color: #4f6573;
  background: #f3f7f8;
  font-size: 12px;
  font-weight: 900;
}

.admin-table td {
  color: #183246;
}

.admin-table tbody tr.selected {
  background: #e7f3ff;
  box-shadow: inset 3px 0 0 #146b8f;
}

.quotes-table-panel .admin-table-wrap {
  max-height: 560px;
  overflow: auto;
}

.quotes-table-panel .admin-table {
  min-width: 980px;
}

.quotes-table-panel .admin-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.quotes-table-panel .admin-table th,
.quotes-table-panel .admin-table td {
  padding: 8px 9px;
}

.quote-status-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0 14px;
}

.quote-status-tabs button,
.quote-status-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #526a7a;
  font-weight: 900;
  text-decoration: none;
}

.quote-status-tabs button b,
.quote-status-tabs a b {
  min-width: 28px;
  padding: 2px 8px;
  background: #edf1f4;
  border-radius: 999px;
  color: #647784;
  text-align: center;
}

.quote-status-tabs button.active,
.quote-status-tabs a.active {
  color: #146b8f;
  background: #eef7fb;
  border-color: #146b8f;
}

.quote-status-tabs button.active b,
.quote-status-tabs a.active b {
  color: #146b8f;
  background: #d7edf6;
}

.recharge-list-panel .admin-filter-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.recharge-status-tabs {
  padding-top: 2px;
}

.recharge-operate-panel,
.recharge-detail-panel {
  margin-top: 18px;
}

.recharge-operate-form {
  display: grid;
  gap: 18px;
}

.recharge-receive-accounts {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f7fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.recharge-receive-accounts h4 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.recharge-receive-accounts > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.recharge-receive-accounts article {
  display: grid;
  gap: 5px;
  min-height: 126px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.recharge-receive-accounts b {
  color: var(--blue);
  font-size: 18px;
}

.recharge-receive-accounts span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.recharge-read-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.receivable-list-panel .admin-filter-panel {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}

.receivable-selected-total {
  align-self: center;
  color: var(--muted);
  font-weight: 900;
}

.receivable-selected-total b {
  color: var(--blue);
}

.receivable-detail-panel,
.receivable-edit-panel {
  margin-top: 18px;
}

.receivable-detail-head {
  margin-bottom: 14px;
}

.receivable-summary-grid {
  margin-bottom: 16px;
}

.receivable-line-table input,
.receivable-line-table textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
}

.receivable-line-table textarea {
  min-height: 42px;
  resize: vertical;
}

.receivable-line-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.receivable-total-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 14px;
  color: var(--muted);
  font-weight: 900;
}

.receivable-total-bar b {
  color: var(--ink);
  font-size: 18px;
}

.receivable-lines-editor {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.admin-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-detail-head p,
.muted {
  margin: 0;
  color: #627582;
}

.detail-grid {
  margin-top: 14px;
}

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

.detail-field {
  min-width: 0;
  padding: 10px;
  background: #f5f8f9;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.detail-field span {
  display: block;
  margin-bottom: 4px;
  color: #627582;
  font-size: 12px;
  font-weight: 900;
}

.detail-field b {
  display: block;
  color: #183246;
  word-break: break-word;
}

.detail-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-chip-list span {
  padding: 7px 10px;
  background: #eef7fb;
  border: 1px solid #d7edf6;
  border-radius: 999px;
  color: #146b8f;
  font-weight: 900;
}

.quote-detail-workspace {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.quote-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 12px;
  align-items: start;
}

.quote-detail-main {
  display: grid;
  gap: 10px;
}

.quote-detail-summary,
.admin-quote-detail-section {
  border-radius: 8px;
}

.admin-quote-detail-section {
  padding: 14px;
  background: #fff;
  border: 1px solid #d8e7ee;
  box-shadow: 0 10px 22px rgba(15, 37, 53, 0.04);
}

.admin-quote-detail-section .section-head {
  margin-bottom: 10px;
  gap: 8px;
}

.admin-quote-detail-section .eyebrow {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .08em;
}

.admin-quote-detail-section h2 {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.25;
}

.admin-quote-detail-section .section-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.admin-quote-detail-section .section-index {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 12px;
}

.quote-detail-summary {
  padding: 8px 10px;
}

.quote-read-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quote-detail-summary .quote-read-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.quote-detail-main .quote-read-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-route-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.quote-route-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: #f8fbfd;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
}

.quote-route-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dbe9ef;
}

.quote-route-title span {
  color: #0f8f73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.quote-route-title h3 {
  margin: 0;
  color: #17334a;
  font-size: 17px;
  line-height: 1.2;
}

.quote-route-card .quote-read-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.quote-route-card .quote-read-field {
  min-height: 58px;
  padding: 8px 9px;
}

.quote-route-meta {
  margin-top: 10px;
}

.quote-route-meta .quote-read-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-read-field {
  min-width: 0;
  padding: 8px 10px;
  background: #f6fafc;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.quote-detail-summary .quote-read-field {
  min-height: 42px;
  padding: 5px 8px;
}

.quote-read-field.wide {
  grid-column: 1 / -1;
}

.quote-read-field span {
  display: block;
  margin-bottom: 3px;
  color: #627582;
  font-size: 11px;
  font-weight: 900;
}

.quote-detail-summary .quote-read-field span {
  margin-bottom: 1px;
  font-size: 11px;
}

.quote-read-field b {
  display: block;
  color: #183246;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}

.quote-detail-summary .quote-read-field b {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-rate-drawer {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-right: 4px solid #146b8f;
}

.quote-rate-drawer .panel-title {
  margin-bottom: 0;
}

.quote-rate-drawer .compact-rates .rate-row {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
}

.quote-rate-drawer .rate-row strong,
.quote-rate-drawer .rate-row b {
  font-size: 16px;
}

.quote-rate-drawer .rate-row > div:last-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.manual-quote-page {
  display: grid;
  gap: 14px;
}

.manual-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
  gap: 14px;
  align-items: start;
}

.manual-quote-left,
.manual-quote-form {
  display: grid;
  gap: 12px;
}

.manual-quote-summary .quote-read-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-rate-list {
  display: grid;
  gap: 10px;
}

.manual-rate-card {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(110px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.manual-rate-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 90, 150, .12);
}

.manual-rate-card strong,
.manual-rate-card b {
  display: block;
  color: #17334a;
  font-size: 16px;
}

.manual-rate-card span,
.manual-rate-card small,
.manual-rate-card p {
  margin: 2px 0 0;
  color: #627582;
  font-size: 12px;
  font-weight: 800;
}

.manual-rate-card p {
  grid-column: 1 / 3;
}

.manual-rate-card > small {
  grid-column: 1 / 3;
}

.manual-rate-card > button {
  grid-column: 3;
  grid-row: 1 / 5;
  align-self: center;
  min-width: 96px;
  padding-right: 8px;
  padding-left: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.manual-rate-price {
  text-align: right;
}

.manual-quote-form {
  position: sticky;
  top: 88px;
}

.manual-quote-form .admin-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manual-quote-policy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manual-quote-policy-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d8e7ee;
  border-radius: 6px;
  background: #f3f8fb;
}

.manual-quote-policy-summary span,
.manual-quote-policy-summary b {
  display: block;
}

.manual-quote-policy-summary span {
  color: #627582;
  font-size: 10px;
  font-weight: 850;
}

.manual-quote-policy-summary b {
  margin-top: 3px;
  color: #17334a;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.manual-policy-rule {
  padding: 10px 12px;
  border-left: 3px solid #0786aa;
  background: #eef7fb;
  color: #31596d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
}

.manual-quote-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr) auto) minmax(90px, 1.15fr);
  align-items: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
  background: #fbfdfe;
}

.manual-quote-breakdown span,
.manual-quote-breakdown small,
.manual-quote-breakdown b {
  display: block;
  min-width: 0;
}

.manual-quote-breakdown small {
  color: #627582;
  font-size: 9px;
  font-weight: 850;
}

.manual-quote-breakdown b {
  margin-top: 3px;
  color: #17334a;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.manual-quote-breakdown i {
  color: #668191;
  font-style: normal;
  font-weight: 900;
}

.manual-quote-breakdown span:last-child b {
  color: #087da3;
}

.manual-quote-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #cfe2ec;
  border-radius: 8px;
  background: #eef7fb;
}

.manual-quote-total span {
  color: #627582;
  font-weight: 900;
}

.manual-quote-total b {
  color: #00618f;
  font-size: 20px;
}

@media (max-width: 980px) {
  .lane-config-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lane-config-filter-toolbar,
  .lane-config-filter-group,
  .lane-config-filter-group:nth-of-type(2) {
    grid-template-columns: 1fr;
  }

  .quote-detail-layout {
    grid-template-columns: 1fr;
  }

  .quote-rate-drawer {
    position: static;
  }

  .manual-quote-layout {
    grid-template-columns: 1fr;
  }

  .manual-quote-form {
    position: static;
  }

  .manual-rate-card {
    grid-template-columns: 1fr;
  }

  .manual-rate-card p,
  .manual-rate-card > small,
  .manual-rate-card > button {
    grid-column: auto;
    grid-row: auto;
  }

  .quote-detail-summary .quote-read-grid,
  .quote-detail-main .quote-read-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-route-columns,
  .quote-route-meta .quote-read-grid {
    grid-template-columns: 1fr;
  }

  .order-filter-panel,
  .order-link-summary,
  .order-linked-grid,
  .order-detail-layout,
  .order-review-layout,
  .order-detail-summary .quote-read-grid,
  .status-stat-grid,
  .order-status-edit-layout {
    grid-template-columns: 1fr;
  }

  .order-detail-linked,
  .order-review-panel {
    position: static;
  }

  .status-editor-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .manual-quote-policy-summary,
  .manual-quote-form .admin-form-grid,
  .quote-rate-policy-grid {
    grid-template-columns: 1fr;
  }

  .manual-quote-breakdown {
    grid-template-columns: 1fr;
  }

  .manual-quote-breakdown i {
    display: none;
  }
}

.quote-detail-mode-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-detail-mode-picker > div,
.quote-load-choice > div {
  min-height: 76px;
  padding: 14px;
  background: #f6fafc;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.quote-detail-mode-picker > div.active,
.quote-load-choice > div.active {
  background: #eef7fb;
  border-color: #146b8f;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.quote-detail-mode-picker strong,
.quote-load-choice b {
  display: block;
  color: #183246;
}

.quote-detail-mode-picker small,
.quote-load-choice small {
  display: block;
  margin-top: 5px;
  color: #627582;
  font-weight: 800;
}

.quote-current-service-card {
  display: grid;
  gap: 6px;
  max-width: 420px;
  padding: 18px;
  background: #eef7fb;
  border: 1px solid #146b8f;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.quote-current-service-card strong {
  color: #183246;
  font-size: 20px;
}

.quote-current-service-card span {
  color: #146b8f;
  font-weight: 900;
}

.quote-current-service-card small {
  color: #627582;
  font-weight: 800;
}

.quote-commercial-grid {
  display: grid;
  gap: 14px;
}

.quote-commercial-grid h3 {
  margin: 0 0 8px;
  color: #183246;
  font-size: 15px;
}

.quote-read-address {
  min-width: 0;
  padding: 14px;
  background: #fbfdfe;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
}

.quote-read-address legend {
  padding: 0 8px;
  color: #183246;
  font-weight: 900;
}

.quote-read-address > .quote-read-field {
  margin-top: 10px;
}

.readonly-toolbar {
  align-items: stretch;
}

.readonly-toolbar .quote-read-field {
  min-width: 140px;
}

.quote-package-lines {
  display: grid;
  gap: 12px;
}

.quote-package-lines .freight-item-card {
  margin: 0;
  padding: 14px;
  background: #fbfdfe;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
}

.quote-package-lines .freight-compact-grid {
  margin-top: 12px;
}

.quote-nested-grid {
  margin-top: 12px;
}

.quote-detail-rates {
  display: grid;
  gap: 8px;
}

.quote-detail-rate-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e7ee;
  border-radius: 8px;
  background: #fbfdfe;
}

.quote-detail-rate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quote-detail-rate-head strong,
.quote-detail-rate-head span,
.quote-detail-rate-head b,
.quote-detail-rate-head small {
  display: block;
}

.quote-detail-rate-head span,
.quote-detail-rate-head small,
.quote-rate-policy-grid small {
  margin-top: 3px;
  color: #627582;
  font-size: 11px;
  font-weight: 800;
}

.quote-detail-rate-head > div:last-child {
  text-align: right;
}

.quote-detail-rate-head > div:last-child b {
  color: #087da3;
  font-size: 17px;
}

.quote-rate-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quote-rate-policy-grid > span {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e0ebf1;
  border-radius: 6px;
  background: #f2f8fb;
}

.quote-rate-policy-grid b {
  display: block;
  margin-top: 3px;
  color: #17334a;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.quote-rate-accessorial,
.quote-rate-rule-note {
  margin: 0;
  color: #536d7d;
  font-size: 11px;
  line-height: 1.55;
}

.quote-rate-accessorial b {
  margin-right: 6px;
  color: #17334a;
}

.quote-rate-rule-note {
  padding-top: 8px;
  border-top: 1px solid #dce8ef;
}

.table-actions {
  white-space: nowrap;
}

.table-actions .button-link,
.table-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 32px;
  margin: 0 4px 0 0;
  padding: 0 10px;
  border: 1px solid #c9dce6;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  color: #24475b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  vertical-align: middle;
}

.table-actions .button-link:hover,
.table-actions button:hover:not(:disabled) {
  border-color: #78b9ce;
  background: #eef8fb;
  color: #087397;
}

.table-actions button[data-supplier-status][data-status="inactive"] {
  border-color: #ddc894;
  background: #fffaf0;
  color: #8a6408;
}

.table-actions button[data-supplier-status][data-status="active"] {
  border-color: #a9d9c4;
  background: #f1fbf6;
  color: #087354;
}

.table-actions button[data-delete] {
  border-color: #e2c2b7;
  background: #fff8f5;
  color: #9a4328;
}

.table-actions button:disabled {
  min-width: 48px;
  min-height: 32px;
  margin: 0 4px 0 0;
  padding: 0 10px;
  opacity: .68;
}

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

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

.admin-form label {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.admin-form label.wide {
  grid-column: 1 / -1;
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.order-status-tool input,
.order-status-tool select,
.inline-status select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  color: #183246;
}

.admin-form textarea {
  min-height: 92px;
  padding-top: 9px;
  resize: vertical;
}

.customer-list-panel {
  display: grid;
  gap: 14px;
}

.user-list-panel {
  display: grid;
  gap: 14px;
}

.user-status-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-status-cards button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  background: #fff;
  color: #25465e;
  font-weight: 900;
}

.user-status-cards button.active {
  color: #005a96;
  border-color: #0d79b7;
  background: #eaf6fc;
}

.user-status-cards b {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4eef4;
  color: #0d79b7;
}

.warehouse-list-panel {
  display: grid;
  gap: 14px;
}

.warehouse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.warehouse-toolbar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.warehouse-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warehouse-mini-stats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #f8fbfd;
  color: #25465e;
  font-weight: 900;
}

.warehouse-mini-stats b {
  color: #0d79b7;
}

.cost-item-list-panel {
  display: grid;
  gap: 14px;
}

.cost-item-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cost-item-toolbar .admin-filter-panel {
  margin: 0;
}

.cost-item-editor-modal {
  width: min(720px, calc(100vw - 44px));
}

.cost-item-editor-modal small {
  color: #718694;
  font-weight: 800;
}

.account-balance-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 14px;
}

.account-customer-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.account-customer-summary article,
.account-customer-head {
  padding: 14px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 43, 70, .06);
}

.account-customer-summary span,
.account-customer-head p {
  color: #5d7288;
  font-size: 12px;
  font-weight: 900;
}

.account-customer-summary strong {
  display: block;
  margin-top: 6px;
  color: #0d3048;
  font-size: 22px;
}

.account-customer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.account-customer-head h3,
.account-customer-head p {
  margin: 0;
}

.account-customer-head h3 {
  font-size: 22px;
}

.account-customer-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.account-customer-toolbar .admin-filter-panel {
  grid-template-columns: minmax(240px, 360px) auto;
  margin: 0;
}

.account-customer-panel tr[data-select-account] {
  cursor: pointer;
}

.account-customer-panel tr[data-select-account]:hover td {
  background: #f4f9fc;
}

.account-balance-actions button,
.account-deposit-tabs button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  background: #fff;
  color: #183246;
  font-weight: 900;
}

.account-balance-actions .primary {
  background: #146b8f;
  border-color: #146b8f;
  color: #fff;
}

.account-balance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.account-balance-card {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 43, 70, .07);
}

.account-balance-card span {
  color: #5d7288;
  font-size: 12px;
  font-weight: 900;
}

.account-balance-card strong {
  color: #0d3048;
  font-size: 26px;
  line-height: 1;
}

.account-transaction-panel .admin-filter-panel {
  grid-template-columns: minmax(160px, 220px) minmax(150px, 180px) minmax(150px, 180px) auto;
  align-items: end;
}

.account-amount {
  font-weight: 900;
}

.account-amount.positive {
  color: #16764d;
}

.account-amount.negative {
  color: #b84242;
}

.account-deposit-modal {
  width: min(1120px, calc(100vw - 44px));
}

.account-deposit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-deposit-tabs button {
  display: grid;
  gap: 2px;
  min-width: 144px;
  min-height: 50px;
  justify-items: start;
}

.account-deposit-tabs button b {
  color: #16835f;
  font-size: 11px;
}

.account-deposit-tabs button.active {
  border-color: #146b8f;
  box-shadow: inset 0 -3px 0 #146b8f;
}

.account-deposit-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: start;
}

.account-deposit-info {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.account-deposit-info h4 {
  margin: 0;
  font-size: 18px;
}

.account-deposit-info p,
.account-deposit-info ul {
  margin: 0;
  color: #5d7288;
  font-weight: 800;
}

.account-deposit-info dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.account-deposit-info dt {
  color: #5d7288;
  font-weight: 900;
}

.account-deposit-info dd {
  margin: 0;
  font-weight: 900;
}

.account-transaction-read-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .cost-item-toolbar {
    grid-template-columns: 1fr;
  }
  .account-balance-metrics,
  .account-customer-summary,
  .account-deposit-layout {
    grid-template-columns: 1fr;
  }
  .account-customer-toolbar,
  .account-transaction-panel .admin-filter-panel {
    grid-template-columns: 1fr;
  }
}

.quote-own-template-form {
  margin-top: 14px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid #c9e0ea;
  border-radius: 12px;
}

.quote-own-template-toolbar,
.quote-own-template-settings {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.quote-own-template-toolbar { justify-content: space-between; }
.quote-own-template-settings { flex-wrap: wrap; justify-content: flex-end; }
.quote-own-template-toolbar h3 { margin: 0 0 4px; }
.quote-own-template-toolbar p { margin: 0; color: #60798a; font-size: 13px; }
.quote-scope-badge { display: block; margin-top: 5px; color: #087e9f; font-size: 11px; font-weight: 800; }
.quote-scope-migration-note { display: block; margin-top: 4px; color: #8b5a13; font-size: 11px; line-height: 1.45; }
.quote-own-template-settings label { min-width: 145px; color: #38576a; font-size: 12px; font-weight: 800; }
.quote-own-template-settings select,
.quote-own-template-settings input { display: block; min-width: 145px; margin-top: 5px; }
.quote-own-template-form .supplier-rate-matrix-section { margin-top: 14px; }
.rate-basis-notice { margin: 8px 0 0; color: #486c7d; font-size: 12px; }
.drayage-destination-fields { display: grid; gap: 6px; min-width: 180px; }
.drayage-destination-fields select,
.drayage-destination-fields input { width: 100%; }
.drayage-picker-trigger { display: grid; gap: 3px; width: 100%; min-width: 210px; text-align: left; }
.drayage-picker-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drayage-picker-trigger small { color: #6b8290; font-size: 10px; font-weight: 700; }
.drayage-picker-backdrop { z-index: 75; }
.drayage-picker-modal { width: min(720px, calc(100vw - 32px)); gap: 12px; }
.drayage-picker-modal .admin-modal-head { margin-bottom: 0; }
.drayage-picker-tabs { display: flex; gap: 8px; padding: 4px; border-radius: 9px; background: #eef7fb; }
.drayage-picker-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid transparent; border-radius: 7px; color: #456777; background: transparent; font-weight: 800; }
.drayage-picker-tabs button.active { color: #fff; border-color: #087fa4; background: #087fa4; }
.drayage-picker-tabs span { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: #4e7181; background: #dcecf2; font-size: 11px; text-align: center; }
.drayage-picker-tabs button.active span { color: #087fa4; background: #fff; }
.drayage-picker-search { display: grid; gap: 5px; color: #38576a; font-size: 12px; font-weight: 800; }
.drayage-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(390px, 48vh); overflow: auto; padding: 2px; }
.drayage-picker-option { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #d6e6ed; border-radius: 8px; background: #fbfdfe; cursor: pointer; }
.drayage-picker-option:has(input:checked) { border-color: #0c8bb0; background: #eefaff; box-shadow: 0 0 0 1px #b8e4f1 inset; }
.drayage-picker-option input { margin-top: 3px; accent-color: #087fa4; }
.drayage-picker-option span { display: grid; gap: 3px; min-width: 0; }
.drayage-picker-option b { overflow: hidden; color: #183246; text-overflow: ellipsis; white-space: nowrap; }
.drayage-picker-option small { overflow: hidden; color: #67818f; text-overflow: ellipsis; white-space: nowrap; }
.drayage-picker-empty { grid-column: 1 / -1; margin: 0; padding: 28px; color: #67818f; text-align: center; }
.drayage-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #e0ebef; color: #537180; font-size: 12px; font-weight: 800; }
.drayage-picker-footer > div { display: flex; gap: 8px; }
.zip-range-fields { display: grid; gap: 5px; min-width: 200px; }
.zip-range-fields > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 5px; }
.zip-range-fields span { color: #6a8491; font-size: 12px; font-weight: 900; }
.zip-range-fields small { color: #67818f; font-size: 10px; line-height: 1.35; }
.own-distance-pricing-wrap { display: grid; gap: 5px; margin-top: 6px; padding: 6px; border: 1px solid #d5e5eb; border-radius: 7px; background: #f5fafc; }
.own-distance-pricing-wrap label { display: grid; gap: 3px; color: #557181; font-size: 10px; font-weight: 800; }
.own-distance-pricing-wrap input { min-width: 86px; }
.own-distance-range-fields { display: grid; grid-template-columns: minmax(86px, 1fr) auto minmax(86px, 1fr); align-items: end; gap: 5px; min-width: 210px; }
.own-distance-range-fields label { display: grid; gap: 3px; color: #557181; font-size: 10px; font-weight: 800; }
.own-distance-range-fields input { min-width: 0; }
.own-distance-range-separator { align-self: center; padding-top: 15px; color: #6a8491; font-size: 12px; font-weight: 900; }
.own-distance-target { display: grid; gap: 3px; min-width: 120px; color: #0d789e; }
.own-distance-target b { font-size: 13px; }
.own-distance-target small { color: #67818f; font-size: 10px; }

.quote-own-save-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  color: #086447;
  background: #e8faf3;
  border: 1px solid #9bd9c4;
  border-radius: 8px;
  font-size: 13px;
}
.quote-own-save-notice b { white-space: nowrap; }

.quote-own-history-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  color: #74520a;
  background: #fff8df;
  border: 1px solid #e6ca77;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}
.quote-own-history-notice a { color: #075f83; }
.quote-history-row td small { display: block; margin-top: 4px; color: #6b8190; }
.quote-history-modal { width: min(1180px, calc(100vw - 48px)); max-width: 1180px; }
.quote-history-modal .admin-modal-head { align-items: flex-start; }
.quote-history-modal-summary { display: flex; gap: 12px; margin: 12px 0; }
.quote-history-modal-summary span { display: grid; gap: 3px; min-width: 180px; padding: 10px 12px; background: #eef7fb; border: 1px solid #d0e4ec; border-radius: 8px; color: #60798a; font-size: 12px; }
.quote-history-modal-summary b { color: #183246; font-size: 14px; overflow-wrap: anywhere; }
.quote-history-detail-table { max-height: 55vh; overflow: auto; }
.quote-history-detail-table table { min-width: 980px; }
.quote-history-detail-table td { vertical-align: top; }
.quote-version-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.quote-version-status.active { color: #087354; background: #e7fbf4; }
.quote-version-status.pending { color: #8a5a00; background: #fff7db; }
.quote-version-status.expired { color: #9f321a; background: #fff0ea; }

.customer-quote-override-head .panel-title { align-items: center; }
.customer-quote-service-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.customer-quote-service-tabs a { display: grid; gap: 2px; min-width: 125px; padding: 10px 13px; color: #496879; background: #f7fbfd; border: 1px solid #cfe0e8; border-radius: 9px; text-decoration: none; }
.customer-quote-service-tabs a small { color: #77909e; font-size: 11px; }
.customer-quote-service-tabs a.active { color: #fff; background: #0785aa; border-color: #0785aa; box-shadow: 0 7px 18px rgba(7, 133, 170, .18); }
.customer-quote-service-tabs a.active small { color: #dff7ff; }
.customer-quote-current-card { padding: 15px; background: #f5fafc; border: 1px solid #d4e6ed; border-radius: 10px; }
.customer-quote-current-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.customer-quote-current-head h3 { margin: 3px 0 0; }
.customer-quote-current-head > div:last-child { display: grid; gap: 3px; text-align: right; color: #60798a; font-size: 12px; }
.customer-quote-current-head > div:last-child b { color: #0b6f91; font-size: 20px; }
.customer-quote-save-notice { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 9px 12px; color: #087354; background: #e8faf4; border: 1px solid #afe0d1; border-radius: 8px; font-size: 12px; }
.customer-quote-save-notice b { font-size: 13px; }
.customer-quote-override-rows { display: grid; gap: 10px; }
.customer-quote-override-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(90px, .65fr) minmax(135px, 1fr) minmax(135px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid #d6e6ed;
  border-radius: 9px;
}
.customer-quote-override-row label:nth-of-type(5) { grid-column: span 2; }
.customer-quote-override-row button { width: 100%; }
.customer-quote-service { align-self: center; display: grid; gap: 4px; }
.customer-quote-service small { color: #60798a; font-size: 12px; }
.customer-quote-override-row label { color: #496879; font-size: 12px; font-weight: 800; }
.customer-quote-override-row input,
.customer-quote-override-row select { width: 100%; margin-top: 5px; }
.customer-quote-override-row button { min-height: 42px; white-space: nowrap; }
.customer-quote-history-panel { margin-top: 18px; padding-top: 17px; border-top: 1px solid #d8e6ec; }
.customer-quote-history-panel table { min-width: 850px; }
.customer-quote-history-panel td { vertical-align: top; }
.customer-quote-history-panel td small { display: block; margin-top: 4px; color: #718795; }
.customer-quote-history-panel .status-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #087354; background: #e7fbf4; font-size: 12px; font-weight: 800; }
.customer-quote-history-panel .status-badge.expired { color: #9f321a; background: #fff0ea; }
.customer-quote-history-panel .status-badge.pending { color: #8a5a00; background: #fff7db; }
.customer-quote-detail-modal .quote-history-modal-summary { flex-wrap: wrap; }
.customer-quote-detail-modal .quote-history-modal-summary span { flex: 1 1 180px; }
.customer-quote-detail-modal .quote-history-detail-table table { min-width: 1050px; }
.customer-quote-detail-modal .quote-history-detail-table td:last-child { color: #08759a; font-size: 15px; }
.customer-service-status-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 12px; }
.customer-service-status-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.customer-service-status-legend span::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.customer-service-status-legend .updated { color: #a95a00; background: #fff4d7; }
.customer-service-status-legend .synced { color: #087354; background: #e7fbf4; }
.customer-service-status-legend .empty { color: #6d8190; background: #eef3f6; }
.customer-service-quote-table table { min-width: 1180px; table-layout: fixed; }
.customer-service-quote-table th:first-child,
.customer-service-quote-table td:first-child { position: sticky; left: 0; z-index: 2; width: 185px; background: #fff; box-shadow: 1px 0 0 #d9e6eb; }
.customer-service-quote-table thead th:first-child { z-index: 3; background: #edf6fa; }
.customer-service-quote-table th:nth-child(2),
.customer-service-quote-table td:nth-child(2) { width: 75px; }
.customer-service-quote-table td { padding: 10px 8px; vertical-align: middle; }
.customer-service-quote-table td:first-child a { color: #17384b; text-decoration: none; }
.customer-service-customer-cell { display: grid; justify-items: start; gap: 7px; }
.customer-service-customer-cell .customer-level-adjust-link { display: inline-flex; padding: 4px 8px; color: #08759a; background: #e8f7fc; border: 1px solid #bce2ee; border-radius: 7px; font-size: 11px; font-weight: 850; }
.customer-service-customer-cell .customer-level-adjust-link:hover { color: #fff; background: #0785aa; border-color: #0785aa; }
.customer-account-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 850; }
.customer-account-status.active { color: #087354; background: #e7fbf4; }
.customer-account-status.inactive { color: #9f321a; background: #fff0ea; }
.customer-service-quote-status { display: grid; gap: 3px; min-height: 48px; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; }
.customer-service-quote-status b { font-size: 12px; }
.customer-service-quote-status small { color: inherit; font-size: 10px; opacity: .8; }
.customer-service-quote-status.updated { color: #9a5100; background: #fff5dc; border-color: #efd08b; }
.customer-service-quote-status.synced { color: #087354; background: #e9faf5; border-color: #b9e4d7; }
.customer-service-quote-status.empty { color: #708592; background: #f1f5f7; border-color: #dce6ea; }
.customer-service-quote-status.inactive { color: #9f321a; background: #fff0ea; border-color: #ecc6b8; }

@media (max-width: 1180px) {
  .customer-quote-override-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer-quote-service { grid-column: 1 / -1; }
  .customer-quote-override-row label:nth-of-type(5) { grid-column: span 2; }
}

@media (max-width: 700px) {
  .customer-quote-override-row { grid-template-columns: 1fr; }
  .customer-quote-service { grid-column: auto; }
  .customer-quote-override-row label:nth-of-type(5) { grid-column: auto; }
}

.generated-level-quote-panel { margin-top: 16px; }
.generated-level-quote-list { display: grid; gap: 9px; }
.generated-level-quote-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) minmax(120px, 1fr) repeat(3, minmax(110px, .8fr)) 105px minmax(115px, .8fr) minmax(140px, 1fr) 90px auto;
  align-items: end;
  gap: 9px;
  padding: 11px;
  background: #f8fbfd;
  border: 1px solid #d5e6ed;
  border-radius: 9px;
}
.generated-level-quote-row > div { display: grid; gap: 4px; align-self: center; }
.generated-level-quote-row span,
.generated-level-quote-row small { color: #60798a; font-size: 11px; }
.generated-level-quote-row label { color: #496879; font-size: 11px; font-weight: 800; }
.generated-level-quote-row input,
.generated-level-quote-row select { width: 100%; margin-top: 4px; }
.generated-level-quote-row button { min-height: 42px; white-space: nowrap; }

@media (max-width: 1180px) {
  .generated-level-quote-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.quote-history-panel { margin-top: 16px; }
.quote-history-head { margin-bottom: 10px; }
.quote-history-head > span { color: #547184; font-size: 13px; font-weight: 800; }
.quote-history-row { cursor: pointer; }
.quote-history-row:hover td { background: #f0f9fc; }
.quote-history-row td:first-child small { display: block; margin-top: 4px; color: #6b8190; }
.quote-history-table td { vertical-align: middle; }

@media (max-width: 900px) {
  .quote-own-template-toolbar,
  .quote-own-template-settings { align-items: stretch; flex-direction: column; }
  .quote-own-template-settings label,
  .quote-own-template-settings select,
  .quote-own-template-settings input { width: 100%; }
}

.customer-list-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-list-actions > div:last-child {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.customer-status-tabs {
  margin: 0;
}

.admin-status-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  color: #7a2f2f;
  font-weight: 800;
}

.admin-status-switch::before {
  content: "";
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: #c9d5dc;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
}

.admin-status-switch.on {
  color: #16764d;
}

.admin-status-switch.on::before {
  background: #18b981;
}

.customer-basic-read,
.customer-tabs-panel {
  display: grid;
  gap: 14px;
}

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

.customer-basic-form {
  box-shadow: none;
  border: 0;
  padding: 0;
}

.customer-detail-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.customer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #d7e5ef;
  padding-bottom: 10px;
}

.customer-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  background: #fff;
  color: #25465e;
  font-weight: 900;
}

.customer-tabs button.active {
  color: #005a96;
  border-color: #0d79b7;
  background: #eaf6fc;
}

.customer-tab-body {
  display: grid;
  gap: 12px;
}

.customer-tab-search {
  width: min(360px, 100%);
  min-height: 38px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  padding: 0 12px;
}

.customer-inline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.customer-notice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-notice-grid article {
  display: grid;
  gap: 10px;
  min-height: 176px;
  padding: 14px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 14px;
  border: 1px dashed #b9ccd8;
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
}

.customer-credit-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.supplier-service-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #cddce3;
  border-radius: 8px;
  background: #fff;
}

.supplier-service-checks span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #183246;
  font-size: 13px;
  font-weight: 800;
}

.supplier-service-checks input {
  width: auto;
  min-height: 0;
}

.supplier-sub-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.supplier-sub-filter label {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.supplier-sub-filter input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #cddce3;
  border-radius: 8px;
}

.supplier-query-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -6px;
}

.form-actions,
.order-status-tool,
.inline-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-editor-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.supplier-editor-page .supplier-editor-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.supplier-editor-page .wide {
  grid-column: 1 / -1;
}

.supplier-service-multi {
  margin: 0;
  padding: 12px;
  border: 1px solid #cfe0e8;
  border-radius: 8px;
  background: #f8fbfc;
}

.supplier-service-multi legend {
  padding: 0 6px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.supplier-service-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.supplier-service-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d7e6ed;
  border-radius: 8px;
  background: #fff;
  color: #10243e;
  font-size: 13px;
  font-weight: 900;
}

.supplier-service-options input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

.supplier-service-options label:has(input:checked) {
  border-color: #0e8aa7;
  background: #e8fbf7;
  color: #075f83;
}

.supplier-realtime-workbench .admin-table td small,
.supplier-quote-candidate-panel .admin-table td small {
  display: block;
  margin-top: 4px;
  color: #5f7384;
  font-size: 12px;
  font-weight: 700;
}

.supplier-quote-request-grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.supplier-request-summary-card,
.supplier-accepted-summary-card {
  min-width: 0;
}

.supplier-request-primary-meta {
  display: grid;
  grid-template-columns: minmax(180px, 1.45fr) minmax(120px, .8fr) minmax(120px, .8fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #d9e7ed;
  border-radius: 10px;
  background: #fff;
}

.supplier-request-primary-meta div,
.supplier-request-timing-grid div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid #e1ebef;
}

.supplier-request-primary-meta div:last-child,
.supplier-request-timing-grid div:last-child {
  border-right: 0;
}

.supplier-request-primary-meta span,
.supplier-request-route span,
.supplier-request-timing-grid span,
.supplier-request-status span {
  display: block;
  margin-bottom: 4px;
  color: #678090;
  font-size: 11px;
  font-weight: 800;
}

.supplier-request-primary-meta b,
.supplier-request-route b,
.supplier-request-timing-grid b {
  display: block;
  color: #173451;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.supplier-request-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
}

.supplier-request-route article {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #cfe1e9;
  border-radius: 10px;
  background: #f3f9fc;
}

.supplier-request-route i {
  align-self: center;
  color: #0b86a8;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.supplier-request-timing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d9e7ed;
  border-radius: 10px;
  background: #fff;
}

.supplier-request-timing-grid .amount b {
  color: #087b9e;
}

.supplier-request-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #edf7fa;
}

.supplier-request-status span {
  margin: 0;
}

.supplier-request-status b {
  color: #086b8d;
}

.supplier-accepted-summary-card .quote-read-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-accepted-summary-card .quote-read-grid > div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f6fafc;
}

.supplier-accepted-summary-card .quote-read-grid b {
  overflow-wrap: anywhere;
}

.supplier-accepted-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 28px 18px;
  color: #617988;
  text-align: center;
}

.supplier-accepted-empty i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #6d8795;
  background: #e9f1f5;
  font-style: normal;
}

.supplier-accepted-empty b {
  color: #294b5f;
}

.supplier-accepted-empty span {
  max-width: 280px;
  font-size: 12px;
  line-height: 1.55;
}

.supplier-response-compare-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border: 1px solid #d9e7ed;
  border-radius: 9px;
  background: #f5fafc;
}

.supplier-response-compare-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: #365b72;
  font-weight: 800;
}

.supplier-response-compare-toolbar span {
  color: #617988;
  font-size: 12px;
  font-weight: 800;
}

.supplier-response-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.supplier-response-compare-grid > article {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid #d4e4eb;
  border-radius: 11px;
  background: #fff;
}

.supplier-response-compare-grid > article.best {
  border-color: #18a37b;
  box-shadow: inset 0 3px 0 #18a37b;
}

.supplier-response-compare-grid > article.expired {
  opacity: .72;
  background: #f7f7f7;
}

.supplier-response-compare-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.supplier-response-compare-card-head em {
  padding: 3px 7px;
  border-radius: 999px;
  color: #087354;
  background: #e7fbf4;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.supplier-response-compare-grid strong {
  color: #087b9e;
  font-size: 22px;
}

.supplier-response-compare-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.supplier-response-compare-grid dl div {
  min-width: 0;
  padding: 8px;
  border-radius: 7px;
  background: #f4f8fa;
}

.supplier-response-compare-grid dt {
  color: #6a8190;
  font-size: 10px;
  font-weight: 800;
}

.supplier-response-compare-grid dd {
  margin: 3px 0 0;
  color: #294b5f;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.supplier-response-unavailable {
  padding: 9px;
  border-radius: 7px;
  color: #7c6a63;
  background: #f1ece9;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

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

.supplier-quote-flow-note span {
  min-height: 52px;
  padding: 12px;
  border: 1px solid #d6e6ed;
  border-radius: 8px;
  background: #f7fbfd;
  color: #173451;
  font-weight: 900;
}

.generic-editor-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.generic-editor-page .generic-editor-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generic-editor-page .wide {
  grid-column: 1 / -1;
}

.order-status-tool {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f5f8f9;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.order-status-tool select,
.order-status-tool input {
  width: auto;
  min-width: 160px;
  min-height: 32px;
}

.selected-order-pill {
  display: grid;
  min-width: 240px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
}

.selected-order-pill span,
.selected-order-pill small {
  color: #627582;
  font-size: 11px;
  font-weight: 800;
}

.selected-order-pill b {
  color: #183246;
  font-size: 13px;
  line-height: 1.25;
}

.order-linked-panel {
  display: grid;
  gap: 12px;
}

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

.order-linked-grid {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.order-linked-grid section {
  min-width: 0;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.order-linked-grid h4 {
  margin: 0 0 10px;
  color: #183246;
  font-size: 15px;
}

.order-detail-workspace {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  gap: 12px;
  align-items: start;
}

.order-detail-main {
  display: grid;
  gap: 10px;
}

.order-detail-linked {
  position: sticky;
  top: 88px;
}

.order-detail-linked-grid {
  grid-template-columns: 1fr;
}

.order-detail-linked .admin-table {
  min-width: 560px;
}

.order-detail-status-tool {
  margin-bottom: 0;
}

.order-detail-summary .quote-read-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.order-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.order-review-head {
  align-items: center;
}

.order-review-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 14px;
}

.order-review-panel .quote-read-grid {
  grid-template-columns: 1fr;
}

.order-review-panel .quote-read-field b {
  white-space: normal;
}

.order-review-form {
  display: grid;
  gap: 12px;
}

.order-review-choice {
  display: grid;
  gap: 8px;
}

.order-review-choice label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px;
  cursor: pointer;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.order-review-choice label.selected {
  background: #edf8fb;
  border-color: #146b8f;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.order-review-choice input {
  margin-top: 3px;
}

.order-review-choice span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-review-choice b {
  color: #183246;
  font-size: 14px;
}

.order-review-choice small {
  color: #627582;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.order-service-tabs {
  margin-bottom: 12px;
}

.status-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  overflow: visible;
}

.status-stat-card {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 9px;
  text-align: left;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.status-stat-card.active {
  border-color: #146b8f;
  background: #edf8fb;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.status-stat-card > i {
  display: block;
  width: 8px;
  height: 24px;
  background: var(--status-color, #146b8f);
  border-radius: 999px;
}

.status-stat-main,
.status-stat-main strong,
.status-stat-main small {
  min-width: 0;
  display: block;
  align-items: center;
}

.status-stat-main strong {
  color: #183246;
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-stat-main small {
  margin-top: 2px;
  color: #627582;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-stat-bar {
  display: none;
}

.status-stat-bar i {
  display: none;
}

.status-stat-card b {
  min-width: 24px;
  padding: 3px 7px;
  color: #183246;
  text-align: center;
  background: #eef5f8;
  border-radius: 999px;
  font-size: 12px;
}

.dispatch-workbench .panel-title p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 700;
}

.dispatch-service-tabs {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dispatch-service-tabs a,
.dispatch-stat-grid a {
  cursor: pointer;
  pointer-events: auto;
}

.dispatch-stat-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dispatch-stat-grid .status-stat-card {
  grid-template-columns: 8px minmax(0, 1fr) 26px;
  min-height: 44px;
  padding: 7px 8px;
}

.dispatch-table-wrap .admin-table {
  min-width: 980px;
}

.dispatch-assign-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.dispatch-assign-form-grid {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(460px, 1.12fr);
  gap: 14px;
  align-items: start;
}

.dispatch-read-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dispatch-supplier-list {
  display: grid;
  gap: 10px;
}

.dispatch-supplier-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px 10px;
  padding: 12px;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.dispatch-supplier-card input {
  grid-row: span 6;
  margin-top: 4px;
}

.dispatch-supplier-card:has(input:checked) {
  border-color: #146b8f;
  background: #eef7fb;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.dispatch-supplier-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dispatch-supplier-head strong {
  color: #183246;
  font-size: 17px;
}

.dispatch-supplier-head b {
  min-width: 38px;
  padding: 3px 8px;
  text-align: center;
  color: #146b8f;
  background: #d7edf6;
  border-radius: 999px;
}

.dispatch-supplier-card span {
  color: #526a7a;
  font-weight: 800;
}

.dispatch-supplier-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dispatch-supplier-actions a {
  padding: 7px 10px;
  color: #146b8f;
  background: #fff;
  border: 1px solid #bdd6e2;
  border-radius: 8px;
  text-decoration: none;
}

.dispatch-pickup-flow,
.dispatch-manual-entry {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dbe9ef;
}

.dispatch-flow-editor-panel .dispatch-manual-entry {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dispatch-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dispatch-flow-head h4 {
  margin: 0 0 4px;
  color: #183246;
  font-size: 18px;
}

.dispatch-flow-head p {
  margin: 0;
  color: #526a7a;
  font-weight: 800;
  line-height: 1.45;
}

.dispatch-sync-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  color: #146b8f;
  background: #eef7fb;
  border: 1px solid #bdd6e2;
}

.dispatch-sync-badge.api {
  color: #176f4d;
  background: #e9f8f1;
  border-color: #b8e3cb;
}

.dispatch-source-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.dispatch-source-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  background: #f8fbfd;
  color: #183246;
  font-weight: 900;
  cursor: pointer;
}

.dispatch-source-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #146b8f;
}

.dispatch-source-toggle label:has(input:checked) {
  border-color: #146b8f;
  background: #eef7fb;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.dispatch-flow-steps {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 10px;
}

.dispatch-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  align-items: start;
  flex: 0 0 94px;
  min-height: 96px;
  padding: 10px 8px;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  background: #f8fbfd;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.dispatch-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  right: -18px;
  width: 18px;
  height: 2px;
  background: #bdd6e2;
}

.dispatch-flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 23px;
  right: -20px;
  border-left: 7px solid #bdd6e2;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.dispatch-flow-step i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-style: normal;
  color: #146b8f;
  background: #e6f5fb;
  border-radius: 999px;
  font-weight: 900;
}

.dispatch-flow-step strong,
.dispatch-flow-step small,
.dispatch-flow-step span {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.dispatch-flow-step strong {
  color: #183246;
  line-height: 1.25;
}

.dispatch-flow-step small,
.dispatch-flow-step span {
  color: #526a7a;
  font-weight: 800;
  font-size: 12px;
}

.dispatch-flow-step.done {
  background: #eefaf5;
  border-color: #b8e3cb;
}

.dispatch-flow-step.current {
  background: #eef7fb;
  border-color: #146b8f;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.dispatch-flow-step.selected {
  border-color: #0b7eaa;
  box-shadow: inset 0 0 0 1px #0b7eaa;
}

.dispatch-flow-step.next {
  border-color: #8cc8dd;
}

.dispatch-flow-step.locked {
  opacity: .78;
  cursor: pointer;
}

.dispatch-flow-step:disabled {
  cursor: not-allowed;
}

.dispatch-manual-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.dispatch-manual-status .wide {
  grid-column: 1 / -1;
}

.dispatch-manual-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dispatch-manual-entry-grid .wide {
  grid-column: 1 / -1;
}

.dispatch-manual-entry-grid input,
.dispatch-manual-status input,
.dispatch-manual-status select {
  min-height: 42px;
}

.supplier-quote-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.supplier-quote-detail-grid .admin-panel {
  align-self: start;
}

.supplier-quote-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.supplier-quote-stat-grid .status-stat-card {
  text-decoration: none;
}

.status-workbench-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f5f8f9;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.status-workbench-tools b {
  color: #183246;
}

.status-workbench-tools span {
  color: #627582;
  font-weight: 800;
}

.status-workbench-tools button {
  margin-left: auto;
}

.status-dictionary-workbench .panel-title p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 700;
}

.status-dictionary-service-tabs,
.status-dictionary-group-tabs {
  margin-bottom: 10px;
}

.status-dictionary-table td small {
  display: block;
  margin-top: 3px;
  color: #7a8c98;
  font-size: 11px;
  font-weight: 800;
}

.color-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--swatch, #146b8f);
  box-shadow: 0 0 0 3px #eef5f8;
}

.muted-row {
  color: #738697;
  background: #f7fafc;
}

.status-dictionary-editor .admin-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-level-workbench .panel-title p,
.customer-level-customers .panel-title p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 700;
}

.customer-level-tabs {
  margin-bottom: 12px;
}

.level-summary-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

.level-quote-workbench .panel-title p,
.level-quote-pricing-panel .panel-title p,
.level-quote-customers-panel .panel-title p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 700;
}

.level-quote-service-tabs,
.level-quote-level-tabs {
  margin-bottom: 10px;
}

.level-quote-service-tabs {
  overflow-x: auto;
}

.level-quote-service-tabs a {
  flex: 0 0 auto;
  min-width: 112px;
  justify-content: space-between;
}

.level-quote-service-tabs a span {
  white-space: nowrap;
}

.level-quote-level-tabs {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.level-quote-layout {
  align-items: start;
}

.panel-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.level-quote-editor-modal {
  max-width: 860px;
}

.quote-policy-formula-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid #dce8ef;
  color: #38566a;
}

.quote-policy-formula-note b {
  color: #123e56;
}

.quote-policy-formula-note span {
  max-width: 520px;
  text-align: right;
}

.quote-policy-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.quote-policy-flow > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid #d8e7ef;
  border-radius: 6px;
  background: #f8fbfd;
}

.quote-policy-flow > div b {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #087da3;
  color: #fff;
}

.quote-policy-flow > div span {
  color: #173b50;
  font-weight: 900;
}

.quote-policy-flow > div small {
  color: #667f8f;
}

.quote-policy-flow > i {
  color: #6b8798;
  font-style: normal;
  text-align: center;
}

.quote-policy-equation {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dce8ef;
  color: #536f80;
}

.quote-policy-equation b {
  color: #0a5f80;
}

.quote-base-price-table table {
  min-width: 920px;
}

.quote-service-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #d8e7ef;
  border-radius: 14px;
  background: #f4f8fb;
  scrollbar-width: thin;
}

.quote-center-work-panel > .quote-service-tabs {
  margin-top: 0;
}

.quote-service-tab {
  display: flex;
  flex: 1 0 128px;
  flex-direction: column;
  gap: 3px;
  min-width: 128px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #425f70;
  text-align: left;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.quote-service-tab span {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-service-tab small {
  color: #718897;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.quote-service-tab:hover {
  border-color: #b8d8e5;
  background: #fff;
  color: #086d90;
}

.quote-service-tab.active {
  border-color: #087da3;
  background: #087da3;
  color: #fff;
  box-shadow: 0 6px 16px rgba(8, 125, 163, .18);
}

.quote-service-tab.active small {
  color: #d8f2f8;
}

.quote-service-tab-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 4px 12px;
}

.quote-product-definition {
  display: grid;
  grid-template-columns: minmax(175px, .62fr) minmax(500px, 2.2fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #cde2eb;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5fbfd, #eef7fa);
}

.quote-pricing-model-area {
  display: grid;
  gap: 11px;
}

.quote-pricing-model-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 7px;
  padding: 4px;
  border: 1px solid #d4e4eb;
  border-radius: 10px;
  background: #eaf3f7;
}

.quote-pricing-model-switch a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #456577;
  text-decoration: none;
}

.quote-pricing-model-switch a b {
  font-size: 12px;
  white-space: nowrap;
}

.quote-pricing-model-switch a small {
  font-size: 10px;
  text-align: right;
}

.quote-pricing-model-switch a.active {
  border-color: #75bdd3;
  background: #fff;
  color: #086b8d;
  box-shadow: 0 3px 10px rgba(21, 79, 103, .1);
}

.quote-product-identity {
  display: grid;
  gap: 4px;
}

.quote-product-identity span,
.quote-product-definition small,
.quote-supplier-map-card span,
.quote-supplier-map-card small {
  color: #687f8e;
  font-size: 11px;
}

.quote-product-identity b {
  color: #153c51;
  font-size: 17px;
}

.quote-product-identity code {
  width: max-content;
  padding: 3px 7px;
  border-radius: 5px;
  background: #d9eef5;
  color: #086b8d;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
}

.quote-product-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quote-product-flow span {
  padding: 8px 10px;
  border: 1px solid #d4e5ec;
  border-radius: 8px;
  background: #fff;
  color: #31576b;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.quote-product-flow i {
  color: #7b96a5;
  font-style: normal;
}

.quote-supplier-mappings {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.quote-supplier-map-card {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(250px, 1.5fr) minmax(190px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid #dce8ee;
  border-radius: 12px;
  background: #fff;
}

.quote-map-source,
.quote-map-target {
  display: grid;
  gap: 3px;
}

.quote-map-source b,
.quote-map-target b {
  color: #204a60;
  font-size: 12px;
}

.quote-map-rule p {
  margin: 4px 0 0;
  color: #526f80;
  font-size: 11px;
  line-height: 1.45;
}

.quote-supplier-map-card em {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e4f5ed;
  color: #087354;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.quote-mapping-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px dashed #b9d2dc;
  border-radius: 12px;
  color: #607b8a;
  font-size: 12px;
}

.quote-mapping-empty b {
  color: #294f63;
  white-space: nowrap;
}

.quote-mapping-empty .button-link {
  margin-left: auto;
}

.quote-composite-cost-board {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #cadfe8;
  border-radius: 12px;
  background: #fbfdfe;
}

.quote-composite-head,
.quote-composite-formula {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.quote-composite-head > div {
  display: grid;
  gap: 3px;
}

.quote-composite-head b,
.quote-composite-formula b {
  color: #204b60;
  font-size: 12px;
}

.quote-composite-head span,
.quote-composite-formula span {
  color: #667f8f;
  font-size: 11px;
}

.quote-composite-head em {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e7f5f9;
  color: #087294;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.quote-composite-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.quote-composite-components article {
  display: grid;
  gap: 4px;
  min-height: 100px;
  padding: 11px;
  border: 1px solid #d9e6ec;
  border-radius: 9px;
  background: #fff;
}

.quote-composite-components article.internal {
  border-style: dashed;
  background: #f5fafc;
}

.quote-own-pricing-components article.template {
  border-color: #8ac9dc;
  background: #eef9fc;
}

.quote-own-pricing-components article.reference {
  border-style: dashed;
  background: #faf8f2;
}

.quote-composite-components span,
.quote-composite-components small {
  color: #6c8493;
  font-size: 10px;
}

.quote-composite-components b {
  color: #254f64;
  font-size: 12px;
}

.quote-composite-components strong {
  align-self: end;
  color: #087da3;
  font-size: 13px;
}

.quote-composite-formula {
  padding-top: 10px;
  border-top: 1px solid #dde9ee;
}

.quote-service-tab-summary div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.quote-service-tab-summary span,
.quote-service-tab-summary p {
  margin: 0;
  color: #667f8f;
  font-size: 12px;
}

.quote-service-tab-summary b {
  color: #173b50;
  font-size: 16px;
}

@media (max-width: 760px) {
  .quote-service-tabs {
    margin-top: 14px;
  }

  .quote-service-tab-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .quote-product-definition,
  .quote-supplier-map-card {
    grid-template-columns: 1fr;
  }

  .quote-pricing-model-switch {
    grid-template-columns: 1fr;
  }

  .quote-product-flow {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-product-flow i {
    text-align: center;
    transform: rotate(90deg);
  }

  .quote-mapping-empty {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-mapping-empty .button-link {
    margin-left: 0;
  }

  .quote-composite-head,
  .quote-composite-formula {
    align-items: flex-start;
    flex-direction: column;
  }
}

.quote-base-price-table th,
.quote-base-price-table td {
  vertical-align: top;
}

.quote-base-level-head small {
  display: block;
  margin-top: 3px;
  color: #648092;
  font-size: 11px;
  font-weight: 750;
}

.quote-base-service-cell {
  min-width: 210px;
  max-width: 270px;
  white-space: normal;
}

.quote-base-service-cell b,
.quote-base-service-cell small,
.quote-base-cost-cell strong,
.quote-base-cost-cell small,
.quote-base-price-cell small {
  display: block;
}

.quote-base-service-cell small,
.quote-base-cost-cell small,
.quote-base-price-cell small {
  margin-top: 4px;
  color: #667f8f;
  font-size: 11px;
  line-height: 1.42;
}

.quote-base-service-cell a {
  display: inline-flex;
  margin-top: 7px;
  color: #076b8e;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.quote-base-cost-cell {
  min-width: 185px;
  max-width: 245px;
  white-space: normal;
}

.quote-base-cost-cell strong,
.quote-base-price-link strong {
  color: #087da3;
  font-size: 14px;
}

.quote-base-cost-status {
  display: inline-flex;
  margin-top: 7px;
  color: #087354;
  font-size: 11px;
  font-weight: 850;
}

.quote-base-cost-status.expired {
  color: #9a5b00;
}

.quote-base-price-cell {
  min-width: 126px;
}

.quote-base-price-link {
  display: grid;
  gap: 1px;
  color: inherit;
  text-decoration: none;
}

.quote-base-price-link:hover strong {
  color: #0a5f80;
  text-decoration: underline;
}

.quote-base-unavailable {
  color: #718796;
  font-weight: 850;
}

.quote-base-empty {
  padding: 28px 16px !important;
  color: #6b8190;
  text-align: center;
}

.quote-policy-matrix-link {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 86px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #0b6689;
  text-decoration: none;
}

.quote-policy-matrix-link:hover,
.quote-policy-matrix-link.active {
  border-color: #9bcfe0;
  background: #eef8fb;
}

.quote-policy-matrix-link b {
  font-size: 15px;
}

.quote-policy-matrix-link span {
  color: #6b8190;
  font-size: 12px;
  font-weight: 700;
}

.customer-quote-policy-table table {
  min-width: 1120px;
}

.customer-quote-policy-table td small {
  display: block;
  margin-top: 4px;
  color: #718796;
}

.customer-quote-policy-table tr.active td {
  background: #f0f8fb;
}

.customer-quote-policy-table .policy-rule-cell {
  min-width: 230px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.5;
}

.quote-policy-source {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf3f6;
  color: #526d7e;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quote-policy-source.custom {
  background: #e4f6ef;
  color: #137153;
}

@media (max-width: 900px) {
  .quote-policy-flow {
    grid-template-columns: 1fr;
  }

  .quote-policy-flow > i {
    transform: rotate(90deg);
  }

  .quote-policy-equation,
  .quote-policy-formula-note {
    flex-direction: column;
  }

  .quote-policy-formula-note span {
    text-align: left;
  }
}

.customer-level-editor-modal {
  max-width: 760px;
}

.customer-level-manage-modal {
  width: min(1040px, calc(100vw - 44px));
}

.customer-level-manage-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.customer-level-manage-list,
.customer-level-manage-form {
  margin: 0;
}

.customer-level-list-buttons {
  display: grid;
  gap: 8px;
}

.customer-level-list-buttons a {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  color: #183246;
  text-decoration: none;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.customer-level-list-buttons a.active {
  border-color: #146b8f;
  background: #edf8fb;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.customer-level-list-buttons strong {
  font-size: 14px;
}

.customer-level-list-buttons span {
  color: #627582;
  font-size: 12px;
  font-weight: 800;
}

.modal-close-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #183246;
  text-decoration: none;
  background: #fff;
  border: 1px solid #d3e3ea;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
}

.reconcile-workbench {
  display: grid;
  gap: 12px;
}

.panel-title.compact {
  margin-bottom: 8px;
}

.panel-title.compact h3,
.panel-title.compact p {
  margin: 0;
}

.panel-title.compact p {
  color: #627582;
  font-size: 13px;
  font-weight: 800;
}

.reconcile-cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.reconcile-cycle-grid button,
.reconcile-cycle-grid a,
.reconcile-customer-grid button,
.reconcile-customer-grid a {
  border: 1px solid #d6e5ec;
  background: #f9fcfd;
  color: #183246;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.reconcile-cycle-grid button,
.reconcile-cycle-grid a {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 3px 9px;
  align-items: center;
  min-height: 76px;
  padding: 11px;
}

.reconcile-cycle-grid button i,
.reconcile-cycle-grid a i {
  grid-row: 1 / 3;
  width: 7px;
  height: 42px;
  background: #147095;
  border-radius: 999px;
}

.reconcile-cycle-grid button strong,
.reconcile-cycle-grid a strong,
.reconcile-customer-grid button strong,
.reconcile-customer-grid a strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.reconcile-cycle-grid button small,
.reconcile-cycle-grid a small,
.reconcile-customer-grid button span,
.reconcile-customer-grid a span {
  display: block;
  margin-top: 3px;
  color: #607686;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.reconcile-cycle-grid button b,
.reconcile-cycle-grid a b {
  min-width: 28px;
  padding: 4px 8px;
  text-align: center;
  background: #e7f2f8;
  border-radius: 999px;
}

.reconcile-cycle-grid button em,
.reconcile-cycle-grid a em {
  grid-column: 2 / 4;
  color: #147095;
  font-style: normal;
  font-weight: 900;
}

.reconcile-cycle-grid button.active,
.reconcile-cycle-grid a.active,
.reconcile-customer-grid button.active,
.reconcile-customer-grid a.active {
  border-color: #147095;
  background: #eaf6fb;
  box-shadow: inset 0 0 0 1px #147095;
}

.reconcile-customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.reconcile-customer-grid button,
.reconcile-customer-grid a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-height: 72px;
  padding: 11px 12px;
}

.reconcile-customer-grid button span,
.reconcile-customer-grid a span {
  grid-column: 1 / 2;
}

.reconcile-customer-grid button b,
.reconcile-customer-grid a b {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #147095;
  font-size: 15px;
}

.reconcile-candidate-block {
  padding-top: 4px;
}

.reconcile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.reconcile-actions .inline-checkbox {
  margin-right: auto;
  color: #183246;
  font-size: 13px;
  font-weight: 900;
}

.reconcile-status-tabs {
  margin-bottom: 10px;
}

.reconcile-statement-panel {
  margin-top: 12px;
}

.writeoff-workbench {
  display: grid;
  gap: 12px;
}

.writeoff-list-panel {
  display: grid;
  gap: 12px;
}

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

.writeoff-list-summary div {
  padding: 12px;
  background: #f5f8f9;
  border: 1px solid #dbe7ec;
  border-radius: 8px;
}

.writeoff-list-summary small {
  display: block;
  color: #607686;
  font-size: 12px;
  font-weight: 900;
}

.writeoff-list-summary strong {
  display: block;
  margin-top: 4px;
  color: #183246;
  font-size: 18px;
}

.linklike {
  padding: 0;
  color: #146b8f;
  font: inherit;
  font-weight: 900;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.money-link {
  color: #0b789f;
}

.quote-order-amount-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0b789f;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.quote-order-amount-link small {
  color: #607686;
  font-size: 12px;
  font-weight: 800;
}

.quote-order-amount-link:hover strong {
  text-decoration: underline;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  color: #183246;
  font-weight: 900;
  text-decoration: none;
  background: #fff;
  border: 1px solid #c6dce6;
  border-radius: 8px;
}

.button-link.primary {
  color: #fff;
  background: #146b8f;
  border-color: #146b8f;
}

.button-link.danger {
  color: #8a2f12;
  background: #fff6f0;
  border-color: #e7b39e;
}

.writeoff-customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.writeoff-customer-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-height: 76px;
  padding: 12px;
  color: #183246;
  text-align: left;
  background: #f9fcfd;
  border: 1px solid #d6e5ec;
  border-radius: 8px;
  cursor: pointer;
}

.writeoff-customer-grid button strong {
  display: block;
  font-size: 14px;
}

.writeoff-customer-grid button span {
  grid-column: 1 / 2;
  color: #607686;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.writeoff-customer-grid button b {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #147095;
  font-size: 15px;
}

.writeoff-customer-grid button.active {
  border-color: #147095;
  background: #eaf6fb;
  box-shadow: inset 0 0 0 1px #147095;
}

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

.writeoff-summary-strip div {
  padding: 12px;
  background: #f5f8f9;
  border: 1px solid #dbe7ec;
  border-radius: 8px;
}

.writeoff-summary-strip small {
  display: block;
  color: #607686;
  font-size: 12px;
  font-weight: 900;
}

.writeoff-summary-strip strong {
  display: block;
  margin-top: 4px;
  color: #183246;
  font-size: 18px;
}

.writeoff-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.writeoff-mode-tabs {
  padding-bottom: 6px;
}

.writeoff-tab-body {
  display: grid;
  gap: 12px;
}

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

.writeoff-method-card h3,
.writeoff-method-card p {
  grid-column: 1 / -1;
  margin: 0;
}

.writeoff-method-card p {
  color: #607686;
  font-weight: 800;
  line-height: 1.45;
}

.writeoff-method-card .wide,
.writeoff-method-card button {
  grid-column: span 2;
}

.writeoff-target-grid {
  margin-top: 12px;
}

.writeoff-tab-list {
  margin: 0;
}

.writeoff-statement-list {
  display: grid;
  gap: 8px;
}

.writeoff-statement-item {
  background: #f9fcfd;
  border: 1px solid #d6e5ec;
  border-radius: 8px;
  overflow: hidden;
}

.writeoff-statement-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  color: #183246;
  cursor: pointer;
}

.writeoff-statement-item summary strong {
  font-size: 14px;
}

.writeoff-statement-item summary span {
  color: #607686;
  font-size: 12px;
  font-weight: 900;
}

.writeoff-statement-item summary b {
  color: #147095;
}

.writeoff-statement-item .admin-table-wrap {
  margin: 0 12px 12px;
}

.payable-plan-workbench {
  display: grid;
  gap: 12px;
}

.payable-plan-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.payable-plan-tools label {
  min-width: 220px;
}

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

.payable-week-grid a {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  min-height: 84px;
  padding: 12px;
  color: #183246;
  text-decoration: none;
  background: #f9fcfd;
  border: 1px solid #d6e5ec;
  border-radius: 8px;
}

.payable-week-grid a i {
  grid-row: 1 / 3;
  width: 7px;
  height: 46px;
  background: #147095;
  border-radius: 999px;
}

.payable-week-grid a strong {
  display: block;
  font-size: 14px;
}

.payable-week-grid a small {
  display: block;
  margin-top: 3px;
  color: #607686;
  font-size: 12px;
  font-weight: 800;
}

.payable-week-grid a b {
  min-width: 28px;
  padding: 4px 8px;
  text-align: center;
  background: #e7f2f8;
  border-radius: 999px;
}

.payable-week-grid a em {
  grid-column: 2 / 4;
  color: #147095;
  font-style: normal;
  font-weight: 900;
}

.payable-week-grid a.active {
  border-color: #147095;
  background: #eaf6fb;
  box-shadow: inset 0 0 0 1px #147095;
}

.payable-group-title {
  margin-top: 4px;
}

.payable-detail-page {
  display: grid;
  gap: 12px;
}

.payable-supplier-card,
.payable-detail-list,
.payable-supplier-plan {
  margin: 0;
}

.payable-supplier-card {
  padding-top: 14px;
  padding-bottom: 14px;
}

.payable-supplier-card .panel-title {
  margin-bottom: 8px;
}

.payable-supplier-card .panel-title h3 {
  font-size: 18px;
}

.payable-supplier-card .panel-title p {
  font-size: 13px;
  line-height: 1.3;
}

.payable-week-grid.compact a {
  min-height: 72px;
  padding: 10px;
}

.payable-week-grid.compact a i {
  height: 38px;
}

.payable-supplier-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payable-info-pill {
  min-height: 48px;
  padding: 8px 10px;
  background: #f7fbfd;
  border: 1px solid #dbe7ec;
  border-radius: 8px;
}

.payable-info-pill span {
  display: block;
  color: #607686;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.payable-info-pill strong {
  display: block;
  margin-top: 4px;
  color: #183246;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.payable-reconcile-detail {
  display: grid;
  gap: 12px;
}

.payable-compare-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.file-upload-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  color: #183246;
  font-weight: 900;
  background: #f5f8f9;
  border: 1px dashed #9fc3d1;
  border-radius: 8px;
}

.file-upload-box input {
  margin-top: 4px;
}

.payable-compare-table tr.compare-diff td {
  background: #ffe4e6;
  color: #7f1d1d;
}

.payable-compare-table tr.compare-ok td {
  background: #ecfdf5;
}

@media (max-width: 900px) {
  .writeoff-summary-strip,
  .writeoff-list-summary,
  .writeoff-method-grid,
  .writeoff-method-card,
  .dispatch-service-tabs,
  .dispatch-stat-grid,
  .dispatch-assign-layout,
  .dispatch-assign-form-grid,
  .dispatch-read-grid,
  .supplier-quote-detail-grid,
  .payable-week-grid,
  .payable-compare-layout,
  .payable-supplier-info-grid {
    grid-template-columns: 1fr;
  }

  .writeoff-method-card .wide,
  .writeoff-method-card button {
    grid-column: 1;
  }

  .supplier-request-primary-meta,
  .supplier-request-timing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-request-primary-meta div:nth-child(2),
  .supplier-request-timing-grid div:nth-child(2) {
    border-right: 0;
  }
}

.order-status-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.status-editor-panel {
  position: sticky;
  top: 88px;
}

.full-status-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.full-status-list h4 {
  margin: 0;
  color: #183246;
}

.full-status-list div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.full-status-list div.active {
  border-color: #146b8f;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.full-status-list span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
}

.full-status-list b,
.full-status-list small {
  display: block;
}

.full-status-list small {
  color: #627582;
  font-weight: 800;
}

.mail-workbench {
  display: grid;
  gap: 12px;
}

.mail-status-tabs {
  margin: 0;
}

.mail-reply-form {
  display: grid;
  gap: 12px;
}

.mail-reply-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .74fr);
  gap: 12px;
  align-items: start;
}

.mail-original-card,
.mail-compose-card,
.service-suggestion-panel {
  min-width: 0;
}

.mail-compose-card {
  position: sticky;
  top: 88px;
}

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

.mail-message-box {
  margin-top: 12px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.mail-message-box b,
.mail-message-box p {
  margin: 0;
}

.mail-message-box b {
  display: block;
  color: #183246;
  font-size: 17px;
}

.mail-message-box p {
  margin-top: 8px;
  color: #4f6573;
  line-height: 1.65;
}

.mail-compose-card textarea {
  min-height: 260px;
}

.service-suggestion-filters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.service-suggestion-filters label {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.service-suggestion-filters input,
.service-suggestion-filters select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  color: #183246;
}

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

.service-suggestion-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 112px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.service-suggestion-card:has(input:checked) {
  border-color: #146b8f;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.service-suggestion-card input {
  margin-top: 4px;
}

.service-suggestion-card span,
.service-suggestion-card strong,
.service-suggestion-card small,
.service-suggestion-card em {
  min-width: 0;
  display: block;
}

.service-suggestion-card strong {
  color: #183246;
  font-size: 15px;
}

.service-suggestion-card small,
.service-suggestion-card em {
  margin-top: 4px;
  color: #627582;
  font-style: normal;
  font-weight: 800;
}

.service-suggestion-card a {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  color: #146b8f;
  font-weight: 900;
}

.milestone-list {
  display: grid;
  gap: 8px;
}

.milestone-list div {
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.milestone-list b,
.milestone-list span {
  display: block;
}

.milestone-list b {
  color: #183246;
}

.milestone-list span {
  margin-top: 3px;
  color: #627582;
  font-size: 12px;
  font-weight: 800;
}

.chart-bars {
  display: grid;
  gap: 10px;
}

.chart-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.chart-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-row div {
  height: 11px;
  background: #eef3f5;
  border-radius: 999px;
  overflow: hidden;
}

.chart-row i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #146b8f, #18b981);
  border-radius: inherit;
}

.chart-row b {
  text-align: right;
}

.color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: -1px;
}

.security-notes {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  background: #f5f8f9;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.security-notes p {
  margin: 0;
  color: #627582;
}

.notification-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: #f2c46d;
  background: #fff8e8;
}

.notification-warning b {
  color: #9a5b00;
}

.notification-warning span {
  flex: 1;
  color: #6f5a25;
  font-weight: 800;
}

.notification-config-panel {
  display: grid;
  gap: 14px;
}

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

.notification-channel-tabs a {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  text-align: left;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  color: #183246;
  text-decoration: none;
}

.notification-channel-tabs a.active {
  border-color: #146b8f;
  background: #edf8fb;
  box-shadow: inset 0 0 0 1px #146b8f;
}

.notification-channel-tabs b {
  font-size: 16px;
}

.notification-channel-tabs span,
.notification-settings-form .panel-title p,
.notification-help,
.notification-template-examples span {
  margin: 0;
  color: #627582;
  font-size: 13px;
  font-weight: 800;
}

.notification-settings-form {
  gap: 14px;
}

.notification-status-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #dbe9ef;
  background: #f8fbfd;
}

.notification-status-card.ready {
  border-color: #a7dfc8;
  background: #effbf6;
}

.notification-status-card.warning {
  border-color: #f2c46d;
  background: #fff8e8;
}

.notification-status-card b {
  color: #183246;
}

.notification-status-card span {
  color: #627582;
  font-weight: 800;
}

.notification-config-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.notification-config-section h3 {
  margin: 0;
  color: #183246;
}

.notification-config-section textarea {
  min-height: 112px;
  resize: vertical;
}

.notification-secret-field {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.notification-secret-field .secret-visible-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 8px;
  color: #4f6573;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.notification-secret-field .secret-visible-toggle input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: #146b8f;
}

.notification-template-examples .admin-panel {
  display: grid;
  gap: 6px;
}

.current-login-card,
.permission-user-summary,
.permission-mode-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
}

.current-login-card b,
.permission-user-summary b,
.permission-mode-note b {
  color: #183246;
}

.current-login-card span,
.current-login-card small,
.permission-user-summary span,
.permission-user-summary small,
.permission-mode-note span {
  color: #627582;
  font-weight: 800;
}

.permission-config-panel {
  display: grid;
  gap: 12px;
}

.permission-user-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.permission-user-row label {
  display: grid;
  gap: 5px;
  color: #4f6573;
  font-size: 12px;
  font-weight: 900;
}

.permission-user-row select {
  min-height: 40px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #cddce3;
  border-radius: 8px;
  color: #183246;
}

.permission-form {
  display: grid;
  gap: 12px;
}

.permission-section {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid #e0e9ed;
  border-radius: 8px;
}

.permission-section h4 {
  margin: 0;
  color: #183246;
  font-size: 15px;
}

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

.permission-check-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  color: #183246;
  font-size: 13px;
  font-weight: 800;
}

.permission-check-grid input {
  flex: 0 0 auto;
}

.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14, 36, 52, .34);
}

.admin-modal {
  width: min(1040px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid #dbe9ef;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 42, 58, .18);
}

.admin-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e0e9ed;
  padding-bottom: 12px;
}

.admin-modal-head h3 {
  margin: 0;
  color: #0c2237;
  font-size: 24px;
}

.admin-modal-head p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 800;
}

.admin-modal-head button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

.user-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-form-grid.compact {
  gap: 9px;
}

.inline-checkbox {
  min-height: 38px;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  padding: 8px 10px;
  border: 1px solid #d7e5ef;
  border-radius: 8px;
  background: #fff;
}

.inline-checkbox input {
  width: auto;
  min-height: auto;
}

.address-line-control {
  position: relative;
}

.address-line-control small {
  color: #718694;
  font-weight: 800;
}

.address-line-control button {
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
}

.link-button {
  justify-self: start;
  min-height: 32px;
  padding: 0 0;
  border: 0;
  background: transparent;
  color: #0d79b7;
  font-weight: 900;
}

.user-permission-panel {
  display: grid;
  gap: 10px;
}

.user-permission-panel > h4,
.customer-detail-section > h4 {
  margin: 0;
  color: #183246;
  font-size: 17px;
}

.user-permission-panel > p {
  margin: 0;
  color: #627582;
  font-weight: 800;
}

.reset-password-modal {
  width: min(440px, calc(100vw - 44px));
}

.reset-password-box {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid #dbe9ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.reset-password-box span {
  color: #627582;
  font-weight: 900;
}

.reset-password-box b {
  color: #0c2237;
  font-size: 24px;
  letter-spacing: 0;
  word-break: break-all;
}

@media (max-width: 980px) {
  .user-editor-layout {
    grid-template-columns: 1fr;
  }
}

.admin-login-error {
  max-width: 560px;
  margin: 12vh auto;
  padding: 28px;
  background: #fff;
  border: 1px solid #dbe5e9;
  border-radius: 8px;
}

.oms-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 84px;
  padding: 0 4.8vw;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(8, 43, 70, .05);
}
.oms-brand-area { min-width: 0; }
.oms-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue);
  font-weight: 900;
}
.oms-brand img {
  width: 132px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
}
.oms-mainnav, .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oms-mainnav { justify-content: center; }
.nav-cluster { position: relative; }
.nav-button {
  min-height: 44px;
  padding: 0 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-weight: 900;
}
.nav-button.active { color: var(--blue); border-color: var(--green); }
.nav-button .menu-caret,
.account-caret,
.button-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 180;
  display: none;
  min-width: 230px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.nav-menu::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 13px;
}
.nav-cluster:hover .nav-menu { display: grid; }
.nav-cluster.open .nav-menu { display: grid; }
.nav-cluster:focus-within .nav-menu { display: grid; }
.nav-menu button {
  min-height: 42px;
  padding: 0 12px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
}
.nav-menu button:hover { background: var(--soft); color: var(--blue); }
.top-actions { justify-content: flex-end; }
.cart-menu-wrap {
  position: relative;
}
.cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 46px;
  color: var(--ink);
  background: #eef3f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(8, 43, 70, .06);
}
.cart-trigger:hover,
.cart-menu-wrap.open .cart-trigger {
  color: var(--blue);
  border-color: #1388c8;
  box-shadow: 0 0 0 3px rgba(19, 136, 200, .15);
}
.cart-icon {
  display: inline-flex;
  width: 25px;
  height: 25px;
}
.cart-icon svg {
  width: 100%;
  height: 100%;
}
.cart-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.cart-badge-main {
  top: 2px;
  right: 17px;
  background: #f59e0b;
}
.cart-badge-alert {
  top: 12px;
  right: 2px;
  background: #147ee8;
}
.cart-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 95;
  display: none;
  width: min(430px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 120px));
  overflow: auto;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.cart-menu-wrap.open .cart-dropdown {
  display: grid;
  gap: 12px;
}
.cart-dropdown-head,
.cart-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cart-dropdown-head b {
  color: var(--ink);
  font-size: 20px;
}
.cart-dropdown-head small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}
.cart-stat-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cart-stat-row span {
  padding: 6px 9px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.cart-section-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.cart-dropdown-list {
  display: grid;
  gap: 8px;
}
.cart-dropdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cart-dropdown-row b,
.cart-dropdown-row small,
.cart-dropdown-row em {
  display: block;
}
.cart-dropdown-row b {
  color: var(--ink);
}
.cart-dropdown-row b span {
  margin-left: 6px;
  color: var(--green);
  font-size: 12px;
}
.cart-dropdown-row small,
.cart-dropdown-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.cart-row-actions {
  display: grid;
  gap: 6px;
  align-content: center;
}
.cart-empty {
  padding: 14px;
  color: var(--muted);
  background: #f8fbfd;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.user-pill {
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 900;
}
.account-menu-wrap {
  position: relative;
}
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 5px 10px 5px 6px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(8, 43, 70, .06);
}
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}
.account-avatar.large {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 16px;
}
.account-trigger-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.account-trigger-text b,
.account-card-head b {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-trigger-text small,
.account-card-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.account-caret {
  flex: 0 0 auto;
  color: var(--muted);
}
.account-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 90;
  display: none;
  width: 320px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.account-menu-wrap.open .account-dropdown { display: grid; gap: 6px; }
.account-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.account-card-head div {
  display: grid;
  min-width: 0;
}
.account-dropdown button {
  min-height: 40px;
  padding: 0 10px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 900;
}
.account-dropdown button:hover { color: var(--blue); background: var(--soft); }
.account-menu-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 900;
}
.compact-lang button { min-height: 28px; padding: 0 10px; font-size: 12px; }
.lang-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #edf5fa;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang-switch button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}
.lang-switch button.active { color: #fff; background: var(--blue); }
.primary, .secondary, .outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 900;
  border: 1px solid transparent;
  font-size: 14px;
}
.primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.secondary { color: var(--blue); background: #eaf5fb; border-color: var(--line); }
.outline { color: var(--blue); background: #fff; border-color: var(--line); }
.small { min-height: 36px; padding: 0 12px; }
.ai-action {
  gap: 7px;
  background: #eaf8fb;
  border-color: #bfe3ef;
}
.ai-action::before {
  content: "AI";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.ai-action.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(8, 125, 166, .18);
}
.ai-action.active::before {
  color: var(--blue);
  background: #fff;
}
.ai-assistant-panel {
  position: fixed;
  top: 98px;
  right: 18px;
  bottom: 18px;
  z-index: 230;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(390px, calc(100vw - 28px));
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfe1ee;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(8, 43, 70, .22);
}
.ai-assistant-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #f6fbfd;
}
.ai-assistant-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  border-radius: 999px;
  font-weight: 900;
}
.ai-assistant-head b,
.ai-assistant-head small {
  display: block;
  min-width: 0;
}
.ai-assistant-head b {
  color: var(--ink);
  font-size: 16px;
}
.ai-assistant-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.ai-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}
.ai-icon-btn:hover {
  background: #eaf5fb;
}
.ai-assistant-messages {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f8fb 100%);
}
.ai-assistant-panel .ai-message {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  max-width: 90%;
}
.ai-assistant-panel .ai-message span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.ai-assistant-panel .ai-message p {
  margin: 0;
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: 0 8px 18px rgba(8, 43, 70, .05);
}
.ai-assistant-panel .ai-message.user {
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
  justify-items: end;
}
.ai-assistant-panel .ai-message.user span {
  text-align: right;
}
.ai-assistant-panel .ai-message.user p {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.ai-assistant-prompts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px 0;
  background: #fff;
}
.ai-assistant-prompts button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue);
  background: #edf8fb;
  border: 1px solid #cfe7ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.ai-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px 14px 14px;
  background: #fff;
}
.ai-assistant-form textarea {
  min-width: 0;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}
.ai-assistant-form textarea:focus {
  outline: 3px solid rgba(8, 125, 166, .14);
  border-color: var(--blue);
}
.ai-assistant-rail {
  position: fixed;
  top: 156px;
  right: 0;
  z-index: 230;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 56px;
  min-height: 140px;
  padding: 10px 8px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  border: 0;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 18px 42px rgba(8, 43, 70, .22);
}
.ai-assistant-rail span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--blue);
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.ai-assistant-rail b {
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.oms-shell {
  width: min(1280px, 93vw);
  margin: 0 auto;
  padding: 34px 0 70px;
}
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  margin-bottom: 22px;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; }
h2 { margin-bottom: 12px; font-size: 26px; }
h3 { margin-bottom: 8px; font-size: 19px; }
p { color: var(--muted); line-height: 1.65; }
.head-actions, .form-actions, .booking-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.panel, .metric-card, .task-strip, .login-visual {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel { padding: 24px; }
.compact { padding: 20px; }
.content-editor-grid {
  align-items: start;
}
.news-admin-list {
  display: grid;
  gap: 12px;
}
.news-admin-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.news-admin-card img {
  width: 120px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
}
.news-admin-card h4 {
  margin: 6px 0;
  color: var(--ink);
  font-size: 16px;
}
.news-admin-card p {
  margin: 0 0 6px;
  font-size: 13px;
}
.news-admin-card small {
  color: var(--muted);
  font-weight: 800;
}
.card-kicker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.card-kicker span {
  padding: 4px 8px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.settings-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.settings-side {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 6px;
  padding: 16px;
}
.settings-user-mini {
  display: grid;
  justify-items: start;
  gap: 5px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.settings-user-mini b {
  margin-top: 6px;
  font-size: 18px;
}
.settings-user-mini small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
}
.settings-side button {
  min-height: 42px;
  padding: 0 12px;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-weight: 900;
}
.settings-side button.active,
.settings-side button:hover {
  color: var(--blue);
  background: #eaf5fb;
}
.settings-content {
  display: grid;
  gap: 18px;
}
.account-panel {
  display: grid;
  gap: 16px;
}
.settings-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.settings-section-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.settings-section-head span {
  display: grid;
  gap: 2px;
}
.settings-section-head b {
  font-size: 20px;
}
.settings-section-head small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.settings-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.settings-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-chip-row span {
  padding: 8px 10px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
}
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-card-grid .ui-icon {
  margin-bottom: 12px;
}
.settings-table-list {
  display: grid;
  gap: 10px;
}
.settings-table-list article,
.payment-card-row article,
.setting-toggle,
.account-preference-row {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.settings-table-list article b,
.payment-card-row article b {
  color: var(--ink);
}
.settings-table-list article span,
.payment-card-row article span,
.settings-table-list article small,
.payment-card-row article small {
  color: var(--muted);
  font-weight: 800;
}
.account-address-list {
  gap: 12px;
}
.account-address-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.account-address-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.account-address-actions .danger {
  color: #b42318;
}
.account-address-actions.edit-actions {
  margin-top: 12px;
}
.company-user-card {
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.7fr) auto;
  align-items: center;
}
.company-user-card small {
  justify-self: end;
  padding: 6px 10px;
  color: #087f5b;
  background: #e7f8ef;
  border-radius: 999px;
}
.account-address-card.editing {
  display: block;
  background: #fff;
}
.account-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.account-address-grid label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 900;
}
.account-address-grid label.wide {
  grid-column: 1 / -1;
}
.account-address-grid input,
.account-address-grid select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ink);
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
}
@media (max-width: 720px) {
  .settings-section-head,
  .account-address-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .settings-head-actions,
  .account-address-card .ghost-link,
  .account-address-actions {
    width: 100%;
  }
  .account-address-actions {
    justify-content: flex-start;
  }
  .settings-head-actions button {
    flex: 1 1 140px;
  }
  .account-address-grid {
    grid-template-columns: 1fr;
  }
  .cart-dropdown {
    right: -72px;
  }
  .cart-dropdown-row {
    grid-template-columns: 1fr;
  }
  .cart-row-actions,
  .cart-footer-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.payment-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.setting-toggle,
.account-preference-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.setting-toggle input {
  width: 18px;
  height: 18px;
}
.setting-toggle span,
.account-preference-row span {
  color: var(--ink);
  font-weight: 900;
}
.setting-toggle small {
  color: var(--muted);
  font-weight: 800;
}
.news-admin-actions {
  display: grid;
  gap: 8px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.metric-card { padding: 20px; }
.metric-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
}
.ui-icon, .task-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ui-icon svg, .task-icon svg {
  width: 19px;
  height: 19px;
}
.metric-card .ui-icon, .task-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border: 0;
  box-shadow: 0 10px 22px rgba(0, 90, 150, .18);
}
.metric-card span { color: var(--muted); font-weight: 900; }
.metric-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 34px;
}
.task-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 22px;
}
.task-strip button, .status-grid button {
  min-height: 82px;
  padding: 14px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
}
.task-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}
.task-strip b, .status-grid b {
  display: block;
  color: var(--blue);
  font-size: 28px;
}
.task-strip span, .status-grid span { color: var(--muted); font-weight: 900; }
.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-title h3 { margin: 0; }
.panel-title .ui-icon {
  color: #087354;
  background: #e7fbf4;
  border: 0;
}
.dashboard-grid, .work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.work-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: start; }
.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 18px;
  align-items: start;
}
.home-main {
  display: grid;
  gap: 18px;
}
.home-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .08), rgba(24, 185, 129, .08)),
    #fff;
}
.home-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dashboard-page-head {
  align-items: center;
  margin-bottom: 16px;
  padding-block: 4px 2px;
}
.dashboard-page-head h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}
.dashboard-page-head .eyebrow {
  margin-bottom: 4px;
}
.dashboard-page-head p {
  margin: 0;
  max-width: 760px;
  line-height: 1.45;
}
.alerts-drawer {
  margin: -8px 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(8, 43, 70, .07);
  overflow: hidden;
}
.alerts-drawer summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
}
.alerts-drawer summary::-webkit-details-marker { display: none; }
.alerts-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-weight: 900;
}
.alerts-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.alerts-counts em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  font-style: normal;
  font-weight: 900;
}
.alerts-toggle {
  color: var(--muted);
  font-weight: 900;
}
.alerts-toggle::after {
  content: "v";
  margin-left: 6px;
}
.alerts-drawer[open] .alerts-toggle::after { content: "^"; }
.alerts-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
}
.alert-tabs, .reminder-tabs, .tracking-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.alert-tabs button, .reminder-tabs button, .tracking-tabs button {
  min-height: 36px;
  padding: 0 12px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.alert-tabs button.active, .reminder-tabs button.active, .tracking-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: transparent;
}
.alert-list {
  display: grid;
  gap: 8px;
}
.alert-list article {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.alert-list b { color: var(--blue); }
.alert-list span {
  color: var(--muted);
  font-weight: 800;
}
.update-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.dashboard-update .panel-title {
  justify-content: space-between;
  margin-bottom: 10px;
}
.update-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.update-list button {
  display: grid;
  grid-template-columns: 34px 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}
.update-list button:last-child { border-right: 0; }
.update-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 8px;
}
.update-mini-icon svg {
  width: 18px;
  height: 18px;
}
.update-list b {
  color: var(--blue);
  font-size: 24px;
}
.update-list span {
  color: var(--muted);
  font-weight: 900;
}
.home-side {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 18px;
}
.side-widget {
  display: grid;
  gap: 14px;
}
.side-widget .full { width: 100%; }
.pickup-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pickup-summary button {
  display: grid;
  gap: 4px;
  min-height: 98px;
  padding: 16px;
  background: #f8fbfd;
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
}
.pickup-summary button:last-child { border-right: 0; }
.pickup-summary b {
  color: var(--blue);
  font-size: 34px;
}
.pickup-summary span {
  color: var(--muted);
  font-weight: 900;
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.form-stack { display: grid; gap: 16px; }
label { display: grid; gap: 6px; color: var(--ink); font-size: 14px; font-weight: 800; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  font-size: 14px;
  font-weight: 700;
}
.password-field {
  position: relative;
  display: block;
}
.password-field input {
  padding-right: 50px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 36px;
  min-height: 34px;
  padding: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5d7288;
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.password-toggle:hover,
.password-toggle.is-visible {
  color: var(--blue);
  background: #eaf4fb;
}
.password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
textarea { resize: vertical; }
fieldset {
  margin: 0;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
legend {
  padding: 0 8px;
  color: var(--blue);
  font-weight: 900;
}
.address-card legend {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quote-address-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fff;
}
.quote-address-card[data-dedicated-location-lock="true"] input[data-location-locked="true"],
.quote-address-card[data-dedicated-location-lock="true"] select[data-dedicated-country-lock="true"] {
  color: var(--text);
  cursor: not-allowed;
  background: #eef5fb;
}
.quote-address-card[data-dedicated-location-lock="true"] select[data-dedicated-country-lock="true"] {
  pointer-events: none;
}
.address-entry-grid {
  display: grid;
  grid-template-columns: minmax(110px, .9fr) minmax(150px, 1.1fr);
  gap: 9px;
  align-items: end;
}
.address-entry-grid label {
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
}
.address-entry-grid input,
.address-entry-grid select {
  min-height: 38px;
  padding: 7px 8px;
  font-size: 13.5px;
}
.address-type-select {
  max-width: 100%;
}
.address-type-select select {
  min-height: 40px;
  font-size: 13.5px;
}
.ftl-location-type {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 900;
}
.ftl-location-type b {
  color: var(--muted);
  font-weight: 900;
}
.ftl-location-type span {
  color: var(--text);
}
.drayage-lane-grid {
  align-items: stretch;
}
.drayage-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.drayage-card legend {
  padding: 0 8px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}
.drayage-select-row,
.drayage-meta-grid,
.drayage-container-grid {
  display: grid;
  gap: 10px;
  align-items: end;
}
.drayage-select-row {
  grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
}
.drayage-meta-grid,
.drayage-container-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.drayage-card label {
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
}
.drayage-card input,
.drayage-card select {
  min-height: 40px;
  padding: 8px 9px;
  font-size: 13.5px;
}
.drayage-readonly-field {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 9px;
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.drayage-port-results,
.drayage-warehouse-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 168px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.drayage-port-results button,
.drayage-warehouse-results button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.drayage-port-results button:hover,
.drayage-warehouse-results button:hover {
  border-color: rgba(0, 98, 164, .45);
  background: #edf7fc;
}
.drayage-port-results b,
.drayage-warehouse-results b {
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}
.drayage-port-results span,
.drayage-port-results small,
.drayage-warehouse-results span,
.drayage-warehouse-results small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drayage-port-results small,
.drayage-warehouse-results small {
  grid-column: 1 / -1;
  color: var(--green);
}
.address-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 2px;
}
.address-check-row .checkline {
  min-height: 26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.address-book-trigger {
  min-height: 30px;
  padding: 0 10px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}
.address-book-modal {
  display: grid;
  gap: 10px;
  font-size: 13.5px;
}
.address-book-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px;
  width: max-content;
  padding: 5px;
  background: #edf5fa;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.address-book-tabs label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.address-book-tabs label:has(input:checked) { color: #fff; background: var(--blue); }
.address-book-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.address-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.address-search input { min-height: 38px; }
.address-letters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.address-letters button {
  min-width: 28px;
  min-height: 28px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
}
.address-book-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.address-book-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.address-book-table th, .address-book-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.address-book-table th {
  color: var(--muted);
  background: #f8fbfd;
  font-size: 12px;
  text-transform: uppercase;
}
.address-book-table td span, .address-book-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.address-book-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.address-book-pager label {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  gap: 8px;
}
.address-book-pager select {
  min-width: 90px;
}
.two-col, .three-col, .four-col, .inline-fields {
  display: grid;
  gap: 14px;
}
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inline-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-card {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 360px);
  gap: 22px;
  align-items: start;
}
.quote-workspace:not(.dedicated-workspace) > .quote-builder {
  grid-column: 1;
  grid-row: 1;
}
.quote-workspace:not(.dedicated-workspace) > .quote-overview {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}
.quote-workspace.dedicated-workspace {
  grid-template-columns: minmax(0, 1fr);
}
.quote-workspace.is-rate-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.quote-workspace.is-rate-collapsed > .quote-overview {
  display: none;
}
.quote-workspace.is-rate-collapsed .quote-builder > .quote-section:not(.service-section),
.quote-workspace.is-rate-collapsed .quote-builder > .quote-actions {
  display: none;
}
.quote-workspace.is-rate-collapsed .quote-builder {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}
.quote-workspace.is-rate-collapsed .service-section .quote-collapsed-details,
.quote-workspace.is-rate-collapsed .service-section .quote-rates-result {
  max-width: none;
  margin: 18px 0 0;
}
.ship-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}
.ship-workspace.ship-dedicated-workspace {
  grid-template-columns: minmax(0, 1fr);
}
.ship-dedicated-workspace .dedicated-shipment-builder,
.ship-dedicated-workspace .dedicated-lanes-ship-form,
.ship-dedicated-workspace .dedicated-lanes-section {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.quote-builder {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
.quote-builder > .quote-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.quote-section {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.quote-section .section-head { margin-bottom: 14px; }
.section-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 8px;
  font-weight: 900;
}
.service-section {
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .08), rgba(24, 185, 129, .08)),
    #fff;
}
.check-panel label, .checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: var(--muted);
}
input[type="checkbox"] { width: 18px; min-height: 18px; padding: 0; }
.mode-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  padding: 7px;
  background: #edf5fa;
  border-radius: 8px;
}
.mode-picker button {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
  text-align: left;
}
.mode-picker button.active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.mode-picker button strong { font-size: 14px; line-height: 1.15; }
.mode-picker button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.mode-picker button.active small { color: rgba(255, 255, 255, .86); }
.section-note {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.freight-dimensions {
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .05), rgba(24, 185, 129, .06)),
    #fff;
}
.dimension-toolbar {
  display: grid;
  grid-template-columns: 92px minmax(180px, 220px) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 10px;
  background: #f4f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.package-toolbar {
  grid-template-columns: minmax(110px, 140px) minmax(190px, 240px) minmax(340px, 520px);
}
.quantity-select { margin: 0; }
.freight-items-list {
  display: grid;
  gap: 12px;
}
.calculator-link {
  min-height: 42px;
  padding: 0 12px;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
  text-align: left;
}
.unit-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 5px;
  padding: 5px;
  background: #e8f2f8;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.unit-toggle label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--blue);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}
.unit-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.unit-toggle label.active,
.unit-toggle label:has(input:checked) {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 8px 20px rgba(0, 90, 150, .18);
}
.freight-item-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(8, 45, 76, .08);
}
.freight-item-card.is-complete {
  border-color: rgba(24, 185, 129, .55);
  box-shadow: 0 16px 40px rgba(24, 185, 129, .13);
}
.freight-item-card.is-collapsed > :not(.freight-item-head) { display: none; }
.freight-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.freight-item-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
}
.item-badge {
  display: inline-flex;
  padding: 6px 10px;
  color: var(--green);
  background: rgba(24, 185, 129, .12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.item-actions, .freight-actions, .pallet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.freight-compact-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.freight-compact-grid label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.freight-compact-grid .field-title {
  display: block;
  min-height: 16px;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(11px, .9vw, 12.5px);
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.freight-compact-grid .help-field-label {
  display: flex;
  align-items: center;
  min-height: 18px;
}
.field-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: var(--blue);
  background: transparent;
  font: inherit;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}
.field-help-trigger span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--blue);
  font-size: 11px;
  line-height: 1;
}
.field-help-trigger:hover .field-help-mark,
.field-help-trigger:focus-visible .field-help-mark {
  background: var(--cyan);
}
.freight-compact-grid .unit-text {
  display: inline;
}
.freight-compact-grid input,
.freight-compact-grid select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 13px;
}
.commodity-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.commodity-row textarea {
  min-height: 58px;
}
.pallet-actions {
  justify-content: flex-start;
  padding-bottom: 1px;
}
.pallet-actions button {
  min-height: 38px;
  white-space: nowrap;
}
.danger-link {
  color: #b42318;
}
.freight-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.declared-value-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.declared-value-action label {
  margin: 0;
  min-width: 0;
}
.declared-value-action button {
  min-height: 44px;
  white-space: nowrap;
}
.density-help { display: grid; gap: 14px; }
.freight-field-help-modal {
  display: grid;
  gap: 14px;
}
.field-help-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}
.field-help-card h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 18px;
}
.field-help-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
  line-height: 1.7;
}
.class-density-modal {
  display: grid;
  gap: 16px;
}
.density-note-card {
  display: grid;
  gap: 9px;
  padding: 15px 16px;
  color: var(--ink);
  background: #f4f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.density-note-card h3 {
  margin: 0;
  color: var(--blue);
  font-size: 16px;
}
.density-note-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.density-unit-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 0;
  width: min(100%, 520px);
  padding: 4px;
  background: #edf6fb;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.density-unit-switch label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
  border-radius: 999px;
}
.density-unit-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.density-unit-switch label.active,
.density-unit-switch label:has(input:checked) {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 22px rgba(0, 113, 188, .16);
}
.density-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.density-calc-grid label {
  min-width: 0;
}
.density-calc-grid span {
  display: block;
  white-space: nowrap;
}
.density-result-card {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.density-result-card b {
  color: var(--blue);
  font-size: 18px;
}
.density-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.density-disclaimer {
  margin: 0;
  padding: 13px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-card-list, .autofill-list {
  display: grid;
  gap: 10px;
}
.active-quotes-collapsed {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.active-quotes-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 9px 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, #f8fcff 0%, #eef8fb 100%);
  border: 0;
}
.active-quotes-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.active-quotes-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.active-quotes-copy .eyebrow {
  margin: 0;
  font-size: 10px;
  line-height: 1;
}
.active-quotes-copy b {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.15;
}
.active-quotes-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-quotes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  color: var(--blue);
  background: #dff1fb;
  border-radius: 999px;
  font-weight: 900;
}
.active-quotes-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  color: var(--muted);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .18s ease;
}
.active-quotes-collapsed.is-open .active-quotes-chevron {
  transform: rotate(180deg);
}
.active-quotes-panel {
  display: none;
  position: relative;
  z-index: 4;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.active-quotes-collapsed.is-open .active-quotes-panel {
  display: grid;
}
.active-quotes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.secondary.compact {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}
.quote-choice, .autofill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-choice b, .autofill-row b { display: block; color: var(--blue); font-size: 15px; }
.quote-choice small, .autofill-row small { display: block; margin-top: 4px; color: var(--muted); font-weight: 800; }
.autofill-service {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  color: #00558f;
  background: #e9f6ff;
  border: 1px solid #c7e6fb;
  border-radius: 999px;
}
.quote-choice.active, .autofill-row:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 185, 129, .14);
}
.shipment-service-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shipment-service-card div {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-right: 1px solid var(--line);
}
.shipment-service-card div:last-child { border-right: 0; }
.shipment-service-card span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.shipment-service-card b { color: var(--blue); overflow-wrap: anywhere; }
.white-glove-builder {
  border-color: rgba(24, 185, 129, .35);
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .05), rgba(24, 185, 129, .08)),
    #fff;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 118px;
  padding: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(8, 43, 70, .05);
}
.choice-card input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
}
.choice-card b {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
}
.choice-card small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}
.choice-card:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 185, 129, .14), 0 12px 28px rgba(8, 43, 70, .08);
}
.white-glove-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 14px 0;
  background: #fff;
}
.white-glove-quote-builder .white-glove-options-section {
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .05), rgba(24, 185, 129, .07)),
    #fff;
}
.select-all-white-glove {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 36px;
  margin: 8px 0 10px;
  padding: 7px 12px;
  color: var(--blue);
  background: #eef7fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
  font-size: 13px;
}
.white-glove-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.white-glove-option-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  min-height: 82px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(8, 43, 70, .06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.white-glove-option-card:hover {
  border-color: rgba(0, 90, 150, .45);
  transform: translateY(-1px);
}
.white-glove-option-card input {
  width: 16px;
  min-height: 16px;
  margin-top: 2px;
  padding: 0;
}
.white-glove-option-card b {
  display: block;
  color: var(--blue);
  font-size: 14px;
  line-height: 1.25;
}
.white-glove-option-card small {
  display: block;
  margin: 3px 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.white-glove-option-card .ghost-link {
  min-height: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.2;
}
.white-glove-option-card:has(input:checked) {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .96), rgba(0, 176, 214, .9));
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(0, 90, 150, .22);
}
.white-glove-option-card:has(input:checked) b,
.white-glove-option-card:has(input:checked) small,
.white-glove-option-card:has(input:checked) .ghost-link {
  color: #fff;
}
.white-glove-site-grid {
  margin-top: 12px;
}
.white-glove-detail-modal {
  display: grid;
  gap: 14px;
}
.white-glove-detail-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0, 90, 150, .95), rgba(0, 176, 214, .86)),
    #005a96;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
}
.white-glove-detail-visual .icon {
  width: 34px;
  height: 34px;
}
.notice {
  padding: 12px 14px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
}
.tracking-board {
  display: grid;
  gap: 18px;
}
.tracking-status-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tracking-tile {
  display: grid;
  grid-template-rows: 46px 48px;
  gap: 0;
  min-height: 94px;
  padding: 0;
  color: var(--ink);
  background: #d9e8f4;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(8, 45, 76, .08);
}
.tracking-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: linear-gradient(180deg, #fff, #f9fcff);
}
.tracking-tile-head .ui-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 7px 14px rgba(0, 84, 140, .18);
}
.tracking-tile-head .ui-icon svg,
.tracking-tile-head .ui-icon path,
.tracking-tile-head .ui-icon line,
.tracking-tile-head .ui-icon polyline,
.tracking-tile-head .ui-icon circle {
  stroke: currentColor;
}
.tracking-tile-head svg {
  width: 16px;
  height: 16px;
}
.tracking-tile b {
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
}
.tracking-tile > span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  color: #1b3553;
  background: #d8e8f6;
  font-weight: 900;
}
.tracking-today .tracking-tile-head .ui-icon,
.tracking-ready .tracking-tile-head .ui-icon {
  background: #3f72bd;
}
.tracking-transit .tracking-tile-head .ui-icon {
  background: #0079c7;
}
.tracking-exception .tracking-tile-head .ui-icon {
  background: #c0182f;
}
.tracking-cancelled .tracking-tile-head .ui-icon {
  background: #6b7280;
}
.tracking-delivered .tracking-tile-head .ui-icon {
  background: #61b747;
}
.tracking-today b,
.tracking-ready b { color: #3f72bd; }
.tracking-transit b { color: #0079c7; }
.tracking-exception b { color: #c0182f; }
.tracking-cancelled b { color: #6b7280; }
.tracking-delivered b { color: #4b9f38; }
.tracking-today span,
.tracking-ready span { background: #d8e7f6; }
.tracking-transit span { background: #d7edf8; }
.tracking-exception span { background: #f8dde2; }
.tracking-cancelled span { background: #e7ebef; }
.tracking-delivered span { background: #e1f1dc; }
.pickup-today .tracking-tile-head .ui-icon,
.pickup-scheduled .tracking-tile-head .ui-icon {
  background: #3f72bd;
}
.pickup-dispatched .tracking-tile-head .ui-icon {
  background: #0079c7;
}
.pickup-missed .tracking-tile-head .ui-icon {
  background: #f59e0b;
}
.pickup-cancelled .tracking-tile-head .ui-icon {
  background: #6b7280;
}
.pickup-completed .tracking-tile-head .ui-icon {
  background: #61b747;
}
.pickup-today b,
.pickup-scheduled b { color: #3f72bd; }
.pickup-dispatched b { color: #0079c7; }
.pickup-missed b { color: #b45309; }
.pickup-cancelled b { color: #6b7280; }
.pickup-completed b { color: #4b9f38; }
.pickup-today > span,
.pickup-scheduled > span { background: #d8e7f6; }
.pickup-dispatched > span { background: #d7edf8; }
.pickup-missed > span { background: #fff0d1; }
.pickup-cancelled > span { background: #e7ebef; }
.pickup-completed > span { background: #e1f1dc; }
.invoice-all .tracking-tile-head .ui-icon,
.invoice-open .tracking-tile-head .ui-icon {
  background: #3f72bd;
}
.invoice-upcoming .tracking-tile-head .ui-icon {
  background: #f59e0b;
}
.invoice-overdue .tracking-tile-head .ui-icon {
  background: #c0182f;
}
.invoice-dispute .tracking-tile-head .ui-icon {
  background: #7c3aed;
}
.invoice-paid .tracking-tile-head .ui-icon {
  background: #61b747;
}
.invoice-all b,
.invoice-open b { color: #3f72bd; }
.invoice-upcoming b { color: #b45309; }
.invoice-overdue b { color: #c0182f; }
.invoice-dispute b { color: #6d28d9; }
.invoice-paid b { color: #4b9f38; }
.invoice-all > span,
.invoice-open > span { background: #d8e7f6; }
.invoice-upcoming > span { background: #fff0d1; }
.invoice-overdue > span { background: #f8dde2; }
.invoice-dispute > span { background: #ede9fe; }
.invoice-paid > span { background: #e1f1dc; }
.charge-all .tracking-tile-head .ui-icon,
.charge-freight .tracking-tile-head .ui-icon {
  background: #3f72bd;
}
.charge-accessorial .tracking-tile-head .ui-icon {
  background: #f59e0b;
}
.charge-fuel .tracking-tile-head .ui-icon {
  background: #0079c7;
}
.charge-adjustment .tracking-tile-head .ui-icon {
  background: #c0182f;
}
.charge-credit .tracking-tile-head .ui-icon {
  background: #61b747;
}
.charge-all b,
.charge-freight b { color: #3f72bd; }
.charge-accessorial b { color: #b45309; }
.charge-fuel b { color: #0079c7; }
.charge-adjustment b { color: #c0182f; }
.charge-credit b { color: #4b9f38; }
.charge-all > span,
.charge-freight > span { background: #d8e7f6; }
.charge-accessorial > span { background: #fff0d1; }
.charge-fuel > span { background: #d7edf8; }
.charge-adjustment > span { background: #f8dde2; }
.charge-credit > span { background: #e1f1dc; }
.claim-all .tracking-tile-head .ui-icon,
.claim-messages .tracking-tile-head .ui-icon {
  background: #3f72bd;
}
.claim-saved .tracking-tile-head .ui-icon {
  background: #7c3aed;
}
.claim-unsettled .tracking-tile-head .ui-icon {
  background: #f59e0b;
}
.claim-approved .tracking-tile-head .ui-icon {
  background: #0079c7;
}
.claim-terminated .tracking-tile-head .ui-icon {
  background: #6b7280;
}
.claim-settled .tracking-tile-head .ui-icon {
  background: #61b747;
}
.claim-all b,
.claim-messages b { color: #3f72bd; }
.claim-saved b { color: #6d28d9; }
.claim-unsettled b { color: #b45309; }
.claim-approved b { color: #0079c7; }
.claim-terminated b { color: #6b7280; }
.claim-settled b { color: #4b9f38; }
.claim-all > span,
.claim-messages > span { background: #d8e7f6; }
.claim-saved > span { background: #ede9fe; }
.claim-unsettled > span { background: #fff0d1; }
.claim-approved > span { background: #d7edf8; }
.claim-terminated > span { background: #e7ebef; }
.claim-settled > span { background: #e1f1dc; }
.claim-pill-messages { background: #d8e7f6; color: #0b5b96; }
.claim-pill-saved { background: #ede9fe; color: #6d28d9; }
.claim-pill-unsettled { background: #fff0d1; color: #92400e; }
.claim-pill-approved { background: #d7edf8; color: #075985; }
.claim-pill-terminated { background: #e7ebef; color: #4b5563; }
.claim-pill-settled { background: #e1f1dc; color: #287a35; }
.tracking-tile small {
  display: none;
  color: var(--blue);
  font-weight: 900;
}
.tracking-tile:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 185, 129, .14);
}
.invoice-visual-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.invoice-visual-strip > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fcff, #eaf5fb);
  color: var(--blue);
  font-weight: 900;
}
.invoice-visual-strip .ui-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 999px;
}
.invoice-card dl,
.tracking-result-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.invoice-card dt,
.tracking-result-card dt {
  color: var(--muted);
  font-weight: 800;
}
.invoice-card dd,
.tracking-result-card dd {
  margin: 0;
  font-weight: 900;
}
.invoice-pill-overdue {
  background: #f8dde2;
  color: #9f1239;
}
.invoice-pill-paid {
  background: #e1f1dc;
  color: #2f7d20;
}
.invoice-pill-dispute {
  background: #ede9fe;
  color: #5b21b6;
}
.checkline.slim {
  width: fit-content;
  margin-bottom: 14px;
}
.tracking-search {
  display: grid;
  gap: 16px;
}
.tracking-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}
.tracking-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tracking-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.tracking-table th, .tracking-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tracking-table th {
  color: var(--muted);
  background: #f8fbfd;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tracking-table td small, .tracking-table td span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}
.status-pill, .status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: #087354;
  background: #e7fbf4;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.status-pending { color: #9a5b00; background: #fff7db; }
.status-approved { color: #087354; background: #e7fbf4; }
.status-rejected { color: #9f321a; background: #fff0ea; }
.status-cancelled { color: #526a7a; background: #edf2f5; }
.service-pill {
  color: #075985;
  background: #eaf6ff;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}
.tracking-bulk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.freightcom-tracking .panel {
  border-radius: 8px;
}
.tracking-main-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 12px;
}
.tracking-main-head p {
  max-width: 840px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}
.tracking-default-check {
  margin: 0 0 16px;
}
.tracking-tile.active,
.tracking-tile:focus-visible {
  border-color: var(--blue);
  background: #d9e8f4;
  box-shadow: 0 0 0 2px rgba(0, 121, 199, .12);
}
.tracking-status-grid.tile-view {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tracking-filter-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tracking-inline-search {
  display: grid;
  grid-template-columns: 240px minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}
.tracking-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.tracking-filter-grid.is-collapsed {
  display: none;
}
.tracking-filter-grid label,
.tracking-inline-search label {
  position: relative;
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 900;
}
.claim-filter-panel,
.invoice-filter-panel,
.charge-filter-panel,
.report-filter-panel {
  gap: 12px;
  padding: 14px;
  background: #f8fbfd;
}
.claim-filter-panel .tracking-inline-search,
.invoice-filter-panel .tracking-inline-search,
.report-filter-panel .tracking-inline-search {
  grid-template-columns: minmax(210px, .9fr) minmax(250px, 1.1fr) 130px 150px;
  gap: 12px;
}
.charge-filter-panel .tracking-inline-search {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .75fr) 130px 150px;
  gap: 12px;
}
.claim-filter-panel .tracking-filter-grid,
.invoice-filter-panel .tracking-filter-grid,
.charge-filter-panel .tracking-filter-grid,
.report-filter-panel .tracking-filter-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}
.claim-filter-panel .tracking-inline-search label,
.claim-filter-panel .tracking-filter-grid label,
.invoice-filter-panel .tracking-inline-search label,
.invoice-filter-panel .tracking-filter-grid label,
.charge-filter-panel .tracking-inline-search label,
.charge-filter-panel .tracking-filter-grid label,
.report-filter-panel .tracking-inline-search label,
.report-filter-panel .tracking-filter-grid label {
  gap: 5px;
  font-size: 14px;
}
.claim-filter-panel .tracking-inline-search label > span,
.invoice-filter-panel .tracking-inline-search label > span,
.charge-filter-panel .tracking-inline-search label > span,
.report-filter-panel .tracking-inline-search label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.claim-filter-panel .tracking-inline-search input,
.claim-filter-panel .tracking-inline-search .field-button,
.claim-filter-panel .tracking-filter-grid select,
.claim-filter-panel .tracking-filter-grid input,
.invoice-filter-panel .tracking-inline-search input,
.invoice-filter-panel .tracking-inline-search .field-button,
.invoice-filter-panel .tracking-filter-grid select,
.invoice-filter-panel .tracking-filter-grid input,
.charge-filter-panel .tracking-inline-search input,
.charge-filter-panel .tracking-inline-search .field-button,
.charge-filter-panel .tracking-filter-grid select,
.charge-filter-panel .tracking-filter-grid input,
.report-filter-panel .tracking-inline-search input,
.report-filter-panel .tracking-inline-search .field-button,
.report-filter-panel .tracking-filter-grid select,
.report-filter-panel .tracking-filter-grid input {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
}
.claim-filter-panel .tracking-inline-search .primary,
.claim-filter-panel .tracking-inline-search .secondary,
.invoice-filter-panel .tracking-inline-search .primary,
.invoice-filter-panel .tracking-inline-search .secondary,
.charge-filter-panel .tracking-inline-search .primary,
.charge-filter-panel .tracking-inline-search .secondary,
.report-filter-panel .tracking-inline-search .primary,
.report-filter-panel .tracking-inline-search .secondary {
  min-width: 0;
  width: 100%;
  padding-inline: 12px;
}
.claim-filter-panel .help-dot.inline,
.invoice-filter-panel .help-dot.inline,
.charge-filter-panel .help-dot.inline,
.report-filter-panel .help-dot.inline {
  position: static;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.claim-new-search .tracking-inline-search {
  grid-template-columns: minmax(260px, 1.1fr) 220px 150px;
  gap: 12px;
}
.claim-new-search .tracking-filter-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}
.claim-new-search .tracking-filter-grid select,
.claim-new-search .tracking-filter-grid input,
.claim-new-search .tracking-inline-search input,
.claim-new-search .tracking-inline-search .field-button {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
}
.claim-new-search .tracking-filter-grid label,
.claim-new-search .tracking-inline-search label {
  gap: 5px;
  font-size: 14px;
}
.claim-new-search .tracking-inline-search label > span,
.claim-search-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.claim-new-search .help-dot.inline {
  position: static;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  justify-self: start;
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.claim-new-search .tracking-inline-search .primary {
  min-width: 0;
  width: 100%;
  padding-inline: 14px;
}
.claim-new-filter-shell {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.claim-new-actions {
  justify-content: flex-start;
}
.claim-new-actions .split-action > button:first-child {
  min-width: 190px;
}
.claim-new-table td .primary,
.claim-new-table td .secondary {
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}
.claim-doc-visual-grid,
.claim-new-doc-modal,
.claim-new-results-modal .doc-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.claim-doc-visual-grid article,
.claim-selected-modal .doc-action-grid article,
.video-help-card .doc-action-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.claim-doc-visual-grid .ui-icon,
.video-placeholder .ui-icon {
  color: var(--blue);
  background: #e8f3fb;
}
.selected-shipment-card,
.video-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #eef8ff, #f7fffb);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.video-placeholder {
  min-height: 150px;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.video-placeholder .large {
  width: 46px;
  height: 46px;
}
.claim-new-details .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.charge-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.charge-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.charge-mode-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.charge-mode-card b {
  display: block;
  color: var(--blue);
  font-size: 15px;
  line-height: 1.3;
}
.charge-mode-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}
.charge-mode-card.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 185, 129, .14);
}
.report-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.report-template-card {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.report-template-card input {
  width: 18px;
  height: 18px;
  margin-top: 6px;
}
.report-template-card .ui-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: var(--blue);
  border-radius: 8px;
}
.report-template-card b {
  display: block;
  color: var(--blue);
  font-size: 16px;
}
.report-template-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}
.report-template-card.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(24, 185, 129, .14);
}
.field-button {
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  font-weight: 900;
}
.icon-help {
  position: absolute;
  right: 8px;
  top: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
.tracking-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.tracking-tabs button {
  min-width: fit-content;
  min-height: 46px;
  gap: 8px;
  white-space: nowrap;
}
.tracking-tabs button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: #eaf5fb;
  border-radius: 999px;
  color: var(--blue);
}
.tracking-tabs button.active b {
  color: #fff;
  background: rgba(255,255,255,.22);
}
.tracking-reference-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 0;
  padding: 0 0 4px;
  border-bottom: 5px solid #dbe3eb;
  overflow-x: auto;
}
.tracking-reference-tabs button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 74px;
  padding: 8px 10px 12px;
  color: #556579;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.tracking-reference-tabs button.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -5px;
  height: 5px;
  background: #f5a623;
}
.tracking-reference-tabs button.active {
  color: var(--ink);
  background: transparent;
}
.tracking-reference-tabs .tracking-tab-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
}
.tracking-reference-tabs .ui-icon {
  width: 19px;
  height: 19px;
  color: #3c70bd;
}
.tracking-reference-tabs b,
.tracking-reference-tabs button.active b {
  min-width: auto;
  height: auto;
  padding: 0;
  color: inherit;
  background: transparent;
  border-radius: 0;
  font-size: 20px;
  line-height: 1;
}
.tracking-reference-tabs .tracking-tab-label {
  min-height: auto;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
}
.tracking-bulk-under-tabs {
  justify-content: flex-start;
  padding-top: 8px;
}
.tracking-bulk-under-tabs .secondary {
  min-height: 46px;
  border-color: #6d7e97;
  color: #4e5f76;
  background: #fff;
}
.tracking-bulk-under-tabs .split-caret {
  color: #fff;
  background: #3f72bd;
  border-color: #3f72bd;
}
.tracking-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 46px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tracking-empty-visual {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
}
.tracking-empty h3,
.tracking-empty p {
  margin: 0;
}
.tracking-empty p {
  color: var(--muted);
}
.tracking-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tracking-result-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tracking-result-card > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.tracking-result-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
}
.tracking-result-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}
.tracking-result-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.tracking-result-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
}
.split-action {
  display: inline-flex;
  gap: 0;
}
.split-action .secondary:first-child {
  border-radius: 8px 0 0 8px;
}
.split-action .split-caret {
  min-width: 46px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}
.split-action .split-caret .button-caret {
  margin-left: 0;
}
.tracking-advanced-modal {
  display: grid;
  gap: 14px;
}
.tracking-date-modal {
  align-items: stretch;
}
.date-range-summary {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.date-range-summary span {
  color: var(--blue);
  font-weight: 900;
}
.tracking-view-results-modal,
.tracking-dropdown-list {
  display: grid;
  gap: 12px;
}
.tracking-dropdown-list .dropdown-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  padding: 12px;
  color: var(--ink);
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}
.tracking-dropdown-list .dropdown-row small {
  grid-column: 2;
  color: var(--muted);
  font-weight: 800;
}
.tour-steps, .doc-action-grid {
  display: grid;
  gap: 12px;
}
.tour-steps article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 14px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.tour-steps article span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-radius: 8px;
  font-weight: 900;
}
.tour-steps b, .doc-choice b { color: var(--blue); }
.tour-steps p { margin: 0; }
.doc-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.doc-choice small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}
.help-copy ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}
.summary-panel { position: sticky; top: 110px; }
.quote-overview {
  position: sticky;
  top: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.overview-sticky { padding: 24px; }
.overview-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  padding: 16px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 8px;
  font-weight: 900;
}
.overview-route span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overview-route b { color: var(--green); font-size: 22px; }
.overview-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.overview-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.overview-list span { color: var(--muted); font-weight: 900; }
.overview-list b {
  max-width: 56%;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}
.quote-progress {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: quote-step;
}
.quote-progress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: var(--muted);
  font-weight: 900;
  counter-increment: quote-step;
}
.quote-progress li::before {
  content: counter(quote-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  font-size: 12px;
}
.quote-progress li.active { color: var(--blue); }
.quote-progress li.active::before { color: #fff; background: var(--green); }
.ship-booking-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 22px;
  align-items: start;
}
.ship-booking-workspace .shipment-builder {
  min-width: 0;
  max-width: 100%;
}
.ship-booking-workspace:not(:has(.quote-overview)) .shipment-builder {
  max-width: 100%;
}
.ship-booking-workspace .quote-overview {
  flex: 0 0 390px;
  z-index: 1;
}
.shipment-builder {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.shipment-builder > .quote-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.shipment-mode-section {
  position: relative;
  z-index: 2;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch;
}
.shipment-mode-picker {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}
.shipment-mode-picker button {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px;
}
.shipment-mode-picker button strong,
.shipment-mode-picker button small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shipment-address-grid {
  align-items: start;
}
.shipment-address-card {
  display: grid;
  gap: 12px;
}
.shipment-ftl-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.shipment-white-glove-options-section {
  padding-top: 24px;
  padding-bottom: 24px;
}
.shipment-white-glove-options-section .section-head {
  margin-bottom: 12px;
}
.shipment-white-glove-options-section .section-note {
  max-width: 820px;
}
.shipment-select-all-white-glove {
  min-height: 42px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.shipment-white-glove-options {
  margin-top: 0;
}
.shipment-contact-schedule {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shipment-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shipment-contact-grid,
.shipment-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.shipment-accessorial-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.shipment-accessorial-strip .checkline,
.shipment-contact-schedule .checkline.slim {
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
}
.dedicated-notify-row {
  margin-top: 14px;
}
.dedicated-booking-section .notice {
  margin-top: 12px;
}
.white-glove-option-card.compact {
  min-height: 56px;
  padding: 10px 12px;
}
.white-glove-option-card.compact span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.white-glove-option-card.compact .icon {
  width: 30px;
  height: 30px;
}
.shipment-dimension-toolbar {
  grid-template-columns: 160px minmax(220px, .72fr) minmax(330px, 1fr);
}
.shipment-freight-card {
  padding: 16px;
}
.shipment-freight-card .package-line-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.shipment-freight-card .package-line-title > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shipment-inline-package {
  display: grid;
  gap: 14px;
}
.shipment-inline-package > .section-head,
.shipment-inline-package > .section-note {
  display: none;
}
.shipment-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.shipment-doc-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shipment-doc-grid .ui-icon {
  width: 36px;
  height: 36px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border: 0;
  border-radius: 8px;
}
.shipment-doc-grid span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}
.shipment-final-actions {
  justify-content: flex-end;
}
.field-required-label {
  position: relative;
}
.field-required-missing {
  border-color: var(--red) !important;
  background: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(184, 66, 66, .14) !important;
}
.field-required-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-top: 6px;
  padding: 2px 8px;
  color: var(--red);
  background: #fff1f1;
  border: 1px solid rgba(184, 66, 66, .28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.compact-rates .rate-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.shipment-doc-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 18px;
}
.doc-paper {
  min-height: 260px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.doc-bar {
  height: 8px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green));
  border-radius: 999px;
}
.doc-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 14px;
  margin-top: 18px;
}
.doc-grid span {
  color: var(--muted);
  font-weight: 900;
}
.doc-grid b {
  color: var(--ink);
}
.stepper {
  display: grid;
  gap: 10px;
  padding-left: 20px;
}
.stepper li { color: var(--muted); font-weight: 900; }
.stepper li.done { color: var(--green); }
.summary-box {
  margin-top: 18px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.quote-builder > .quote-actions,
.ftl-quote-builder > .quote-actions,
.drayage-quote-builder > .quote-actions,
.package-quote-builder > .quote-actions,
.white-glove-quote-builder > .quote-actions {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: end;
}

.section-head, .package-line-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.section-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.packaging-trigger {
  min-height: 36px;
  padding: 0 14px;
  white-space: nowrap;
}
.package-builder {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#package-lines { display: grid; gap: 12px; }
.package-lines-quote {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.package-line {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.package-line-title div { display: flex; gap: 8px; flex-wrap: wrap; }
.package-line input.field-error {
  border-color: #dc2626;
  background: #fff7f7;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18);
}
.package-validation-message {
  margin: 0;
  padding: 8px 12px;
  color: #991b1b;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-weight: 900;
}
.mini-button {
  min-height: 32px;
  padding: 0 10px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.mini-button.danger { color: var(--red); background: #fff3f3; }
.mini-button:disabled { opacity: .45; cursor: not-allowed; }
.package-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.package-fields .wide { grid-column: span 3; }
.package-type-row,
.package-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.package-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.package-service-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.package-service-card b,
.package-service-card small {
  display: block;
}
.package-service-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.package-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.swap-address-button,
.package-help-modal label {
  margin-top: 12px;
}
.package-template-modal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.package-template-modal article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #f7fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.package-template-modal img {
  display: block;
  width: 130px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #d8e8f1;
  border-radius: 8px;
  background: #fff;
}
.package-template-modal h3 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 18px;
}
.package-template-modal p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.package-type-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.package-type-visual-grid article {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f7fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.package-type-visual-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #d8e8f1;
  border-radius: 8px;
  background: #fff;
}
.package-type-visual-grid h3 {
  margin: 4px 0 0;
  color: var(--blue);
  font-size: 20px;
}
.package-type-visual-grid b {
  color: var(--ink);
}
.package-type-visual-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.ftl-quote-builder .service-section .mode-picker button {
  min-height: 54px;
}
.ftl-address-block {
  display: grid;
  gap: 10px;
}
.ftl-address-block .address-card {
  min-height: 100%;
}
.ftl-inline-option {
  padding: 12px 14px;
  background: #f7fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ftl-load-section {
  background: linear-gradient(135deg, rgba(0, 90, 150, .04), rgba(24, 185, 129, .05)), #fff;
}
.ftl-load-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ftl-load-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 16px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ftl-load-card input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}
.ftl-load-card b {
  display: block;
  color: var(--blue);
  font-size: 17px;
}
.ftl-load-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}
.ftl-load-fields {
  margin: 8px 0 12px;
}
.ftl-insurance-section .insurance-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, auto);
  gap: 12px;
  align-items: end;
}
.ftl-insurance-section .insurance-row .ghost-link {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: max-content;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}
.currency-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(78px, 1fr));
  gap: 5px;
  padding: 5px;
  background: #edf5fa;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.currency-toggle label {
  display: grid;
  min-height: 38px;
  place-items: center;
  margin: 0;
  border-radius: 999px;
  color: var(--blue);
  font-weight: 900;
}
.currency-toggle label:has(input:checked),
.currency-toggle label.active {
  color: #fff;
  background: var(--blue);
}
.currency-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.overview-actions {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.overview-actions .full {
  width: 100%;
  justify-content: space-between;
}
.overview-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.overview-modal-grid article {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.overview-modal-grid article.wide { grid-column: 1 / -1; }
.overview-modal-grid b { color: var(--blue); }
.overview-modal-grid span, .overview-modal-grid small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}
.ftl-help-modal {
  display: grid;
  gap: 14px;
}

.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.filter-bar button {
  min-height: 40px;
  padding: 0 14px;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.filter-bar button.active { color: #fff; background: var(--blue); }
.filter-bar input { max-width: 260px; margin-left: auto; }

.quote-dashboard-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-soft);
}

.quote-dashboard-head,
.quote-results-toolbar,
.quote-dashboard-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.quote-dashboard-head h2 { margin: 4px 0 0; font-size: 26px; }
.quote-dashboard-actions { display: flex; gap: 14px; align-items: center; }

.quote-dashboard-search {
  display: grid;
  grid-template-columns: 285px minmax(320px, 1fr) 210px;
  gap: 18px;
  align-items: end;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.quote-dashboard-search label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.date-range-button,
.select-like-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
}

.quote-search-input {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 8px;
}

.quote-search-input select,
.quote-search-input input {
  min-height: 44px;
}

.quote-dashboard-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.quote-dashboard-tabs label {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
  background: #f7fbff;
}

.quote-dashboard-tabs label.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.quote-dashboard-tabs input { display: none; }

.quote-results-toolbar {
  align-items: flex-start;
  margin-bottom: 14px;
}

.quote-results-toolbar p {
  margin: 0;
  color: var(--muted);
  max-width: 900px;
  line-height: 1.7;
}

.quote-dashboard-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.quote-dashboard-table table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.quote-dashboard-table th {
  background: #eef7fc;
  color: var(--blue);
  font-size: 13px;
  text-align: left;
  padding: 14px 16px;
}

.quote-dashboard-table .quote-select-col {
  width: 92px;
}

.quote-dashboard-table td {
  padding: 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}

.quote-dashboard-table small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.quote-dashboard-table .quote-dashboard-policy,
.customer-rate-policy-inline {
  color: #315f74;
  font-weight: 800;
}

.quote-row-select {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 900;
}

.quote-row-select input { width: 18px; height: 18px; margin-top: 2px; }

.quote-row-actions {
  display: grid;
  gap: 6px;
  min-width: 210px;
}

.quote-row-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.quote-row-actions .small,
.quote-search-input .small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 14px;
}

.quote-row-more {
  width: 100%;
}

.quote-dashboard-pagination {
  padding-top: 14px;
  color: var(--muted);
  font-weight: 800;
}

.quote-dashboard-pagination label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.quote-dashboard-pagination select {
  min-height: 38px;
  min-width: 80px;
}

.quote-dashboard-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
  background: linear-gradient(180deg, #f7fbff, #fff);
}

.quote-dashboard-empty .empty-icon,
.delete-confirm-modal .empty-icon {
  width: 54px;
  height: 54px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  overflow: hidden;
}

.quote-dashboard-empty .empty-icon svg,
.delete-confirm-modal .empty-icon svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.quote-dashboard-empty h3 {
  margin: 10px 0 6px;
  font-size: 22px;
}

.quote-dashboard-empty p {
  max-width: 640px;
  margin: 0 auto 20px;
  color: var(--muted);
  line-height: 1.7;
}

.quote-message-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  font-weight: 800;
  color: var(--muted);
}

.quote-date-modal {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
}

.quote-date-modal aside {
  display: grid;
  gap: 8px;
  align-content: start;
}

.quote-date-modal aside button,
.calendar-head button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--blue);
  font-weight: 900;
}

.quote-date-modal aside button.active {
  color: #fff;
  background: var(--blue);
}

.calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.quote-calendar-month {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.quote-calendar-month h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}

.weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.calendar-days button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: #f1f7fb;
  color: var(--ink);
  font-weight: 800;
}

.calendar-days button.selected {
  color: #fff;
  background: var(--blue);
}

.date-range-preview {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #eef7fc;
  font-weight: 900;
  color: var(--blue);
}

.quote-packaging-filter {
  display: grid;
  gap: 10px;
}

.quote-packaging-filter label {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font-weight: 900;
  color: var(--blue);
  background: #f7fbff;
}

.quote-packaging-filter input { width: 18px; height: 18px; }

.delete-confirm-modal {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.delete-confirm-modal p { margin: 0; color: var(--muted); line-height: 1.7; }

.delete-confirm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.35;
}

.delete-confirm-check input {
  flex: 0 0 auto;
  margin: 0;
}

.delete-confirm-check span {
  display: inline;
  font-size: 15px;
}

.delete-confirm-warning {
  margin: 0;
  color: #b42318;
  font-weight: 800;
}
.table-panel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td {
  padding: 13px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.muted, td span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.status, .badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  color: #087354;
  background: #e7fbf4;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.badge { color: #fff; background: var(--green); }
.rate-workbench { margin-top: 22px; }
.rate-table { display: grid; gap: 10px; }
.rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rate-row.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 90, 150, .12); }
.rate-row strong, .rate-row b { display: block; font-size: 18px; }
.rate-row span { color: var(--muted); font-size: 12px; }
.ghost-link {
  color: var(--blue);
  background: transparent;
  border: 0;
  font-weight: 900;
}
.quote-rates-result {
  max-width: 1160px;
  margin: 24px auto 0;
  background: #fff;
}
.quote-rates-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: #b9d7ef;
  background: #f6fbff;
}
.quote-rates-shelf h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}
.quote-rates-shelf p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.quote-rates-shelf button {
  min-width: 140px;
}
.quote-collapsed-details {
  max-width: 1160px;
  margin: 24px auto 0;
  background: #fff;
}
.quote-collapsed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.quote-collapsed-head h2 {
  margin: 4px 0 0;
}
.quote-collapsed-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 18px 0;
  padding: 18px;
  background: #f6fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
.quote-collapsed-route span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.quote-collapsed-route b {
  color: var(--blue);
}
.quote-collapsed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.quote-collapsed-grid article {
  min-height: 72px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-collapsed-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.quote-collapsed-grid b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.quote-collapsed-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.quote-collapsed-items span {
  padding: 8px 10px;
  color: #244760;
  background: #edf7fb;
  border: 1px solid #cfe3ef;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.quote-rates-head,
.quote-rate-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rate-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: #263847;
  border-radius: 50%;
  font-weight: 900;
}
.rate-hide-link {
  color: #52627a;
  font-size: 15px;
}
.quote-rates-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}
.quote-rate-summary-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.quote-rate-summary-card.active {
  border-color: #2f6ecb;
  box-shadow: inset 0 0 0 1px #2f6ecb;
}
.quote-rate-summary-card b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}
.quote-rate-summary-card a,
.quote-rate-summary-card span {
  color: #2d69b6;
  font-weight: 800;
  text-decoration: underline;
}
.rate-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #fff;
  background: #2f6ecb;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}
.rate-note-center {
  margin: 8px 0 18px;
  color: #2f6ecb;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}
.quote-rate-notice {
  margin: 0 0 18px;
  color: var(--ink);
  line-height: 1.65;
}
.supplier-rate-list {
  display: grid;
  gap: 10px;
}
.supplier-rate-header,
.supplier-rate-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.25fr) minmax(120px, .8fr) minmax(100px, .65fr) minmax(130px, .75fr) minmax(190px, .9fr);
  align-items: center;
  gap: 14px;
}
.supplier-rate-header {
  padding: 0 18px 8px;
  color: #222;
  font-weight: 900;
}
.supplier-rate-header span {
  font-size: 14px;
}
.supplier-rate-row {
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.supplier-rate-row.selected {
  border-color: #2f6ecb;
  box-shadow: inset 0 0 0 1px #2f6ecb;
}

.customer-rate-policy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(150px, .9fr) minmax(150px, .9fr) minmax(240px, 1.7fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.customer-rate-policy > span {
  min-width: 0;
  padding: 8px 10px;
  background: #f3f8fb;
  border-radius: 6px;
}

.customer-rate-policy small,
.customer-rate-policy b {
  display: block;
}

.customer-rate-policy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.customer-rate-policy b {
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.carrier-wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.carrier-wordmark span {
  width: fit-content;
  color: #0b56a0;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
}
.carrier-wordmark small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.rate-price-link {
  color: #2f6ecb;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 18px;
  font-weight: 900;
}
.supplier-rate-actions {
  display: grid;
  gap: 8px;
}
.select-rate-button,
.selected-rate-button,
.insurance-outline {
  min-height: 38px;
  border-radius: 5px;
  font-weight: 900;
}
.select-rate-button {
  color: #47a838;
  background: #fff;
  border: 2px solid #63b84a;
}
.selected-rate-button {
  color: #fff;
  background: #68b843;
  border: 2px solid #68b843;
}
.insurance-outline {
  color: #0b2d55;
  background: #fff;
  border: 2px solid #0b2d55;
}
.quote-rate-footer {
  margin-top: 24px;
}
.quote-rate-pending {
  border-color: #f3bd4d;
}
.pending-quote-copy {
  margin: 18px 0;
  padding: 18px;
  background: #fff7e6;
  border: 1px solid #f1d28a;
  border-radius: 8px;
}
.pending-quote-copy b {
  display: block;
  margin-bottom: 6px;
  color: #7a4a00;
  font-size: 18px;
}
.pending-quote-copy p {
  margin: 0;
  color: #775b2b;
  line-height: 1.65;
}
.manual-contact-panel {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding: 18px;
  background: #f8fbfd;
  border: 1px solid #d5e6f0;
  border-radius: 8px;
}
.manual-contact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.manual-contact-head b,
.manual-contact-head span {
  display: block;
}
.manual-contact-head b {
  color: var(--ink);
  font-size: 18px;
}
.manual-contact-head span {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}
.manual-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.manual-contact-row {
  display: grid;
  grid-template-columns: minmax(135px, .55fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 14px;
}
.manual-contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
}
.manual-contact-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
.manual-contact-row input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
}
.manual-contact-note {
  margin: 0;
}

@media (max-width: 900px) {
  .quote-collapsed-head,
  .quote-rates-head,
  .quote-rate-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-collapsed-route,
  .quote-collapsed-grid {
    grid-template-columns: 1fr;
  }

  .quote-collapsed-route b {
    justify-self: start;
  }

  .quote-rates-summary {
    grid-template-columns: 1fr;
  }

  .supplier-rate-header {
    display: none;
  }

  .supplier-rate-row {
    grid-template-columns: 1fr;
  }

  .customer-rate-policy {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-rate-actions {
    grid-template-columns: 1fr 1fr;
  }

  .manual-contact-head,
  .manual-contact-row {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .manual-contact-grid {
    grid-template-columns: 1fr;
  }

  .quote-rate-footer {
    justify-content: stretch;
  }

  .quote-rate-footer .button {
    flex: 1 1 180px;
  }
}

@media (max-width: 520px) {
  .customer-rate-policy {
    grid-template-columns: 1fr;
  }
}

.booking-actions { justify-content: flex-end; margin-top: 18px; }
.card-grid, .lane-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.dedicated-filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  width: 100%;
  justify-content: stretch;
  align-items: end;
  margin-bottom: 16px;
}
.dedicated-filter-row label {
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.dedicated-filter-row select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
}
.dedicated-filter-row .compact-clear {
  min-height: 42px;
  padding: 0 16px;
  align-self: end;
  margin-top: 0;
}
.dedicated-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dedicated-lane-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}
.dedicated-lane-table th,
.dedicated-lane-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.dedicated-lane-table th {
  color: var(--blue);
  background: #eef7fc;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dedicated-lane-table td {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.dedicated-lane-table tr:last-child td {
  border-bottom: 0;
}
.dedicated-lane-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.dedicated-admin-lane-table td {
  vertical-align: top;
}
.dedicated-table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 128px;
}
.table-load-details {
  position: relative;
}
.table-load-details summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.table-load-details summary::-webkit-details-marker {
  display: none;
}
.table-load-details[open] .dedicated-participant-list {
  position: absolute;
  z-index: 5;
  top: 34px;
  right: 0;
  min-width: 260px;
  max-width: 340px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.table-load-details[open] .dedicated-participant-list article {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.table-load-details[open] .dedicated-participant-list article:last-child {
  border-bottom: 0;
}
.volume-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  white-space: nowrap;
}
.dedicated-admin-list {
  display: grid;
  gap: 12px;
}
.dedicated-admin-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.compact-dedicated-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.dedicated-admin-dashboard article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff 0%, #eef8fc 100%);
  box-shadow: var(--shadow-soft);
}
.compact-dedicated-dashboard article {
  grid-template-columns: 28px auto minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  box-shadow: none;
}
.dedicated-admin-dashboard .ui-icon {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  color: var(--brand);
  background: #e9f8f4;
}
.compact-dedicated-dashboard .ui-icon {
  grid-row: auto;
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.dedicated-admin-dashboard b {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}
.compact-dedicated-dashboard b {
  font-size: 22px;
}
.dedicated-admin-dashboard span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.compact-dedicated-dashboard span {
  font-size: 12px;
  line-height: 1.15;
}
.dedicated-admin-dashboard.compact-dedicated-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dedicated-admin-dashboard.compact-dedicated-dashboard article {
  min-width: 0;
  overflow: hidden;
}

.lane-config-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.lane-config-summary article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lane-config-summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.lane-config-summary b {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.lane-config-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lane-config-table td {
  vertical-align: middle;
}

.lane-config-route-cell,
.lane-config-rate-cell {
  display: grid;
  gap: 3px;
  min-width: 130px;
}

.lane-config-route-cell span {
  color: #0f8f73;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.lane-config-route-cell b,
.lane-config-rate-cell b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.lane-config-route-cell small,
.lane-config-rate-cell small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lane-config-rate-cell strong {
  color: var(--blue);
  font-size: 14px;
  line-height: 1.2;
}

.lane-config-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  margin: 10px 0;
  padding: 10px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lane-config-filter-group {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.lane-config-filter-group:nth-of-type(2) {
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
}

.lane-config-filter-group > span {
  align-self: center;
  color: #0f8f73;
  font-size: 13px;
  font-weight: 900;
}

.lane-config-filter-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.lane-config-filter-toolbar select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

.lane-config-filter-toolbar .lane-config-clear {
  min-height: 38px;
  padding: 0 18px;
  white-space: nowrap;
}

/* Final quote-page layout guard: keep the live overview on the right rail. */
@media (min-width: 641px) {
  .quote-workspace:not(.dedicated-workspace) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 360px) !important;
    gap: 18px !important;
    align-items: start;
    overflow: visible;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    max-width: 100%;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder > .quote-actions {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    overflow: hidden;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 360px;
    min-width: 0;
    justify-self: stretch;
    align-self: start;
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker button,
  .quote-workspace:not(.dedicated-workspace) .calculator-link {
    min-width: 0;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .quote-workspace:not(.dedicated-workspace) {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 12px !important;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    max-width: 260px;
  }

  .quote-workspace:not(.dedicated-workspace) .quote-section {
    padding-inline: 14px;
  }
}

.supplier-quote-overview,
.supplier-quote-directory {
  min-width: 0;
}

.supplier-quote-overview {
  padding: 12px 14px;
}

.supplier-quote-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.supplier-quote-overview-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.supplier-quote-overview-head span {
  color: #6a8294;
  font-size: 12px;
  font-weight: 900;
}

.supplier-quote-overview-head strong {
  color: #10243a;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
}

.supplier-quote-service-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #d8e7ef;
}

.supplier-quote-service-metrics a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-height: 48px;
  padding: 9px 12px 9px 14px;
  color: #183247;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: #fff;
  transition: background .16s ease, color .16s ease;
}

.supplier-quote-service-metrics a.active {
  color: #052d3f;
  background: #eefbfa;
  box-shadow: inset 3px 0 0 #0f9f8f;
}

.supplier-quote-service-metrics a:hover {
  background: #f3fafc;
}

.supplier-quote-service-metrics span,
.supplier-quote-service-metrics small {
  font-weight: 900;
}

.supplier-quote-service-metrics span {
  overflow: hidden;
  color: #183247;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-quote-service-metrics small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 4px 7px;
  color: #557188;
  border-radius: 999px;
  background: #eef5f8;
  font-size: 11px;
  white-space: nowrap;
}

.supplier-quote-service-metrics b {
  color: #0b5f7f;
  font-size: 13px;
  line-height: 1;
}

.supplier-quote-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.supplier-quote-search label {
  display: grid;
  gap: 6px;
  color: #496579;
  font-weight: 900;
}

.supplier-quote-search input,
.supplier-quote-search select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #10243a;
  border: 1px solid #cfe0ea;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.supplier-quote-directory-table {
  overflow: auto;
}

.supplier-quote-directory-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.supplier-quote-directory-table th,
.supplier-quote-directory-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid #e0ecf3;
  vertical-align: top;
}

.supplier-quote-directory-table th {
  color: #496579;
  background: #eef6fa;
  font-weight: 900;
}

.supplier-quote-directory-table td {
  color: #183247;
  font-weight: 800;
}

.supplier-quote-company-link {
  color: #075f82;
  font-weight: 950;
  text-decoration: none;
}

.supplier-quote-company-link:hover {
  text-decoration: underline;
}

.supplier-quote-compare-head {
  align-items: center;
}

.supplier-quote-compare-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.supplier-quote-compare-metrics article {
  padding: 14px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 43, 70, .06);
}

.supplier-quote-compare-metrics span,
.supplier-quote-compare-metrics small {
  color: #5b7488;
  font-weight: 900;
}

.supplier-quote-compare-metrics span {
  font-size: 12px;
}

.supplier-quote-compare-metrics b {
  display: block;
  margin: 6px 0 4px;
  color: #0b5f7f;
  font-size: 22px;
}

.supplier-quote-compare-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.supplier-quote-compare-picker,
.supplier-quote-compare-table-panel {
  min-width: 0;
}

.supplier-quote-compare-cards {
  display: grid;
  gap: 10px;
}

.supplier-quote-compare-cards article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.supplier-quote-compare-cards article.selected {
  border-color: rgba(8, 125, 166, .48);
  background: #edf9fb;
  box-shadow: inset 4px 0 0 #0f9f8f;
}

.supplier-quote-compare-cards b,
.supplier-quote-compare-cards span,
.supplier-quote-compare-cards small {
  display: block;
}

.supplier-quote-compare-cards b {
  color: #10243a;
}

.supplier-quote-compare-cards span,
.supplier-quote-compare-cards small {
  margin-top: 4px;
  color: #5c7488;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.supplier-quote-compare-cards strong {
  color: #0b5f7f;
  white-space: nowrap;
}

.supplier-quote-compare-cards .button-link {
  grid-column: 1 / -1;
  justify-self: start;
}

.ai-assistant-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  align-items: start;
}

.ai-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  min-height: 640px;
}

.ai-chat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e1edf4;
}

.ai-chat-head h3 {
  margin: 4px 0 6px;
  font-size: 22px;
}

.ai-chat-head p {
  margin: 0;
  color: #60778a;
  font-weight: 800;
}

.ai-mode-badge {
  align-self: start;
  padding: 7px 10px;
  color: #075f83;
  border: 1px solid #cde5ef;
  border-radius: 999px;
  background: #f0fbff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-chat-messages {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  padding: 18px 4px;
}

.ai-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ai-message.user {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.ai-message.user .ai-message-avatar {
  grid-column: 2;
  grid-row: 1;
  background: #10243a;
}

.ai-message.user .ai-message-bubble {
  justify-self: end;
  color: #fff;
  background: #075f83;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(7, 95, 131, .18);
}

.ai-message.user .ai-message-bubble p,
.ai-message.user .ai-message-bubble small {
  color: #fff !important;
}

.ai-message-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border-radius: 10px;
  background: #0f9f8f;
  font-size: 12px;
  font-weight: 950;
}

.ai-message-bubble {
  max-width: 820px;
  padding: 12px 14px;
  color: #183247;
  border: 1px solid #d9e8f0;
  border-radius: 12px;
  background: #f8fbfd;
  box-shadow: 0 8px 18px rgba(17, 62, 100, .04);
}

.ai-message-bubble p {
  margin: 0;
  line-height: 1.65;
  font-weight: 800;
}

.ai-message-bubble small {
  display: block;
  margin-top: 8px;
  color: #6a8294;
  font-size: 11px;
  font-weight: 900;
}

.ai-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e1edf4;
}

.ai-chat-form textarea {
  min-height: 74px;
  resize: vertical;
}

.ai-chat-form button {
  min-width: 96px;
}

.ai-side-panel {
  display: grid;
  gap: 14px;
}

.ai-suggestion-list {
  display: grid;
  gap: 8px;
}

.ai-suggestion-list button {
  justify-content: flex-start;
  min-height: 42px;
  padding: 9px 11px;
  color: #183247;
  background: #f8fbfd;
  border: 1px solid #d9e8f0;
  font-weight: 900;
  text-align: left;
}

.ai-side-note {
  padding: 12px;
  border: 1px solid #d9e8f0;
  border-radius: 12px;
  background: #f8fbfd;
}

.ai-side-note b {
  color: #10243a;
}

.ai-side-note p {
  margin: 8px 0 0;
  color: #60778a;
  line-height: 1.55;
  font-weight: 800;
}

.supplier-quote-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.supplier-quote-suppliers,
.supplier-quote-board {
  min-width: 0;
}

.supplier-quote-supplier-list {
  display: grid;
  gap: 8px;
}

.supplier-quote-supplier-list a {
  display: grid;
  gap: 5px;
  padding: 12px;
  color: #183247;
  text-decoration: none;
  border: 1px solid #d8e7ef;
  border-radius: 10px;
  background: #f8fbfd;
}

.supplier-quote-supplier-list a.active {
  color: #052d3f;
  border-color: rgba(8, 125, 166, .4);
  background: #e9f8fb;
  box-shadow: inset 3px 0 0 #0f9f8f;
}

.supplier-quote-supplier-list b {
  font-size: 14px;
}

.supplier-quote-supplier-list span,
.supplier-quote-supplier-list small {
  color: #5c7488;
  font-weight: 800;
}

.supplier-quote-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.supplier-quote-country-tabs a {
  padding: 8px 12px;
  color: #31536a;
  text-decoration: none;
  border: 1px solid #d8e7ef;
  border-radius: 10px;
  background: #f8fbfd;
  font-weight: 900;
}

.supplier-quote-country-tabs a.active {
  color: #fff;
  border-color: transparent;
  background: #087da6;
}

.supplier-quote-service-tabs {
  margin-bottom: 14px;
}

.supplier-quote-structure-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.supplier-quote-structure-grid article {
  padding: 12px;
  border: 1px solid #d8e7ef;
  border-radius: 10px;
  background: #f8fbfd;
}

.supplier-quote-structure-grid span {
  display: block;
  color: #5c7488;
  font-size: 12px;
  font-weight: 900;
}

.supplier-quote-structure-grid b {
  display: block;
  margin-top: 6px;
  color: #0b5f7f;
  font-size: 22px;
}

.supplier-quote-supplier-head {
  align-items: center;
}

.supplier-quote-supplier-head h2 {
  margin-bottom: 5px;
}

.supplier-quote-version-toolbar {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.supplier-quote-version-toolbar .supplier-quote-country-tabs,
.supplier-quote-version-toolbar .supplier-quote-service-tabs {
  margin: 0;
}

.supplier-quote-version-shell {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.supplier-quote-version-list,
.supplier-quote-version-detail {
  min-width: 0;
}

.supplier-quote-version-cards {
  display: grid;
  gap: 10px;
}

.supplier-quote-version-cards a {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: #153047;
  text-decoration: none;
  border: 1px solid #d7e7ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.supplier-quote-version-cards a.active {
  border-color: rgba(8, 125, 166, .55);
  background: #edf9fb;
  box-shadow: inset 4px 0 0 #0f9f8f;
}

.supplier-quote-version-cards span {
  color: #087da6;
  font-size: 12px;
  font-weight: 900;
}

.supplier-quote-version-cards b {
  font-size: 14px;
  line-height: 1.35;
}

.supplier-quote-version-cards small {
  color: #5d7488;
  font-weight: 800;
  line-height: 1.45;
}

.supplier-quote-version-cards em {
  color: #0a5f7f;
  font-style: normal;
  font-weight: 900;
}

.supplier-quote-version-detail .quote-read-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.supplier-quote-editor-page {
  display: grid;
  gap: 16px;
}

.supplier-quote-editor-head {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.supplier-quote-editor-service-tabs {
  margin: 0;
}

.supplier-quote-editor-section {
  padding: 16px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #f8fbfd;
}

.supplier-quote-editor-section h3 {
  margin: 0 0 12px;
  color: #0b2138;
  font-size: 18px;
}

.supplier-quote-editor-section h4 {
  margin: 16px 0 10px;
  color: #365b72;
  font-size: 14px;
}

.supplier-quote-editor-section textarea {
  min-height: 90px;
}

.supplier-quote-source-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.supplier-quote-source-options a {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid #cddfe8;
  border-radius: 10px;
  color: #456577;
  text-decoration: none;
  background: #fff;
}

.supplier-quote-source-options a.active {
  border-color: #0b8eaf;
  color: #086b8d;
  background: #eaf8fc;
  box-shadow: inset 0 0 0 1px #0b8eaf;
}

.supplier-quote-source-options span,
.supplier-api-quote-note,
.supplier-rate-sheet-head p {
  margin: 0;
  color: #627b8b;
  font-size: 12px;
  line-height: 1.5;
}

.supplier-api-quote-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eaf8fc;
}

.supplier-api-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.supplier-api-config-head h3 {
  margin-bottom: 4px;
}

.supplier-api-config-head p {
  margin: 0;
  color: #627b8b;
  font-size: 12px;
}

.supplier-rate-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.supplier-rate-sheet-head h3 {
  margin-bottom: 4px;
}

.supplier-rate-sheet-table table {
  min-width: 1080px;
}

.supplier-rate-sheet-table td:last-child,
.supplier-rate-sheet-table th:last-child {
  width: 72px;
}

.supplier-rate-matrix-table table {
  min-width: 1180px;
}

.supplier-rate-matrix-table td {
  vertical-align: top;
}

.supplier-rate-matrix-table .rate-matrix-origin {
  min-width: 210px;
  border-right: 2px solid #b9d9e6;
  background: #f1f8fb;
}

.rate-matrix-origin input {
  margin-bottom: 8px;
}

.rate-matrix-origin button {
  width: 100%;
  color: #086b8d;
  border-style: dashed;
  background: #fff;
}

.supplier-rate-matrix-table tbody tr:nth-child(even) td:not(.rate-matrix-origin) {
  background: #fbfdfe;
}

.supplier-quote-tier-table {
  overflow-x: auto;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #fff;
}

.supplier-quote-tier-table table {
  width: 100%;
  border-collapse: collapse;
}

.supplier-quote-tier-table th,
.supplier-quote-tier-table td {
  padding: 10px;
  border-bottom: 1px solid #e4eef4;
  text-align: left;
}

.supplier-quote-tier-table th {
  color: #4a6578;
  font-size: 12px;
  font-weight: 900;
  background: #eef6fb;
}

.supplier-quote-tier-table input,
.supplier-quote-tier-table select {
  width: 100%;
  min-width: 110px;
  padding: 9px 10px;
  border: 1px solid #cfe0ea;
  border-radius: 8px;
  font-weight: 800;
}

.supplier-quote-editor-page {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.supplier-quote-editor-page > *,
.supplier-quote-editor-section,
.supplier-quote-editor-section .admin-form-grid {
  min-width: 0;
}

.supplier-quote-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.supplier-quote-editor-head > div:first-child {
  min-width: 0;
}

.supplier-quote-editor-head h2,
.supplier-quote-editor-head p {
  overflow-wrap: anywhere;
}

.supplier-quote-editor-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.supplier-quote-editor-service-tabs {
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.supplier-quote-editor-service-tabs a {
  flex: 0 0 auto;
  min-width: max-content;
  padding-inline: 14px;
  white-space: nowrap;
}

.supplier-quote-editor-page .admin-form-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.supplier-quote-editor-page .admin-form-grid .wide {
  grid-column: 1 / -1;
}

.supplier-quote-source-options {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.supplier-rate-sheet-head {
  flex-wrap: wrap;
}

.supplier-rate-sheet-head > div:first-child {
  min-width: min(100%, 280px);
}

.supplier-rate-sheet-head .rate-matrix-excel-actions {
  margin-left: auto;
}

.supplier-rate-matrix-table,
.supplier-rate-sheet-table,
.supplier-quote-tier-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.supplier-rate-matrix-table input,
.supplier-rate-matrix-table select {
  min-width: 0;
}

@media (max-width: 1280px) {
  .supplier-quote-editor-page .admin-form-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .supplier-quote-editor-section {
    padding: 14px;
  }

  .supplier-rate-matrix-table table {
    min-width: 980px;
  }
}

@media (max-width: 1120px) {
  .supplier-quote-editor-head {
    flex-direction: column;
  }

  .supplier-quote-editor-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .supplier-quote-editor-page .admin-form-grid,
  .supplier-quote-source-options {
    grid-template-columns: 1fr;
  }

  .supplier-rate-sheet-head .rate-matrix-excel-actions {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  .ai-assistant-shell,
  .ai-chat-form,
  .api-workbench-hero,
  .supplier-quote-search,
  .supplier-quote-workbench,
  .supplier-quote-version-shell,
  .supplier-quote-compare-layout,
  .supplier-quote-version-detail .quote-read-grid,
  .supplier-quote-structure-grid {
    grid-template-columns: 1fr;
  }

  .supplier-quote-service-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-quote-source-options {
    grid-template-columns: 1fr;
  }

  .supplier-api-config-head {
    flex-direction: column;
  }

  .supplier-quote-compare-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .api-workbench-tabs,
  .api-integration-grid,
  .api-workbench-stats {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .supplier-quote-service-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Modern admin topbar: CRM-style command bar with one search field and compact actions. */
.admin-topbar {
  min-height: 72px;
  padding: 10px 30px;
  gap: 14px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #dbe8f0;
  box-shadow: 0 8px 22px rgba(20, 54, 76, .05);
}

.admin-topbar .admin-menu-toggle {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 55, 75, .08);
}

.admin-top-search {
  flex: 1 1 auto;
  min-width: 280px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #d9e6ef;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(25, 55, 75, .05);
}

.admin-top-search-icon {
  width: 21px;
  height: 21px;
  display: inline-flex;
  color: #7d8b98;
}

.admin-top-search-icon svg,
.admin-notice-button svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.admin-top-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #14243a;
  font: inherit;
  font-weight: 750;
}

.admin-top-search input::placeholder {
  color: #758596;
  font-weight: 700;
}

.admin-top-actions {
  flex: 0 0 auto;
  margin-left: 0;
  gap: 10px;
}

.admin-top-actions > a.admin-top-quick-link,
.admin-top-actions > button.admin-logout-button,
.admin-notice-button {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #d9e6ef;
  color: #14243a;
  box-shadow: none;
}

.admin-notice-button {
  width: 44px;
  padding: 0;
  position: relative;
  color: #253f5d;
}

.admin-notice-button::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #db3b30;
  border: 2px solid #fff;
}

.admin-lang-switch.admin-lang-pill {
  min-height: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 13px;
  background: #fff;
  border-color: #d9e6ef;
}

.admin-top-actions .admin-lang-switch.admin-lang-pill button {
  min-height: 34px;
  border-radius: 10px;
}

.admin-user-chip.compact {
  min-width: 0;
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px 0 7px;
  background: #fff;
  border-color: #d9e6ef;
  border-radius: 13px;
}

.admin-user-chip.compact b {
  max-width: 110px;
  overflow: hidden;
  color: #14243a;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-chip.compact small {
  display: none;
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: #087da6;
  background: #e7f7f5;
  border-radius: 999px;
  font-weight: 900;
}

.admin-top-actions > a.admin-top-quick-link:hover,
.admin-top-actions > button.admin-logout-button:hover,
.admin-notice-button:hover {
  color: #087da6;
  border-color: #afd6e7;
  background: #f7fbfd;
  box-shadow: 0 10px 22px rgba(8, 125, 166, .08);
}

@media (max-width: 980px) {
  .admin-topbar {
    align-items: stretch;
    flex-direction: column;
    padding: 10px 18px;
  }

  .admin-topbar .admin-menu-toggle {
    align-self: flex-start;
  }

  .admin-top-search {
    width: 100%;
    min-width: 0;
  }

  .admin-top-actions {
    width: 100%;
    flex-flow: row wrap;
  }
}

@media (max-width: 640px) {
  .admin-top-actions > a.admin-top-quick-link {
    display: none;
  }
}

/* Modern admin visual system refresh */
:root {
  --ink: #132033;
  --muted: #60748a;
  --brand: #087da6;
  --brand-2: #10a7c7;
  --accent: #20b894;
  --blue: #087da6;
  --cyan: #10a7c7;
  --green: #20b894;
  --red: #d14f3f;
  --line: #dce8f1;
  --soft: #f1f7fb;
  --bg: #f6f9fc;
  --card: #fff;
  --shadow: 0 18px 44px rgba(28, 62, 91, .1);
  --shadow-soft: 0 10px 26px rgba(28, 62, 91, .08);
  --radius: 12px;
}

body[data-app="admin"] {
  background:
    radial-gradient(circle at 18% -8%, rgba(32, 184, 148, .12), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fb 42%, #eef5f8 100%);
}

body[data-app="admin"] #app {
  grid-template-columns: 262px minmax(0, 1fr);
}

body[data-app="admin"][data-sidebar="collapsed"] #app {
  grid-template-columns: 86px minmax(0, 1fr);
}

.admin-sidebar {
  padding: 22px 16px;
  background: linear-gradient(180deg, #12354b 0%, #0f2b3e 54%, #0b2535 100%);
  color: #edf8fb;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08), 12px 0 30px rgba(22, 52, 73, .08);
}

.admin-brand {
  gap: 10px;
  padding: 0 10px 14px;
}

.admin-brand img {
  width: 170px;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.admin-brand b {
  font-size: 20px;
  letter-spacing: .01em;
}

.admin-menu-group {
  padding: 8px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.11);
  border-radius: 12px;
}

.admin-menu-group summary,
.admin-sidebar button {
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
}

.admin-menu-group summary {
  justify-content: flex-start;
  padding: 0 10px;
}

.admin-menu-group summary::after {
  margin-left: auto;
  content: "+";
}

.admin-menu-group[open] summary::after {
  content: "-";
}

.admin-sidebar button {
  gap: 10px;
  padding: 0 10px;
}

.admin-menu-group button {
  min-height: 38px;
  padding-left: 10px;
}

.admin-nav-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: #bcecff;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 0;
}

.admin-nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-sidebar button.active,
.admin-sidebar button:hover,
.admin-menu-group[open] > summary {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

.admin-sidebar button.active .admin-nav-icon,
.admin-sidebar button:hover .admin-nav-icon,
.admin-menu-group[open] > summary .admin-nav-icon {
  color: #075f83;
  background: linear-gradient(135deg, #f0fbff, #dff7f0);
  border-color: rgba(255,255,255,.72);
}

.admin-menu-group {
  gap: 4px;
  padding: 2px 0;
  background: transparent;
  border-color: transparent;
  border-left: 0;
  border-radius: 0;
}

.admin-menu-group > summary {
  color: #f0fbff;
  background: rgba(15, 85, 114, .46);
  border: 1px solid transparent;
  box-shadow: none;
}

.admin-menu-group > summary span {
  font-weight: 950;
}

.admin-menu-group > div {
  margin: 4px 0 0 20px;
  padding: 2px 0;
  border-left: 0;
}

.admin-menu-group button {
  min-height: 36px;
  padding-left: 11px;
  color: #bfd7e2;
  background: transparent;
  border-color: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 760;
}

.admin-menu-group button .admin-nav-icon {
  flex-basis: 27px;
  width: 27px;
  height: 27px;
  color: #90bdd0;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.06);
  border-radius: 8px;
}

.admin-menu-group button .admin-nav-icon svg {
  width: 15px;
  height: 15px;
}

.admin-menu-group button:hover {
  color: #ffffff;
  background: rgba(211, 246, 255, .08);
  border-color: transparent;
}

.admin-menu-group button.active {
  color: #07364b;
  background: linear-gradient(135deg, #eaf8ff, #ddf8ef);
  border-color: rgba(255,255,255,.64);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.admin-menu-group button.active .admin-nav-icon,
.admin-menu-group button:hover .admin-nav-icon {
  color: #075f83;
  background: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.88);
}

.admin-sidebar.collapsed {
  padding: 18px 10px;
}

.admin-sidebar.collapsed .admin-brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.admin-sidebar.collapsed .admin-menu-group {
  padding: 6px;
}

.admin-sidebar.collapsed .admin-menu-group summary,
.admin-sidebar.collapsed button {
  justify-content: center;
  min-height: 44px;
  padding: 0;
}

.admin-sidebar.collapsed .admin-nav-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

.admin-sidebar.collapsed .admin-nav-icon svg {
  width: 19px;
  height: 19px;
}

.admin-main {
  background: transparent;
}

.admin-topbar {
  min-height: 72px;
  padding: 0 30px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(211, 226, 237, .86);
  box-shadow: 0 8px 24px rgba(26, 62, 88, .05);
}

.admin-menu-toggle {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  color: #173049;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.admin-menu-toggle span {
  font-size: 0;
  position: relative;
  width: 18px;
  height: 14px;
}

.admin-menu-toggle span::before,
.admin-menu-toggle span::after,
.admin-menu-toggle span {
  border-top: 2px solid currentColor;
}

.admin-menu-toggle span::before,
.admin-menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
}

.admin-menu-toggle span::before {
  top: 5px;
}

.admin-menu-toggle span::after {
  top: 12px;
}

.admin-top-context.compact {
  flex: 0 0 150px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin-right: 4px;
}

.admin-top-context.compact b {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
  color: #14243a;
}

.admin-top-context.compact small {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: #687b8a;
}

.admin-top-search {
  max-width: none;
}

.admin-ai-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #687b8a;
  text-decoration: none;
  cursor: pointer;
}

.admin-ai-entry:hover {
  color: #075f83;
  border-color: rgba(8, 125, 166, .45);
  background: #f8fcfe;
}

.admin-ai-entry-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.admin-user-chip,
.admin-lang-switch,
.admin-top-actions > a,
.admin-top-actions > button {
  border-radius: 12px;
  border-color: #d5e4ee;
  background: rgba(255,255,255,.86);
}

.admin-content {
  padding: 28px 34px 42px;
}

.admin-page-head {
  align-items: center;
  margin-bottom: 22px;
  padding: 4px 0;
}

.admin-page-head span {
  color: #078f74;
  letter-spacing: .16em;
}

.admin-page-head h1 {
  letter-spacing: 0;
}

.admin-search input,
.admin-filter-panel,
.admin-panel,
.admin-chart {
  border-color: var(--line);
}

.admin-panel,
.admin-chart {
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-soft);
}

.admin-panel h3,
.admin-chart h3,
.panel-title h3 {
  color: #132033;
}

input,
select,
textarea,
.quote-read-field,
.admin-filter-panel,
.field-config-popover,
.quote-status-tabs a,
.quote-status-tabs button,
.button-link,
button {
  border-radius: 11px;
}

input,
select,
textarea {
  border-color: #d6e5ef;
  background: #fbfdff;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(8, 125, 166, .16);
  border-color: rgba(8, 125, 166, .55);
}

.button-link.primary,
button.primary,
button[type="submit"],
.admin-top-actions button[data-logout]:hover {
  color: #fff;
  background: linear-gradient(135deg, #087da6, #10a7c7);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(8, 125, 166, .18);
}

.button-link:hover,
button:hover {
  border-color: rgba(8, 125, 166, .38);
}

.admin-table-wrap {
  border-radius: 14px;
}

table thead th {
  color: #496278;
  background: #f4f9fc;
}

tbody tr {
  transition: background .16s ease, box-shadow .16s ease;
}

tbody tr:hover {
  background: #f6fbfe;
}

tbody tr.selected {
  background: #eaf7fb;
  box-shadow: inset 3px 0 0 var(--brand);
}

.quote-status-tabs,
.order-service-tabs,
.customer-level-tabs {
  gap: 10px;
}

.quote-status-tabs a,
.quote-status-tabs button,
.order-service-tabs a,
.customer-level-tabs a {
  border-color: transparent;
  background: transparent;
}

.quote-status-tabs a.active,
.quote-status-tabs button.active,
.order-service-tabs a.active,
.customer-level-tabs a.active {
  color: #075f83;
  background: #f0fbff;
  border-color: #8bcce0;
  box-shadow: 0 10px 20px rgba(8, 125, 166, .1);
}

.admin-metric,
.ops-metric-card,
.dedicated-line-card,
.dedicated-lane-card,
.status-count-card,
.customer-level-workbench,
.level-quote-workbench {
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 1040px) {
  body[data-app="admin"] #app,
  body[data-app="admin"][data-sidebar="collapsed"] #app {
    grid-template-columns: 1fr;
  }

  .admin-sidebar,
  .admin-sidebar.collapsed {
    position: relative;
    height: auto;
    max-height: none;
    align-items: stretch;
  }

  .admin-sidebar.collapsed .admin-brand b,
  .admin-sidebar.collapsed .admin-menu-group summary span,
  .admin-sidebar.collapsed .admin-nav-label {
    display: inline;
  }

  .admin-sidebar.collapsed .admin-menu-group summary::after {
    display: block;
  }
}

/* Operations dashboard */
.ops-dashboard-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.ops-dashboard-head.compact-period-switch {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ops-dashboard-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.dashboard-period-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  margin-top: 0;
  padding: 4px;
  border: 1px solid rgba(31, 86, 130, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 22px rgba(17, 62, 100, 0.06);
}

.dashboard-period-tabs a,
.dashboard-period-tabs .button-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 14px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  color: #486079;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.dashboard-period-tabs a.active,
.dashboard-period-tabs .button-link.active {
  border-color: rgba(2, 118, 168, 0.78);
  background: #fff;
  color: #066f9f;
  box-shadow: 0 8px 18px rgba(19, 91, 137, 0.08);
}

.dashboard-period-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.dashboard-period-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.ops-metric-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 16px 16px 14px 72px;
  border: 1px solid rgba(37, 99, 139, 0.13);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff 0%, #f7fbff 100%);
  box-shadow: 0 12px 30px rgba(17, 62, 100, 0.06);
  overflow: hidden;
}

.ops-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--metric-accent, #087ca5);
}

.ops-metric-icon {
  position: absolute;
  left: 16px;
  top: 18px;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--metric-accent, #087ca5);
  border: 1px solid color-mix(in srgb, var(--metric-accent, #087ca5) 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--metric-accent, #087ca5) 10%, #fff);
}

.ops-metric-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-metric-card span {
  font-size: 13px;
  font-weight: 700;
  color: #5c7390;
}

.ops-metric-card strong {
  font-size: 24px;
  line-height: 1;
  color: var(--metric-strong, #10233c);
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.ops-metric-card small {
  font-size: 12px;
  line-height: 1.45;
  color: #647891;
}

.ops-metric-card.revenue {
  --metric-accent: #07847f;
  --metric-strong: #075e59;
}

.ops-metric-card.orders {
  --metric-accent: #2563eb;
  --metric-strong: #1d4ed8;
}

.ops-metric-card.quotes {
  --metric-accent: #7c3aed;
  --metric-strong: #6d28d9;
}

.ops-metric-card.customers {
  --metric-accent: #0f8aa8;
  --metric-strong: #0b6f87;
}

.ops-metric-card.profit {
  --metric-accent: #16a34a;
  --metric-strong: #15803d;
}

.ops-metric-card.profit.danger,
.ops-metric-card.alerts.danger {
  --metric-accent: #dc2626;
  --metric-strong: #b91c1c;
}

.ops-metric-card.alerts {
  --metric-accent: #f59e0b;
  --metric-strong: #b45309;
}

.ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

.ops-dashboard-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}

.ops-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.ops-panel-head h2,
.ops-panel-head h3 {
  margin: 0;
}

.ops-panel-head p {
  margin: 5px 0 0;
  color: #60758d;
}

.ops-panel-head strong {
  white-space: nowrap;
  color: #0a6f9e;
}

.ops-status-board,
.ops-customer-board,
.ops-exception-board {
  min-height: 100%;
}

.ops-status-list,
.ops-customer-list,
.ops-alert-list {
  display: grid;
  gap: 9px;
}

.ops-status-row,
.ops-customer-row,
.ops-alert-row {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(38, 104, 148, 0.12);
  border-radius: 8px;
  background: rgba(247, 251, 255, 0.92);
}

.ops-status-row {
  grid-template-columns: minmax(110px, 1fr) minmax(96px, 0.65fr) minmax(76px, auto);
}

.ops-status-row span,
.ops-customer-row span,
.ops-alert-row span {
  min-width: 0;
  color: #10233c;
}

.ops-status-row small,
.ops-customer-row small,
.ops-alert-row small {
  display: block;
  margin-top: 3px;
  color: #6a7f98;
}

.ops-status-row i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dcebf7;
}

.ops-status-row em {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
}

.ops-status-row b,
.ops-customer-row b {
  justify-self: end;
  color: #0d6696;
}

.ops-customer-row {
  grid-template-columns: minmax(125px, 1fr) repeat(3, minmax(70px, auto));
}

.ops-alert-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ops-alert-row b {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff4df;
  color: #9a5c08;
  font-size: 12px;
}

.ops-chart-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .ops-dashboard-overview-row {
    grid-template-columns: 1fr;
  }

  .ops-dashboard-head.compact-period-switch {
    justify-content: flex-start;
  }

  .ops-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ops-status-row,
  .ops-customer-row {
    grid-template-columns: 1fr;
  }

  .ops-status-row b,
  .ops-customer-row b {
    justify-self: start;
  }
}

/* Keep the quote overview as a right-side rail on normal quote pages. */
@media (min-width: 641px) {
  .quote-workspace:not(.dedicated-workspace) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 360px);
    column-gap: 18px;
    align-items: start;
    overflow: visible;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: visible;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder > .quote-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    overflow: hidden;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-width: 360px;
    justify-self: stretch;
    align-self: start;
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker button {
    padding-inline: 10px;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .quote-workspace:not(.dedicated-workspace) {
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 12px;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    max-width: 260px;
  }

  .quote-workspace:not(.dedicated-workspace) .quote-section {
    padding-inline: 14px;
  }

  .quote-workspace:not(.dedicated-workspace) .section-head {
    gap: 10px;
  }
}
.dedicated-status-dashboard {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dedicated-load-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.dedicated-load-summary-strip article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(10, 58, 92, .05);
}
.dedicated-load-summary-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--blue);
  background: #eaf7fb;
  border: 1px solid #c8e2ef;
  border-radius: 8px;
  font-weight: 1000;
}
.dedicated-load-summary-strip b {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}
.dedicated-load-summary-strip small {
  color: var(--muted);
  font-weight: 900;
}
.dedicated-line-workbench {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(10, 58, 92, .05);
}
.dedicated-load-planner-layout {
  display: grid;
  grid-template-columns: minmax(246px, 28%) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.dedicated-load-planner-layout > .dedicated-line-workbench {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 118px);
  overflow: auto;
  margin-bottom: 0;
  gap: 8px;
  padding: 10px;
}
.dedicated-planner-right {
  min-width: 0;
}
.dedicated-right-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 900;
}
.dedicated-right-action-bar > div {
  display: grid;
  gap: 4px;
}
.dedicated-right-action-bar b {
  color: var(--ink);
  font-size: 18px;
}
.dedicated-right-action-bar span {
  color: var(--muted);
}
.dedicated-right-data-board {
  padding-top: 14px;
}
.dedicated-load-planner-layout .dedicated-line-card-grid {
  grid-template-columns: 1fr;
  gap: 7px;
}
.dedicated-load-planner-layout .dedicated-line-card {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px 8px;
  padding: 8px;
}
.dedicated-load-planner-layout .dedicated-line-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.dedicated-load-planner-layout .dedicated-line-metrics span {
  min-width: 0;
  padding: 5px 6px;
}
.dedicated-load-planner-layout .dedicated-line-metrics strong {
  font-size: 16px;
  line-height: 1.05;
}
.dedicated-load-planner-layout .dedicated-line-metrics small {
  font-size: 10px;
  line-height: 1.15;
}
.dedicated-load-planner-layout .dedicated-line-card .ui-icon {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.dedicated-load-planner-layout .dedicated-line-card b {
  margin-bottom: 1px;
  font-size: 13px;
  line-height: 1.25;
}
.dedicated-load-planner-layout .dedicated-line-card small {
  font-size: 11px;
  line-height: 1.25;
}
.dedicated-load-planner-layout .dedicated-line-card > .dedicated-load-bar {
  height: 5px;
}
.dedicated-line-workbench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dedicated-line-workbench-head h3 {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 18px;
}
.dedicated-line-workbench-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}
.dedicated-line-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dedicated-line-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  padding: 12px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.dedicated-line-card.active {
  border-color: var(--blue);
  background: #eef8fc;
  box-shadow: inset 3px 0 0 var(--blue);
}
.dedicated-line-card .ui-icon {
  width: 38px;
  height: 38px;
  color: var(--blue);
  background: #e8f7fb;
}
.dedicated-line-card b,
.dedicated-line-card small {
  display: block;
}
.dedicated-line-card b {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 15px;
}
.dedicated-line-card small {
  color: var(--muted);
  font-weight: 850;
}
.dedicated-line-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dedicated-line-metrics span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}
.dedicated-line-metrics strong {
  color: var(--blue);
  font-size: 20px;
}
.dedicated-line-card > .dedicated-load-bar {
  grid-column: 1 / -1;
  height: 8px;
}
.dedicated-future-card {
  background: #fffaf0;
}
.dedicated-order-status-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.dedicated-order-status-tabs a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.dedicated-order-status-tabs a.active {
  color: var(--blue);
  border-color: var(--blue);
  background: #eef8fc;
  box-shadow: inset 3px 0 0 var(--blue);
}
.dedicated-order-status-tabs .ui-icon {
  width: 30px;
  height: 30px;
  color: var(--brand);
  background: #e9f8f4;
  font-size: 12px;
}
.dedicated-order-status-tabs strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.dedicated-order-status-tabs b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  color: var(--blue);
  background: #eaf5fb;
  border-radius: 999px;
  font-size: 15px;
}
.dedicated-allocation-workbench {
  display: grid;
  gap: 14px;
}
.dedicated-allocation-stack {
  display: grid;
  gap: 14px;
}
.dedicated-future-orders-panel {
  display: grid;
  gap: 10px;
}
.dedicated-future-order-list {
  display: grid;
  gap: 8px;
}
.dedicated-future-order-card {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(92px, .6fr) minmax(210px, 1.35fr) minmax(120px, .7fr) minmax(90px, .55fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.dedicated-future-order-card b,
.dedicated-future-order-card span,
.dedicated-future-order-card small {
  display: block;
}
.dedicated-future-order-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.dedicated-future-order-card b {
  color: var(--ink);
  font-size: 14px;
}
.dedicated-future-order-card span {
  color: var(--muted);
  font-weight: 850;
}
.allocation-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 900;
}
.allocation-subtitle b {
  color: var(--ink);
  font-size: 18px;
}
.dedicated-allocation-table th,
.dedicated-allocation-table td {
  vertical-align: top;
}
.dedicated-allocation-table td > b,
.dedicated-allocation-table td small {
  display: block;
}
.route-split-cell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 230px;
}
.route-split-cell span {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.route-split-cell small {
  color: var(--brand);
  font-size: 10px;
  letter-spacing: .08em;
}
.route-split-cell b {
  color: var(--ink);
}
.route-split-cell em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}
.allocation-capacity-cell {
  display: grid;
  gap: 6px;
  min-width: 160px;
}
.allocation-capacity-cell .dedicated-load-bar {
  height: 8px;
}
.dedicated-allocation-lane-list {
  display: grid;
  gap: 10px;
}
.dedicated-allocation-lane-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dedicated-allocation-lane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dedicated-allocation-lane-head b,
.dedicated-allocation-lane-head span {
  display: block;
}
.dedicated-allocation-lane-head b {
  color: var(--ink);
  font-size: 17px;
}
.dedicated-allocation-lane-head span {
  color: var(--muted);
  font-weight: 900;
}
.dedicated-allocation-lane-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.dedicated-allocation-lane-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.dedicated-allocation-lane-grid small,
.dedicated-allocation-lane-grid b,
.dedicated-allocation-lane-grid span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dedicated-allocation-lane-grid small {
  color: var(--brand);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.dedicated-allocation-lane-grid b {
  color: var(--ink);
}
.dedicated-allocation-lane-grid span {
  color: var(--muted);
  font-weight: 900;
}
.dedicated-matched-orders-panel {
  display: grid;
  gap: 10px;
}
.dedicated-matched-order-list {
  display: grid;
  gap: 10px;
}
.dedicated-matched-order-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dedicated-matched-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dedicated-matched-order-head b,
.dedicated-matched-order-head span {
  display: block;
}
.dedicated-matched-order-head b {
  color: var(--ink);
  font-size: 17px;
}
.dedicated-matched-order-head span {
  color: var(--muted);
  font-weight: 900;
}
.dedicated-matched-order-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .7fr .7fr 1fr;
  gap: 8px;
}
.dedicated-matched-order-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.dedicated-matched-order-grid small,
.dedicated-matched-order-grid b,
.dedicated-matched-order-grid span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dedicated-matched-order-grid small {
  color: var(--brand);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
}
.dedicated-matched-order-grid b {
  color: var(--ink);
}
.dedicated-matched-order-grid span {
  color: var(--muted);
  font-weight: 900;
}
.dedicated-allocation-order {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dedicated-allocation-order b,
.dedicated-allocation-order span,
.dedicated-allocation-order small {
  display: block;
}
.dedicated-allocation-order b {
  color: var(--ink);
}
.dedicated-allocation-order span,
.dedicated-allocation-order small {
  color: var(--muted);
  font-weight: 850;
}
.dedicated-allocation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.dedicated-allocation-actions select {
  min-width: 0;
  min-height: 38px;
  padding: 8px 32px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 850;
}
.dedicated-order-status-pill {
  color: #0f6f8f;
  background: #eaf8fc;
  border-color: #b9ddeb;
}
.dedicated-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 18px;
  align-items: start;
}
.compact-dedicated-layout {
  grid-template-columns: 1fr;
  gap: 12px;
}
.dedicated-admin-table,
.dedicated-lane-editor {
  min-width: 0;
}
.dedicated-table-title-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.dedicated-lane-page-form {
  display: grid;
  gap: 14px;
}
.dedicated-lane-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.dedicated-lane-editor-head h2 {
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
}
.dedicated-lane-editor-head p,
.dedicated-service-strip p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.dedicated-service-strip {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.dedicated-service-strip.has-template {
  grid-template-columns: 54px minmax(0, 1fr) minmax(260px, 360px);
}
.service-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #42a1d7);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 1000;
}
.dedicated-service-strip b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 20px;
}
.dedicated-lane-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.dedicated-lane-editor-grid {
  grid-template-columns: minmax(420px, .95fr) minmax(0, 1.35fr);
}
.dedicated-lane-support-grid {
  grid-template-columns: 1fr;
}
.dedicated-lane-step-panel {
  min-width: 0;
  height: 100%;
}
.dedicated-lane-step-panel .admin-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dedicated-lane-step-panel .wide {
  grid-column: 1 / -1;
}
.dedicated-lane-step-panel .span-2 {
  grid-column: span 2;
}
.dedicated-lane-config-panel .dedicated-lane-config-grid {
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  gap: 10px;
}
.dedicated-lane-config-panel textarea {
  min-height: 42px;
}
.dedicated-lane-config-panel input[readonly] {
  color: var(--blue);
  background: #eef8fc;
}
.dedicated-weekday-field {
  display: grid;
  gap: 8px;
}
.dedicated-weekday-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.dedicated-weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(32px, 1fr));
  gap: 6px;
}
.dedicated-weekday-grid label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.dedicated-weekday-grid input {
  width: 14px;
  height: 14px;
  margin: 0;
}
.dedicated-route-panel {
  display: grid;
  gap: 12px;
}
.dedicated-route-panel .dedicated-route-meta-grid {
  grid-template-columns: minmax(92px, .8fr) minmax(112px, .95fr) minmax(138px, 1.15fr);
  gap: 8px;
}
.dedicated-route-meta-grid label {
  min-width: 0;
}
.dedicated-route-meta-grid select {
  min-height: 38px;
  padding: 8px 28px 8px 10px;
  font-size: 14px;
}
.dedicated-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.route-side {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}
.route-side b {
  color: var(--blue);
  font-size: 14px;
}
.route-side select,
.route-side input {
  min-height: 40px;
}
.route-side label {
  min-width: 0;
}
.route-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 24px;
  font-weight: 1000;
}
.dedicated-carrier-panel,
.dedicated-linked-orders-panel {
  min-width: 0;
  grid-column: 1 / -1;
}
.dedicated-carrier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dedicated-carrier-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.dedicated-carrier-card.active {
  border-color: var(--blue);
  background: #eef8fc;
  box-shadow: inset 3px 0 0 var(--blue);
}
.dedicated-carrier-card b,
.dedicated-carrier-card small {
  display: block;
}
.dedicated-carrier-card b {
  color: var(--ink);
}
.dedicated-carrier-card small,
.dedicated-carrier-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.compact-table th,
.compact-table td {
  padding-top: 9px;
  padding-bottom: 9px;
}
.dedicated-lane-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.dedicated-lane-save-bar b,
.dedicated-lane-save-bar span {
  display: block;
}
.dedicated-lane-save-bar span {
  color: var(--muted);
  font-weight: 800;
}

.dedicated-lane-modal {
  max-width: 960px;
}

.dedicated-lane-modal .dedicated-lane-form {
  margin: 0;
}
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-title-row h3 {
  margin: 0;
  color: var(--ink);
}
.panel-title-row span {
  color: var(--blue);
  font-weight: 900;
}
.dedicated-search {
  margin-bottom: 14px;
}
.dedicated-search input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 800;
}
.dedicated-admin-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(10, 58, 92, .06);
}
.dedicated-lane-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.dedicated-lane-main h3 {
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 20px;
}
.dedicated-lane-main h3 small {
  color: var(--muted);
  font-size: 13px;
}
.dedicated-lane-main p,
.dedicated-admin-card > small {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}
.dedicated-lane-price {
  min-width: 110px;
  padding: 12px;
  border-radius: 8px;
  background: #eef8fc;
  text-align: right;
}
.dedicated-lane-price b {
  display: block;
  color: var(--blue);
  font-size: 22px;
}
.dedicated-lane-price span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.dedicated-load-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eef5;
}
.dedicated-load-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #19b97c, #0694cf);
}
.lane-admin-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.lane-admin-meta span {
  padding: 8px 10px;
  color: var(--blue);
  background: #eef7fc;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}
.dedicated-load-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.dedicated-load-details summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 900;
}
.dedicated-participant-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.dedicated-participant-list article,
.dedicated-load-empty {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfd;
}
.dedicated-participant-list b {
  color: var(--ink);
}
.dedicated-participant-list span,
.dedicated-participant-list small,
.dedicated-load-empty {
  color: var(--muted);
  font-weight: 800;
}
.compact-actions {
  justify-content: flex-end;
  margin-top: 0;
}
.compact-actions .small {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
}
.search-panel { display: grid; gap: 16px; margin-bottom: 18px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 43, 70, .42);
}
.modal {
  position: relative;
  width: min(860px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
}
.modal h2 {
  margin-bottom: 18px;
  font-size: 28px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: #f1f7fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 22px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.modal-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.modal-tabs button {
  min-height: 42px;
  color: var(--blue);
  background: #eaf5fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.modal-tabs button.active { color: #fff; background: var(--blue); }
.modal:has(.packaging-types-modal) {
  width: min(900px, 94vw);
  padding: 24px 26px 22px;
}
.packaging-types-modal {
  display: grid;
  gap: 18px;
}
.packaging-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef6fb;
}
.packaging-tabs label {
  position: relative;
  display: grid;
  min-height: 48px;
  place-items: center;
  color: var(--blue);
  border-right: 1px solid var(--line);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}
.packaging-tabs label:last-child { border-right: 0; }
.packaging-tabs label.active {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.packaging-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.packaging-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}
.packaging-content {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 245px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f7fbfe, #fff);
}
.packaging-copy h3 {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 27px;
  line-height: 1.1;
}
.packaging-copy p {
  max-width: 560px;
  margin: 0 0 12px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}
.packaging-note {
  padding: 12px 14px;
  color: var(--muted) !important;
  background: #edf6fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
}
.packaging-visual {
  position: relative;
  width: 218px;
  height: 168px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #b8d7e8;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 22%, rgba(24, 185, 129, .22), transparent 34%),
    linear-gradient(135deg, #e8f6fc, #fff);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .55);
}
.packaging-visual span { position: absolute; display: block; }
.packaging-visual .box, .packaging-visual .parcel, .packaging-visual .service-box {
  background: #d9b276;
  border: 2px solid #a9742c;
  border-radius: 5px;
  box-shadow: inset 0 -10px rgba(115, 76, 24, .08);
}
.packaging-visual-pallet .box { width: 48px; height: 42px; }
.packaging-visual-pallet .b1 { left: 54px; top: 48px; }
.packaging-visual-pallet .b2 { left: 106px; top: 48px; }
.packaging-visual-pallet .b3 { left: 54px; top: 94px; }
.packaging-visual-pallet .b4 { left: 106px; top: 94px; }
.packaging-visual-pallet .pallet-base { left: 42px; right: 42px; bottom: 22px; height: 12px; background: #7d4f21; border-radius: 4px; }
.packaging-visual-pallet .pallet-slat { left: 50px; right: 50px; bottom: 8px; height: 8px; border-top: 4px solid #9d6930; border-bottom: 4px solid #9d6930; }
.packaging-visual-package .big { left: 50px; top: 48px; width: 86px; height: 76px; }
.packaging-visual-package .small { left: 116px; top: 72px; width: 52px; height: 52px; background: #e6c18a; }
.packaging-visual-package .label-strip { left: 66px; top: 64px; width: 38px; height: 10px; background: #fff; border-radius: 999px; }
.packaging-visual-pak .pak-body { left: 45px; top: 52px; width: 128px; height: 78px; background: #dff1fb; border: 2px solid #78afd0; border-radius: 18px; }
.packaging-visual-pak .pak-fold { left: 58px; top: 67px; width: 102px; height: 26px; border-top: 2px dashed #78afd0; }
.packaging-visual-pak .pak-label { left: 74px; top: 94px; width: 70px; height: 14px; background: #fff; border-radius: 999px; }
.packaging-visual-envelope .env-body { left: 42px; top: 56px; width: 134px; height: 82px; background: #fff; border: 2px solid #84b7d4; border-radius: 6px; }
.packaging-visual-envelope .env-flap { left: 56px; top: 70px; width: 106px; height: 52px; border-left: 2px solid #84b7d4; border-bottom: 2px solid #84b7d4; transform: rotate(-45deg); }
.packaging-visual-envelope .env-line { left: 78px; top: 116px; width: 62px; height: 4px; background: #18b981; border-radius: 999px; }
.packaging-visual-truck .trailer { left: 32px; top: 70px; width: 108px; height: 50px; background: #fff; border: 2px solid #84b7d4; border-radius: 6px; }
.packaging-visual-truck .cab { left: 138px; top: 84px; width: 44px; height: 36px; background: #0a82bd; border-radius: 8px 12px 5px 5px; }
.packaging-visual-truck .wheel { bottom: 35px; width: 18px; height: 18px; background: #0e3553; border: 3px solid #d9edf7; border-radius: 999px; }
.packaging-visual-truck .w1 { left: 58px; }
.packaging-visual-truck .w2 { left: 148px; }
.packaging-visual-truck .route-dot { width: 12px; height: 12px; background: #18b981; border: 3px solid #fff; border-radius: 999px; box-shadow: 0 0 0 2px rgba(24, 185, 129, .35); }
.packaging-visual-truck .d1 { left: 36px; top: 36px; }
.packaging-visual-truck .d2 { right: 34px; top: 34px; }
.packaging-visual-glove .home-card { left: 38px; top: 44px; width: 124px; height: 90px; background: #fff; border: 2px solid #84b7d4; border-radius: 8px; }
.packaging-visual-glove .service-box { left: 74px; top: 80px; width: 52px; height: 42px; }
.packaging-visual-glove .check-mark { right: 44px; top: 48px; width: 42px; height: 42px; background: #18b981; border-radius: 999px; }
.packaging-visual-glove .check-mark::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 14px;
  height: 8px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg);
}
.video-box {
  aspect-ratio: 16 / 9;
  background: #001f35;
  border-radius: 8px;
  overflow: hidden;
}
.video-box iframe { width: 100%; height: 100%; border: 0; }

.login-shell {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(380px, .62fr);
  gap: 28px;
  min-height: 100vh;
  align-items: center;
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 40px 0;
}
.login-visual {
  min-height: 620px;
  padding: 56px;
  color: #fff;
  background: linear-gradient(115deg, rgba(8, 43, 70, .94), rgba(0, 90, 150, .68)), url("../../assets/company-tech-ai.png") center / cover;
}
.login-visual p { color: rgba(255, 255, 255, .86); font-size: 18px; }
.login-panel { display: grid; gap: 18px; }
.login-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-site-link {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 14px;
}
.login-lang { justify-self: end; }
.login-assist-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
}
.login-assist-row .ghost-link {
  font-size: 13px;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 6px;
  background: #edf5fa;
  border-radius: 8px;
}
.tabs button {
  min-height: 42px;
  color: var(--blue);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
}
.tabs button.active { color: #fff; background: var(--blue); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.google-auth-box {
  display: grid;
  gap: 8px;
}
#google-signin-root {
  display: grid;
  min-height: 44px;
}

@media (max-width: 900px) {
  .notification-channel-tabs {
    grid-template-columns: 1fr;
  }

  .notification-warning {
    align-items: stretch;
    flex-direction: column;
  }
}
.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}
.google-auth-button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #4285f4;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 900;
}
.auth-note {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 42px;
}
.stat-row div {
  padding: 18px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
}
.stat-row strong { display: block; font-size: 24px; }
.hidden { display: none !important; }

.account-workspace {
  display: grid;
  gap: 18px;
}

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

.account-summary-card {
  display: grid;
  gap: 10px;
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.account-summary-card .ui-icon {
  width: 34px;
  height: 34px;
  color: var(--brand);
  background: #eef7fc;
}

.account-summary-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.account-summary-card b {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

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

.account-summary-card.primary {
  border-color: rgba(0, 119, 183, .3);
  background: linear-gradient(135deg, #f4fbff, #e8f6fc);
}

.account-summary-card.positive b { color: #16835f; }
.account-summary-card.negative b { color: #b42318; }

.account-filter-row,
.deposit-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.account-filter-row label,
.deposit-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.account-filter-row input,
.account-filter-row select,
.deposit-filter-row input,
.deposit-filter-row select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 800;
  background: #fff;
}

.account-table {
  overflow-x: auto;
}

.account-table table {
  min-width: 760px;
}

.amount-positive {
  color: #16835f;
  font-weight: 900;
}

.amount-negative {
  color: #b42318;
  font-weight: 900;
}

.deposit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
  align-items: start;
}

.deposit-side {
  display: grid;
  gap: 18px;
}

.account-note-card,
.deposit-methods {
  display: grid;
  gap: 12px;
}

.account-note-card .ui-icon {
  width: 42px;
  height: 42px;
  color: #b26b00;
  background: #fff7e6;
}

.deposit-method-grid {
  display: grid;
  gap: 10px;
}

.deposit-method-grid button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  background: #fff;
}

.deposit-method-grid button .ui-icon {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  color: var(--brand);
  background: #eef7fc;
}

.deposit-method-grid button span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.deposit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.deposit-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand);
  font-weight: 900;
  background: #eef7fc;
}

.deposit-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
}

.deposit-request-workspace {
  display: grid;
  gap: 18px;
}

.deposit-method-radio-tabs {
  display: grid;
  gap: 18px;
}

.deposit-method-radio-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.deposit-method-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
}

.deposit-method-labels label {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.deposit-method-labels label[for="deposit-tab-zelle"] {
  background: linear-gradient(135deg, #f1f8ff, #fff);
  border-color: #c9e0f5;
}

.deposit-method-labels label[for="deposit-tab-ach"] {
  background: linear-gradient(135deg, #f0fbf7, #fff);
  border-color: #c5eadc;
}

.deposit-method-labels label[for="deposit-tab-card"] {
  background: linear-gradient(135deg, #f4f1ff, #fff);
  border-color: #d8cff7;
}

.deposit-method-labels label[for="deposit-tab-alipay"] {
  background: linear-gradient(135deg, #effaf3, #fff);
  border-color: #c7ebd0;
}

.deposit-method-labels label[for="deposit-tab-cn-bank"] {
  background: linear-gradient(135deg, #fff8eb, #fff);
  border-color: #f1dbad;
}

.deposit-method-labels label:hover {
  border-color: rgba(0, 119, 183, .35);
  box-shadow: 0 12px 28px rgba(15, 66, 96, .08);
  transform: translateY(-1px);
}

.deposit-method-labels .ui-icon {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  color: var(--brand);
  background: #eef7fc;
}

.deposit-method-labels .ui-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.deposit-method-labels b {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.deposit-method-labels span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

#deposit-tab-zelle:checked ~ .deposit-method-labels label[for="deposit-tab-zelle"],
#deposit-tab-ach:checked ~ .deposit-method-labels label[for="deposit-tab-ach"],
#deposit-tab-card:checked ~ .deposit-method-labels label[for="deposit-tab-card"],
#deposit-tab-alipay:checked ~ .deposit-method-labels label[for="deposit-tab-alipay"],
#deposit-tab-cn-bank:checked ~ .deposit-method-labels label[for="deposit-tab-cn-bank"] {
  color: #fff !important;
  border-color: transparent;
  background: linear-gradient(135deg, #005a96, #08a9d6) !important;
  box-shadow: 0 18px 34px rgba(0, 119, 183, .22);
}

#deposit-tab-zelle:checked ~ .deposit-method-labels label[for="deposit-tab-zelle"] .ui-icon,
#deposit-tab-ach:checked ~ .deposit-method-labels label[for="deposit-tab-ach"] .ui-icon,
#deposit-tab-card:checked ~ .deposit-method-labels label[for="deposit-tab-card"] .ui-icon,
#deposit-tab-alipay:checked ~ .deposit-method-labels label[for="deposit-tab-alipay"] .ui-icon,
#deposit-tab-cn-bank:checked ~ .deposit-method-labels label[for="deposit-tab-cn-bank"] .ui-icon {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
}

#deposit-tab-zelle:checked ~ .deposit-method-labels label[for="deposit-tab-zelle"] b,
#deposit-tab-ach:checked ~ .deposit-method-labels label[for="deposit-tab-ach"] b,
#deposit-tab-card:checked ~ .deposit-method-labels label[for="deposit-tab-card"] b,
#deposit-tab-alipay:checked ~ .deposit-method-labels label[for="deposit-tab-alipay"] b,
#deposit-tab-cn-bank:checked ~ .deposit-method-labels label[for="deposit-tab-cn-bank"] b {
  color: #fff !important;
}

#deposit-tab-zelle:checked ~ .deposit-method-labels label[for="deposit-tab-zelle"] span,
#deposit-tab-ach:checked ~ .deposit-method-labels label[for="deposit-tab-ach"] span,
#deposit-tab-card:checked ~ .deposit-method-labels label[for="deposit-tab-card"] span,
#deposit-tab-alipay:checked ~ .deposit-method-labels label[for="deposit-tab-alipay"] span,
#deposit-tab-cn-bank:checked ~ .deposit-method-labels label[for="deposit-tab-cn-bank"] span {
  color: rgba(255, 255, 255, .82) !important;
}

.deposit-method-panels {
  min-height: 520px;
}

.deposit-method-panel {
  display: none;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
  gap: 18px;
  align-items: stretch;
  --deposit-accent: #005a96;
  --deposit-accent-soft: #eef7fc;
  --deposit-accent-line: #cfe3f1;
  --deposit-accent-glow: rgba(0, 90, 150, .12);
}

.deposit-method-panel[data-method-panel="zelle"] {
  --deposit-accent: #0066a4;
  --deposit-accent-soft: #eef8ff;
  --deposit-accent-line: #c8e3f6;
  --deposit-accent-glow: rgba(0, 102, 164, .13);
}

.deposit-method-panel[data-method-panel="ach"] {
  --deposit-accent: #11845b;
  --deposit-accent-soft: #effbf6;
  --deposit-accent-line: #c5eadc;
  --deposit-accent-glow: rgba(17, 132, 91, .13);
}

.deposit-method-panel[data-method-panel="card"] {
  --deposit-accent: #6957b8;
  --deposit-accent-soft: #f5f2ff;
  --deposit-accent-line: #d8d0f7;
  --deposit-accent-glow: rgba(105, 87, 184, .14);
}

.deposit-method-panel[data-method-panel="alipay"] {
  --deposit-accent: #15a45f;
  --deposit-accent-soft: #eefbf3;
  --deposit-accent-line: #c4ecd1;
  --deposit-accent-glow: rgba(21, 164, 95, .14);
}

.deposit-method-panel[data-method-panel="cn-bank"] {
  --deposit-accent: #b87a12;
  --deposit-accent-soft: #fff8eb;
  --deposit-accent-line: #efd7a6;
  --deposit-accent-glow: rgba(184, 122, 18, .14);
}

#deposit-tab-zelle:checked ~ .deposit-method-panels [data-method-panel="zelle"],
#deposit-tab-ach:checked ~ .deposit-method-panels [data-method-panel="ach"],
#deposit-tab-card:checked ~ .deposit-method-panels [data-method-panel="card"],
#deposit-tab-alipay:checked ~ .deposit-method-panels [data-method-panel="alipay"],
#deposit-tab-cn-bank:checked ~ .deposit-method-panels [data-method-panel="cn-bank"] {
  display: grid;
}

.deposit-info-column {
  display: grid;
  gap: 14px;
}

.deposit-receiver-card,
.deposit-steps-card,
.deposit-warning-card,
.deposit-form-card,
.deposit-card-note {
  border: 1px solid var(--deposit-accent-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px var(--deposit-accent-glow);
}

.deposit-receiver-card,
.deposit-steps-card,
.deposit-form-card {
  padding: 18px;
}

.deposit-receiver-card,
.deposit-form-card {
  position: relative;
  overflow: hidden;
}

.deposit-receiver-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .78)),
    linear-gradient(135deg, var(--deposit-accent-soft), #fff);
}

.deposit-receiver-card::before,
.deposit-form-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--deposit-accent);
}

.deposit-steps-card {
  background: linear-gradient(135deg, #fff, var(--deposit-accent-soft));
}

.deposit-form-card {
  background:
    radial-gradient(circle at 100% 0, var(--deposit-accent-soft), transparent 36%),
    #fff;
}

.deposit-card-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.deposit-card-title .ui-icon {
  width: 42px;
  height: 42px;
  color: var(--deposit-accent);
  background: #fff;
  border: 1px solid var(--deposit-accent-line);
  box-shadow: 0 10px 22px var(--deposit-accent-glow);
}

.deposit-card-title h3,
.deposit-steps-card h3,
.deposit-form-head h2 {
  margin: 0;
  color: var(--ink);
}

.deposit-card-title p,
.deposit-form-head span {
  margin: 2px 0 0;
  color: var(--deposit-accent);
  font-size: 13px;
  font-weight: 900;
}

.deposit-receiver-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.deposit-receiver-card dl div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--deposit-accent-line);
}

.deposit-receiver-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.deposit-receiver-card dd {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.copy-mini {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--deposit-accent-line);
  border-radius: 7px;
  color: var(--deposit-accent);
  font-size: 12px;
  font-weight: 900;
  background: var(--deposit-accent-soft);
}

.deposit-steps-card ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.deposit-warning-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  color: #7a4b00;
  background: #fff8e8;
}

.deposit-warning-card .ui-icon {
  width: 38px;
  height: 38px;
  color: #b26b00;
  background: #fff;
}

.deposit-warning-card p {
  margin: 0;
  font-weight: 850;
  line-height: 1.5;
}

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

.deposit-form-head {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.deposit-form-head > span {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--deposit-accent);
  background: var(--deposit-accent-soft);
  border: 1px solid var(--deposit-accent-line);
}

.deposit-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.deposit-input {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.deposit-input.wide {
  grid-column: 1 / -1;
}

.deposit-input-shell {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.deposit-input-shell b {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 44px;
  color: var(--deposit-accent);
  border-right: 1px solid var(--deposit-accent-line);
  background: var(--deposit-accent-soft);
}

.deposit-input-shell input,
.deposit-input textarea {
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 850;
  background: transparent;
  outline: none;
}

.deposit-input textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
  background: #fff;
}

.deposit-upload-box,
.deposit-card-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 14px;
  border: 1px dashed var(--deposit-accent-line);
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(135deg, var(--deposit-accent-soft), #fff);
}

.deposit-upload-box .ui-icon,
.deposit-card-note .ui-icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  color: var(--deposit-accent);
  background: #fff;
}

.deposit-upload-box span,
.deposit-card-note span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .deposit-method-labels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deposit-method-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .deposit-method-labels,
  .deposit-form-grid {
    grid-template-columns: 1fr;
  }

  .deposit-receiver-card dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-form-grid label {
  display: grid;
  gap: 6px;
  font-weight: 900;
}

.modal-form-grid input,
.modal-form-grid select,
.modal-form-grid textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 800;
  background: #fff;
}

.modal-form-grid textarea {
  min-height: 96px;
  resize: vertical;
}

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

.detail-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.detail-list span {
  color: var(--muted);
  font-weight: 900;
}

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

.info-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.info-grid .ui-icon {
  width: 36px;
  height: 36px;
  color: var(--brand);
  background: #eef7fc;
}

.system-config-grid {
  display: grid;
  gap: 18px;
}

.config-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfe 100%);
  box-shadow: var(--shadow-soft);
}

.config-card h3,
.config-flow-panel h3 {
  margin: 0;
  color: var(--ink);
}

.config-card.blue { border-left: 5px solid #0878be; }
.config-card.green { border-left: 5px solid #18b77d; }
.config-card.yellow { border-left: 5px solid #f2a51a; }
.config-card.purple { border-left: 5px solid #7868d8; }
.config-card.teal { border-left: 5px solid #0aa6b8; }

.config-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.config-card label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

.config-card input,
.config-card select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  font-weight: 800;
}

.config-card small {
  color: var(--muted);
  font-weight: 700;
}

.config-flow-panel {
  display: grid;
  gap: 16px;
}

.config-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.config-flow span {
  min-height: 54px;
  display: grid;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef8fc;
  color: var(--ink);
  font-weight: 900;
}

.config-flow b {
  color: var(--brand);
}

@media (max-width: 1120px) {
  body[data-app="admin"] #app { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recharge-list-panel .admin-filter-panel,
  .receivable-list-panel .admin-filter-panel,
  .recharge-receive-accounts > div,
  .recharge-read-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid, .admin-grid.two, .admin-grid.three { grid-template-columns: 1fr; }
  .dedicated-admin-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dedicated-admin-layout { grid-template-columns: 1fr; }
  .dedicated-load-planner-layout { grid-template-columns: 1fr; }
  .dedicated-load-planner-layout > .dedicated-line-workbench {
    position: static;
    max-height: none;
  }
  .dedicated-allocation-lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dedicated-matched-order-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dedicated-future-order-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oms-topbar { grid-template-columns: 1fr; padding: 14px 4vw; }
  .oms-mainnav { justify-content: flex-start; overflow: visible; flex-wrap: wrap; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ai-assistant-panel {
    top: 120px;
    right: 12px;
    bottom: 12px;
    width: min(380px, calc(100vw - 24px));
  }
  .work-grid, .dashboard-grid, .login-shell, .home-dashboard, .update-grid, .settings-layout { grid-template-columns: 1fr; }
  .ship-booking-workspace { grid-template-columns: 1fr; }
  .home-side, .summary-panel { position: static; }
  .settings-side { position: static; }
  .density-calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1120px) {
  body[data-app="admin"] #app { grid-template-columns: 252px minmax(0, 1fr); }
  body[data-app="admin"][data-sidebar="collapsed"] #app { grid-template-columns: 78px minmax(0, 1fr); }
  .admin-sidebar { position: sticky; height: 100vh; }
  .admin-sidebar nav { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .admin-content { padding: 18px 14px 28px; }
  .admin-topbar, .admin-page-head, .admin-top-actions { align-items: flex-start; flex-direction: column; }
  .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics, .admin-form-grid, .admin-filter-panel { grid-template-columns: 1fr; }
  .dedicated-admin-dashboard,
  .dedicated-lane-main {
    grid-template-columns: 1fr;
  }
  .dedicated-lane-price {
    text-align: left;
  }
  .recharge-list-panel .admin-filter-panel,
  .receivable-list-panel .admin-filter-panel,
  .recharge-receive-accounts > div,
  .recharge-read-grid { grid-template-columns: 1fr; }
  .admin-search input, .order-status-tool select, .order-status-tool input { width: 100%; }
  .chart-row { grid-template-columns: 1fr; gap: 5px; }
  .page-head, .two-col, .three-col, .four-col, .inline-fields, .metric-grid, .task-strip, .card-grid, .lane-grid, .dedicated-filter-row, .lane-admin-meta, .package-fields, .package-type-row, .package-service-grid, .package-type-visual-grid, .package-template-modal, .mode-picker, .choice-grid, .white-glove-services, .white-glove-option-grid, .quote-choice, .autofill-row, .shipment-service-card, .shipment-mode-picker, .shipment-ftl-options, .shipment-doc-grid, .shipment-contact-grid, .shipment-control-grid, .shipment-accessorial-strip, .shipment-doc-preview, .home-welcome, .tracking-status-grid, .tracking-search-row, .pickup-summary, .alerts-drawer summary, .alert-list article, .update-list, .address-search, .dimension-toolbar, .dimension-grid, .unit-toggle, .freight-compact-grid, .commodity-row, .address-entry-grid, .drayage-select-row, .drayage-meta-grid, .drayage-container-grid, .drayage-port-results, .drayage-warehouse-results, .settings-card-grid, .payment-card-row, .setting-toggle, .account-preference-row, .quote-dashboard-search, .quote-search-input, .quote-dashboard-tabs, .quote-date-modal, .calendar-months { grid-template-columns: 1fr; }
  .density-calc-grid, .density-unit-switch { grid-template-columns: 1fr; border-radius: 8px; }
  .density-unit-switch label { border-radius: 8px; }
  .package-template-modal article { grid-template-columns: 1fr; }
  .package-template-modal img { width: 100%; }
  .account-dropdown { left: 0; right: auto; width: min(92vw, 320px); }
  .account-trigger-text { display: none; }
  .ai-action {
    min-width: 112px;
  }
  .ai-assistant-panel {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: calc(100vh - 86px);
  }
  .ai-assistant-head {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: 12px;
  }
  .ai-assistant-prompts,
  .ai-assistant-form,
  .ai-assistant-messages {
    padding-left: 12px;
    padding-right: 12px;
  }
  .ai-assistant-form {
    grid-template-columns: 1fr;
  }
  .ai-assistant-rail {
    top: auto;
    bottom: 18px;
    min-height: 112px;
  }
  .update-list button { grid-template-columns: 34px 42px minmax(0, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }
  .update-list button:last-child { border-bottom: 0; }
  .home-actions, .tracking-bulk-actions { justify-content: flex-start; }
  .shipment-service-card div { border-right: 0; border-bottom: 1px solid var(--line); }
  .shipment-service-card div:last-child { border-bottom: 0; }
  .pickup-summary button { border-right: 0; border-bottom: 1px solid var(--line); }
  .pickup-summary button:last-child { border-bottom: 0; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar input { max-width: none; margin-left: 0; }
  .rate-row { grid-template-columns: 1fr; }
  .package-fields .wide { grid-column: auto; }
  .login-visual { min-height: auto; padding: 34px; }
}

@media (max-width: 900px) {
  .dedicated-load-summary-strip,
  .dedicated-line-card-grid {
    grid-template-columns: 1fr;
  }

  .dedicated-line-workbench-head {
    align-items: stretch;
    flex-direction: column;
  }

  .route-split-cell,
  .dedicated-allocation-actions {
    grid-template-columns: 1fr;
  }

  .account-summary-grid,
  .deposit-layout,
  .account-filter-row,
  .deposit-filter-row {
    grid-template-columns: 1fr;
  }
  .claim-new-search .tracking-inline-search,
  .claim-new-search .tracking-filter-grid,
  .claim-filter-panel .tracking-inline-search,
  .claim-filter-panel .tracking-filter-grid,
  .invoice-filter-panel .tracking-inline-search,
  .invoice-filter-panel .tracking-filter-grid,
  .charge-filter-panel .tracking-inline-search,
  .charge-filter-panel .tracking-filter-grid,
  .report-filter-panel .tracking-inline-search,
  .report-filter-panel .tracking-filter-grid {
    grid-template-columns: 1fr;
  }
  .claim-new-actions .split-action > button:first-child {
    min-width: 0;
  }
  .config-card-grid,
  .config-flow {
    grid-template-columns: 1fr;
  }
  .config-flow b {
    display: none;
  }
}

@media (min-width: 641px) and (max-width: 1120px) {
  .quote-workspace:not(.dedicated-workspace) {
    grid-template-columns: minmax(0, 1fr) minmax(248px, 270px);
    gap: 14px;
  }

  .quote-workspace:not(.dedicated-workspace) .quote-section {
    padding: 18px;
  }

  .quote-workspace:not(.dedicated-workspace) .section-head h2 {
    font-size: clamp(26px, 3.2vw, 34px);
  }

  .overview-sticky {
    padding: 18px;
  }

  .overview-sticky h2 {
    font-size: 26px;
  }

  .overview-route {
    gap: 6px;
    padding: 12px;
    font-size: 13px;
  }

  .overview-list div {
    gap: 8px;
    padding: 10px 0;
  }

  .overview-list b {
    max-width: 52%;
    font-size: 13px;
  }

  .quote-workspace:not(.dedicated-workspace) .dimension-toolbar {
    grid-template-columns: 78px minmax(154px, 182px) minmax(210px, 1fr);
  }

  .quote-workspace:not(.dedicated-workspace) .calculator-link {
    font-size: 13px;
  }

  .quote-workspace:not(.dedicated-workspace) .freight-compact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .quote-workspace:not(.dedicated-workspace) .commodity-row {
    grid-template-columns: 1fr;
  }

  .quote-workspace:not(.dedicated-workspace) .pallet-actions {
    justify-content: flex-start;
    gap: 8px;
  }

  .quote-workspace:not(.dedicated-workspace) .pallet-actions button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
}

@media (min-width: 521px) and (max-width: 640px) {
  .quote-workspace:not(.dedicated-workspace) {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 242px);
    gap: 10px;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder {
    grid-column: 1;
    grid-row: 1;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    grid-column: 2;
    grid-row: 1;
  }

  .quote-workspace:not(.dedicated-workspace) .quote-section {
    padding: 14px;
  }

  .quote-workspace:not(.dedicated-workspace) .dimension-toolbar {
    grid-template-columns: 70px minmax(128px, 152px) minmax(0, 1fr);
    gap: 8px;
  }

  .quote-workspace:not(.dedicated-workspace) .calculator-link {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 11.5px;
  }

  .quote-workspace:not(.dedicated-workspace) .unit-toggle {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
  }

  .quote-workspace:not(.dedicated-workspace) .unit-toggle label {
    min-height: 32px;
    padding-inline: 7px;
    font-size: 11.5px;
  }

  .quote-workspace:not(.dedicated-workspace) .freight-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .quote-workspace:not(.dedicated-workspace) .freight-compact-grid .field-title {
    font-size: 10.5px;
  }

  .quote-workspace:not(.dedicated-workspace) .freight-compact-grid input,
  .quote-workspace:not(.dedicated-workspace) .freight-compact-grid select {
    min-height: 34px;
    padding: 6px 5px;
    font-size: 12px;
  }

  .quote-workspace:not(.dedicated-workspace) .commodity-row {
    grid-template-columns: 1fr;
  }

  .quote-workspace:not(.dedicated-workspace) .pallet-actions {
    justify-content: flex-start;
    gap: 6px;
  }

  .quote-workspace:not(.dedicated-workspace) .pallet-actions button {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .overview-sticky {
    padding: 14px;
  }

  .overview-sticky h2 {
    font-size: 22px;
  }

  .overview-route {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px;
    font-size: 12px;
  }

  .overview-route b {
    font-size: 16px;
  }

  .overview-list div {
    display: grid;
    gap: 4px;
    padding: 8px 0;
  }

  .overview-list b {
    max-width: 100%;
    text-align: left;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .quote-workspace {
    grid-template-columns: 1fr;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder,
  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    grid-column: auto;
    grid-row: auto;
  }

  .quote-overview {
    position: static;
  }
}

.dedicated-admin-dashboard.compact-dedicated-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dedicated-admin-dashboard.compact-dedicated-dashboard article {
  min-width: 0;
  overflow: hidden;
}

.dedicated-customer-workbench .section-note,
.dedicated-customer-orders .section-note {
  margin: 6px 0 0;
  color: var(--muted);
}

.dedicated-customer-workbench {
  padding: 18px 24px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.dedicated-customer-workbench .section-head {
  grid-column: 1 / -1;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.dedicated-customer-workbench .section-head h2 {
  font-size: 24px;
  line-height: 1.15;
}

.dedicated-customer-workbench .section-note {
  font-size: 14px;
  line-height: 1.45;
}

.dedicated-customer-workbench .section-index {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 18px;
}

.dedicated-workbench-summary {
  display: contents;
  margin: 0;
}

.dedicated-workbench-summary article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  padding: 8px 8px;
  min-height: 40px;
  min-width: 0;
}

.dedicated-workbench-summary b {
  display: block;
  color: var(--brand);
  font-size: 18px;
  line-height: 1.1;
  min-width: 16px;
  text-align: center;
}

.dedicated-workbench-summary span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dedicated-workbench-tabs {
  display: contents;
}

.dedicated-workbench-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  border-radius: 8px;
}

.dedicated-workbench-tabs button.active {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  border-color: transparent;
}

.dedicated-workbench-tabs button b {
  font-size: 18px;
  line-height: 1;
}

.dedicated-workbench-tabs button span {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dedicated-orders-table table {
  width: 100%;
  border-collapse: collapse;
}

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

.dedicated-orders-table th {
  color: var(--brand);
  background: #eef7fc;
}

.dedicated-orders-table .status-pill {
  display: inline-flex;
  min-width: 68px;
  justify-content: center;
}

.dedicated-orders-empty {
  min-height: 180px;
}

input[data-dedicated-ship-date] {
  background: #eef5fb;
  color: #52677f;
  cursor: not-allowed;
  pointer-events: none;
}

input[data-dedicated-ship-date]::-webkit-calendar-picker-indicator {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 780px) {
  .dedicated-customer-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dedicated-workbench-summary,
  .dedicated-workbench-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final quote-page layout guard: keep the live overview on the right rail. */
@media (min-width: 641px) {
  .quote-workspace:not(.dedicated-workspace) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 360px) !important;
    gap: 18px !important;
    align-items: start;
    overflow: visible;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    max-width: 100%;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-builder > .quote-actions {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
    overflow: hidden;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 360px;
    min-width: 0;
    justify-self: stretch;
    align-self: start;
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  }

  .quote-workspace:not(.dedicated-workspace) .mode-picker button,
  .quote-workspace:not(.dedicated-workspace) .calculator-link {
    min-width: 0;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .quote-workspace:not(.dedicated-workspace) {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 12px !important;
  }

  .quote-workspace:not(.dedicated-workspace) > .quote-overview {
    max-width: 260px;
  }

  .quote-workspace:not(.dedicated-workspace) .quote-section {
    padding-inline: 14px;
  }
}
.cross-border-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-left: 5px solid var(--brand);
  background: linear-gradient(135deg, #f4fbff, #fff 58%, #f2fbf7);
}

.cross-border-hero h2 { margin: 4px 0 8px; }
.cross-border-hero p { margin: 0; color: var(--muted); max-width: 760px; }
.cross-border-countries { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cross-border-countries span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 900; }
.cross-border-countries b { color: var(--brand); }
.cross-border-form { display: grid; gap: 18px; }
.cross-border-route-row { align-items: end; }
.cross-border-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.cross-border-service-grid label { cursor: pointer; }
.cross-border-service-grid input { position: absolute; opacity: 0; pointer-events: none; }
.cross-border-service-grid span { display: grid; gap: 5px; min-height: 112px; padding: 18px; border: 2px solid var(--line); border-radius: 10px; background: #fff; transition: .2s ease; }
.cross-border-service-grid input:checked + span { border-color: var(--brand); background: #eef8ff; box-shadow: 0 12px 28px rgba(0, 119, 183, .12); }
.cross-border-service-grid b { font-size: 18px; color: var(--ink); }
.cross-border-service-grid small { color: var(--muted); font-weight: 800; }
.cross-border-service-grid em { color: var(--brand); font-size: 12px; font-style: normal; font-weight: 800; }
.cross-border-addresses article { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f9fcfe; }
.cross-border-addresses h3 { margin: 0; }
.cross-border-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.cross-border-checklist label { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 800; }
.cross-border-checklist input { width: 18px; height: 18px; accent-color: var(--brand); }
.cross-border-upload { width: 100%; }
.cross-border-review { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-left: 5px solid #13a46b; }
.cross-border-review h3 { margin: 0 0 6px; }
.cross-border-review p { margin: 0; color: var(--muted); max-width: 720px; }

@media (max-width: 900px) {
  .cross-border-hero, .cross-border-review { align-items: stretch; flex-direction: column; }
  .cross-border-countries { flex-wrap: wrap; white-space: normal; }
  .cross-border-service-grid, .cross-border-checklist { grid-template-columns: 1fr; }
}

/* Customer level adjustment review */
.level-adjustment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.level-adjustment-head h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.level-adjustment-head p,
.level-adjustment-qualification .panel-title p,
.level-adjustment-main .panel-title p,
.level-adjustment-side .panel-title p {
  margin: 4px 0 0;
  color: #627582;
  font-weight: 700;
}

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

.level-adjustment-metrics article {
  min-width: 0;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid #dbe5e9;
  border-top: 3px solid var(--metric-accent, #147b9d);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(17, 40, 58, .06);
}

.level-adjustment-metrics article:nth-child(2) { --metric-accent: #0f8a63; }
.level-adjustment-metrics article:nth-child(3) { --metric-accent: #2f6fcb; }
.level-adjustment-metrics article:nth-child(4) { --metric-accent: #c27a12; }
.level-adjustment-metrics article:nth-child(5) { --metric-accent: #7b5bb5; }
.level-adjustment-metrics article:nth-child(6) { --metric-accent: #496778; }

.level-adjustment-metrics span,
.level-adjustment-metrics small {
  display: block;
  color: #627582;
  font-weight: 800;
}

.level-adjustment-metrics strong {
  display: block;
  margin: 5px 0;
  color: #183246;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.level-adjustment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
  gap: 14px;
  align-items: start;
}

.level-adjustment-main,
.level-adjustment-side {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.level-adjustment-side {
  position: sticky;
  top: 86px;
}

.level-adjustment-profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #dfe8ec;
}

.level-adjustment-profile div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid #e4ecef;
  border-bottom: 1px solid #e4ecef;
}

.level-adjustment-profile div:nth-child(3n) { border-right: 0; }
.level-adjustment-profile dt { color: #627582; font-size: 12px; font-weight: 900; }
.level-adjustment-profile dd { margin: 4px 0 0; color: #183246; font-weight: 800; overflow-wrap: anywhere; }

.level-assessment-summary,
.qualification-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.level-assessment-summary.is-ready,
.qualification-state.met { color: #087354; background: #e7fbf4; }
.level-assessment-summary.has-concerns,
.qualification-state.unmet { color: #9f321a; background: #fff0ea; }
.qualification-state.missing { color: #8a5a00; background: #fff7db; }

.level-adjustment-target-summary {
  display: grid;
  gap: 5px;
  padding: 12px;
  color: #183246;
  background: #eef7fb;
  border: 1px solid #c9e2ec;
  border-radius: 8px;
}

.level-adjustment-target-summary span { color: #087354; font-size: 12px; font-weight: 900; }
.level-adjustment-target-summary b { font-size: 16px; }
.level-adjustment-target-summary small { color: #526a7a; font-weight: 800; line-height: 1.45; }

.level-adjustment-request-summary dl {
  display: grid;
  margin: 0;
}

.level-adjustment-request-summary dl div {
  padding: 10px 0;
  border-bottom: 1px solid #e4ecef;
}

.level-adjustment-request-summary dl div:last-child { border-bottom: 0; }
.level-adjustment-request-summary dt { color: #627582; font-size: 12px; font-weight: 900; }
.level-adjustment-request-summary dd { margin: 4px 0 0; color: #183246; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }

.level-adjustment-review .form-actions.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.level-adjustment-review button.danger {
  color: #9f321a;
  background: #fff0ea;
  border-color: #e7b39e;
}

.level-adjustment-data-note h3 { margin: 0 0 7px; font-size: 15px; }
.level-adjustment-data-note p { margin: 0; color: #627582; font-size: 12px; font-weight: 750; line-height: 1.65; }
.level-adjustment-main table a { color: #075f83; font-weight: 900; }

@media (max-width: 1100px) {
  .level-adjustment-layout { grid-template-columns: 1fr; }
  .level-adjustment-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-adjustment-side > :only-child,
  .level-adjustment-data-note { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .level-adjustment-head { align-items: flex-start; flex-direction: column; }
  .level-adjustment-metrics,
  .level-adjustment-profile,
  .level-adjustment-side { grid-template-columns: 1fr; }
  .level-adjustment-profile div,
  .level-adjustment-profile div:nth-child(3n) { border-right: 0; }
  .level-adjustment-data-note { grid-column: auto; }
  .level-adjustment-review .form-actions.split { grid-template-columns: 1fr; }
}
.rate-matrix-excel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rate-matrix-import-notice { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.rate-matrix-import-notice.success { color: #086b58; background: #e9faf5; border: 1px solid #a9e2d2; }
.rate-matrix-import-notice.error { color: #a43c32; background: #fff1ef; border: 1px solid #efbeb8; }
.own-rate-cost-cell { min-width: 210px; vertical-align: top; }
.own-rate-cost-cell > input { min-width: 120px; }
.own-pallet-pricing-wrap { margin-top: 7px; padding: 8px; border: 1px solid #cfe3ea; border-radius: 8px; background: #f7fbfd; }
.own-pallet-pricing-mode { display: grid; gap: 4px; color: #496879; font-size: 11px; font-weight: 800; }
.own-pallet-pricing-mode select { min-width: 0; width: 100%; margin: 0; padding: 6px 8px; font-size: 12px; }
.own-pallet-tier-fields { margin-top: 7px; }
.own-pallet-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #315b6d; font-size: 11px; }
.own-pallet-tier-head button { min-height: 26px; padding: 3px 8px; font-size: 11px; }
.own-pallet-tier-table { overflow-x: auto; border: 1px solid #d8e7ec; border-radius: 6px; background: #fff; }
.own-pallet-tier-table table { min-width: 360px; margin: 0; }
.own-pallet-tier-table th, .own-pallet-tier-table td { padding: 5px 6px; font-size: 11px; white-space: nowrap; }
.own-pallet-tier-table input { width: 76px; min-width: 0; padding: 5px 6px; font-size: 11px; }
.own-pallet-tier-table button { min-height: 25px; padding: 2px 7px; font-size: 11px; }
.own-pallet-tier-fields > small { display: block; margin-top: 5px; color: #6d8794; font-size: 10px; line-height: 1.4; }
[data-own-pallet-pricing-wrap][hidden], [data-own-pallet-tier-fields][hidden] { display: none; }
.api-pricing-rule-editor { margin: 14px 0; padding: 15px; background: #f7fbfd; border: 1px solid #d2e4eb; border-radius: 10px; }
.api-pricing-rule-fields { display: grid; grid-template-columns: minmax(220px, 1.5fr) 150px 110px minmax(220px, 1fr) 130px; align-items: end; gap: 10px; }
.api-pricing-rule-fields label { color: #496879; font-size: 12px; font-weight: 800; }
.api-pricing-rule-fields input, .api-pricing-rule-fields select { width: 100%; margin-top: 5px; }
.api-pricing-rule-note { grid-column: auto; }
.api-pricing-rule-fields button { width: 100%; min-height: 42px; }
.api-level-markup-table { margin-top: 14px; border: 1px solid #d2e4eb; border-radius: 9px; overflow: hidden; background: #fff; }
.api-level-markup-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: #496879; font-size: 12px; }
.api-level-markup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 12px 14px 14px; border-top: 1px solid #e0edf2; background: #f7fbfd; }
.api-level-markup-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px; border: 1px solid #d2e4eb; border-radius: 8px; background: #fff; color: #496879; }
.api-level-markup-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.api-level-markup-name small { color: #78909c; font-size: 10px; }
.api-level-markup-value { color: #087c9e; font-size: 16px; font-weight: 900; }
.api-level-markup-formula { color: #6d8794; font-size: 11px; line-height: 1.45; }
.api-level-markup-input { position: relative; max-width: 150px; }
.api-level-markup-input input { width: 100%; padding-right: 30px; }
.api-level-markup-input i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #547484; font-style: normal; font-weight: 800; }
.api-level-history-rules { display: flex; flex-wrap: wrap; gap: 5px; min-width: 190px; }
.api-level-history-rule { display: inline-flex; gap: 4px; padding: 4px 7px; border-radius: 999px; background: #eaf6f8; color: #12647b; white-space: nowrap; font-size: 11px; }
@media (max-width: 1180px) { .api-pricing-rule-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .api-pricing-rule-note { grid-column: span 2; } }
@media (max-width: 700px) { .api-pricing-rule-fields { grid-template-columns: 1fr; } .api-pricing-rule-note { grid-column: auto; } .api-level-markup-title { align-items: flex-start; flex-direction: column; } .api-level-markup-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .api-level-markup-cards { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .drayage-picker-list { grid-template-columns: 1fr; }
  .drayage-picker-footer { align-items: stretch; flex-direction: column; }
  .drayage-picker-footer > div { justify-content: flex-end; }
}

/* Shared client shell: keep service navigation readable as modules increase. */
body:is([data-portal="operations"],[data-portal="unified"]) .oms-mainnav .nav-button { white-space: nowrap; }
body:is([data-portal="operations"],[data-portal="unified"]) .nav-cluster { flex-shrink: 0; }
body:is([data-portal="operations"],[data-portal="unified"]) .service-plan-panel { margin-bottom: 18px; }
body:is([data-portal="operations"],[data-portal="unified"]) [data-plan-form] .tracking-tabs { flex-wrap: wrap; }
body:is([data-portal="operations"],[data-portal="unified"]) [data-plan-form] .form-actions { align-items: center; }
body:is([data-portal="operations"],[data-portal="unified"]) [data-plan-draft-filter] { width: auto; min-width: 160px; }
@media (min-width: 1121px) and (max-width: 1550px) {
  body[data-portal="unified"] .oms-topbar { grid-template-columns: 1fr auto; padding-block: 14px; gap: 10px 22px; }
  body[data-portal="unified"] .oms-mainnav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
  body[data-portal="unified"] .top-actions { grid-column: 2; grid-row: 1; }
}

body:is([data-portal="operations"],[data-portal="unified"]) .service-import{padding:20px;border:1px solid #a5d8cf;border-radius:16px;background:linear-gradient(120deg,#f0faf7,#fffbf1)}
body:is([data-portal="operations"],[data-portal="unified"]) .service-import-drop{display:flex;flex-direction:column;gap:14px;padding:28px;border:1px dashed #72bab0;border-radius:12px;text-align:center;align-items:center}
body:is([data-portal="operations"],[data-portal="unified"]) .service-import-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-bottom:1px solid #dce8e4;overflow-wrap:anywhere}
body:is([data-portal="operations"],[data-portal="unified"]) .service-import-item input{width:18px;flex-shrink:0}
body:is([data-portal="operations"],[data-portal="unified"]) .service-import-item small{display:block;color:#b66d19}

/* Client header: identity and account tools above a dedicated navigation row. */
body[data-app="client"] .oms-topbar.client-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 72px auto;
  gap: 0 24px;
  min-height: 0;
  padding: 0 4vw;
}
.client-topbar .oms-brand-area { grid-column: 1; grid-row: 1; }
.client-topbar .oms-brand { gap: 14px; width: fit-content; white-space: nowrap; font-size: 16px; }
.client-topbar .oms-brand img { width: 116px; padding: 0; }
body[data-app="client"] .client-topbar .top-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 8px; }
body[data-app="client"] .client-topbar .oms-mainnav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 16px;
  padding: 0;
  border-top: 1px solid #edf2f6;
}
.client-topbar .oms-mainnav .nav-button { min-height: 46px; padding: 0 12px; white-space: nowrap; font-size: 14px; border-radius: 0; }
.client-topbar .oms-mainnav .nav-button.active { background: #f0fafb; }
.client-topbar .account-dropdown { right: 0; left: auto; }
.related-client-service { position: relative; flex-shrink: 0; }
.related-client-service summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: #496473; background: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; list-style: none; cursor: pointer; }
.related-client-service summary::-webkit-details-marker { display: none; }
.related-client-service summary .menu-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.related-client-service[open] summary, .related-client-service summary:hover { color: var(--blue); border-color: #aad3df; background: #f5fafc; }
.related-service-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(8, 43, 70, .14); z-index: 130; }
.related-service-panel strong { display: block; color: var(--ink); font-size: 16px; }
.related-service-panel p { margin: 9px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.related-service-panel a { display: inline-flex; gap: 12px; align-items: center; color: var(--blue); font-size: 13px; font-weight: 700; }
.related-service-panel small { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; }
.related-client-service a:hover { text-decoration: underline; text-underline-offset: 4px; }
.related-client-service a:focus-visible, .related-client-service summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 900px) {
  .client-topbar .account-trigger-text { display: none; }
  .client-topbar .account-trigger { min-height: 38px; padding: 3px 8px 3px 3px; }
  .client-topbar .account-avatar { width: 32px; height: 32px; font-size: 13px; }
  .client-topbar .cart-trigger { width: 42px; height: 38px; }
  .client-topbar .ai-action { min-width: 0; min-height: 38px; padding: 0 10px; font-size: 12px; }
  body[data-app="client"] .client-topbar .oms-mainnav { gap: 0 5px; }
  .related-client-service summary { min-height: 38px; padding: 0 9px; font-size: 12px; }
}
@media (max-width: 540px) {
  body[data-app="client"] .oms-topbar.client-topbar { grid-template-rows: 62px auto; gap: 0 8px; }
  .client-topbar .oms-brand { gap: 7px; font-size: 11px; }
  .client-topbar .oms-brand img { width: 80px; }
  body[data-app="client"] .client-topbar .top-actions { gap: 5px; }
  .client-topbar .ai-action { font-size: 0; gap: 0; padding: 0 6px; width: 36px; }
  .client-topbar .cart-trigger { width: 36px; }
  .client-topbar .account-caret { display: none; }
  .client-topbar .account-trigger { padding: 3px; }
  body[data-app="client"] .client-topbar .oms-mainnav { gap: 0; }
  .client-topbar .oms-mainnav .nav-button { padding: 0 8px; min-height: 40px; font-size: 12px; }
  .client-topbar .oms-brand > span { display: none; }
  .related-client-service summary { padding: 0 8px; gap: 5px; }
  .related-service-panel { position: fixed; left: 4vw; right: 4vw; top: 60px; width: auto; }
}

/* Compact service selection, scoped to the operations portal. */
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice-layout{display:grid;gap:24px;margin-bottom:24px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-customs-toggle{display:flex;align-items:center;gap:12px;cursor:pointer}
body:is([data-portal="operations"],[data-portal="unified"]) .service-customs-toggle input{width:20px;height:20px;accent-color:#0087a9}
body:is([data-portal="operations"],[data-portal="unified"]) .service-customs-toggle small{display:block;margin-top:5px;color:#61758b;font-weight:400}
body:is([data-portal="operations"],[data-portal="unified"]) .service-route-choice,body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-row{border:0;padding:0;margin:0;min-width:0}
body:is([data-portal="operations"],[data-portal="unified"]) .service-route-choice legend{font-weight:600;margin-bottom:12px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-route-options,body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-options{display:flex;flex-wrap:wrap;gap:10px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice{position:relative;cursor:pointer;margin:0;display:inline-flex}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice input{position:absolute;opacity:0;width:1px;height:1px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice span{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid #d6e2eb;border-radius:9px;background:#fff;color:#52687d;font-weight:500;transition:background .15s,border-color .15s}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice input:checked+span{border-color:#0089a8;background:#edf9fb;color:#007d99;box-shadow:inset 0 0 0 1px #0089a8}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice input:checked+span:after{content:'✓';font-weight:700}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice input:focus-visible+span{outline:3px solid #91d4e4;outline-offset:3px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-choice:hover span{border-color:#0089a8}
body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-list{border-top:1px solid #e1eaf0}
body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-row{padding:20px 0;border-bottom:1px solid #e1eaf0}
body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-row legend{float:left;width:110px;padding-top:10px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}
body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-number{color:#8c9caf;font-size:12px;font-weight:500}
body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-options{margin-left:110px}
body:is([data-portal="operations"],[data-portal="unified"]) .service-quote-note{margin:18px 0 0;color:#6b8095;font-size:13px}
@media(max-width:650px){body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-row legend{float:none;width:auto;margin-bottom:12px;padding-top:0}body:is([data-portal="operations"],[data-portal="unified"]) .service-operation-options{margin-left:0}body:is([data-portal="operations"],[data-portal="unified"]) .service-choice span{padding:10px 12px;font-size:14px}}
/* Personal navigation placement in the unified customer portal. */
body[data-portal="unified"] .navigation-layout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px}
body[data-portal="unified"] .navigation-layout-card{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;background:#fff;border:1px solid #d8e4ed;border-radius:14px;padding:22px;color:#19334d;cursor:pointer}
body[data-portal="unified"] .navigation-layout-card.active{border:2px solid #0087a9;padding:21px;background:#f1fafc}
body[data-portal="unified"] .navigation-layout-card small{color:#678095;font-weight:400;line-height:1.6}
body[data-portal="unified"] .navigation-demo{position:relative;display:block;width:100%;height:120px;border:1px solid #d5e3ec;border-radius:8px;background:#f5f8fb;overflow:hidden}
body[data-portal="unified"] .navigation-demo i{position:absolute;background:#0087a9;opacity:.8;top:0;left:0;width:100%;height:22px}
body[data-portal="unified"] .navigation-demo.side i{width:42px;height:100%}
body[data-portal="unified"] .navigation-demo b{position:absolute;left:14px;top:36px;right:14px;bottom:14px;border-radius:5px;background:#fff}
body[data-portal="unified"] .navigation-demo.side b{left:55px;top:14px}
@media(min-width:901px){
body[data-portal="unified"][data-nav-layout="side"] .oms-topbar.client-topbar{display:flex;justify-content:space-between;min-height:82px;height:auto;padding:14px 28px;gap:20px;position:sticky;top:0;z-index:40}
body[data-portal="unified"][data-nav-layout="side"] .client-topbar .oms-mainnav{position:fixed;left:0;top:82px;bottom:0;width:232px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;overflow-y:auto;padding:22px 16px;background:#fff;border-right:1px solid #e1eaf0;grid-area:auto}
body[data-portal="unified"][data-nav-layout="side"] .nav-cluster{width:100%;flex:none}
body[data-portal="unified"][data-nav-layout="side"] .nav-button{width:100%;justify-content:space-between;text-align:left;min-height:42px;border-radius:8px;padding:10px 12px}
body[data-portal="unified"][data-nav-layout="side"] .nav-menu{display:flex;position:static;flex-direction:column;box-shadow:none;border:0;background:transparent;min-width:0;padding:4px 0 0 12px;width:100%}
body[data-portal="unified"][data-nav-layout="side"] .nav-menu button{width:100%;text-align:left;white-space:normal;padding:9px 12px;font-size:13px;border-radius:7px}
body[data-portal="unified"][data-nav-layout="side"] .nav-menu button:hover{background:#edf7fb}
body[data-portal="unified"][data-nav-layout="side"] .oms-shell{margin-left:232px;width:calc(100% - 232px);max-width:none;padding:28px}
body[data-portal="unified"][data-nav-layout="side"] .top-actions{margin-left:auto;flex-wrap:nowrap;grid-area:auto}
}
@media(max-width:900px){body[data-portal="unified"] .navigation-layout-options{grid-template-columns:1fr}body[data-portal="unified"] .oms-mainnav{overflow-x:auto;flex-wrap:nowrap!important}body[data-portal="unified"] .nav-cluster{flex-shrink:0}}
@media(min-width:901px){body[data-portal="unified"][data-nav-layout="side"] .nav-menu{display:none}body[data-portal="unified"][data-nav-layout="side"] .nav-cluster.open .nav-menu{display:flex}}
body[data-portal="unified"] .unified-service-launch{margin-bottom:24px}
body[data-portal="unified"] .unified-service-links{display:flex;gap:12px;flex-wrap:wrap}
.client-service-config-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.client-service-config-options label{display:flex;align-items:flex-start;gap:12px;padding:18px;border:1px solid #dce5ed;border-radius:10px;background:#fff;cursor:pointer}
.client-service-config-options label:has(input:checked){border-color:#0087a9;background:#eff9fb}
.client-service-config-options input{width:18px;height:18px;margin-top:3px;accent-color:#0087a9}
.client-service-config-options small{display:block;margin-top:8px;color:#698095;line-height:1.6}
@media(max-width:800px){.client-service-config-options{grid-template-columns:1fr}}

.customer-service-modal{width:min(760px,calc(100vw - 44px))}
.customer-service-modal .client-service-config-options{border:0;padding:0;margin:8px 0 16px;min-width:0}
.customer-service-modal .form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.customer-service-modal [data-service-config-status]{flex:1;min-width:120px;font-size:13px}
.customer-service-modal .customer-service-help{color:#627582;font-size:13px;line-height:1.6;margin:0 0 18px}
.customer-service-badges{display:flex;flex-wrap:wrap;gap:5px;min-width:160px}
.customer-service-badges span{padding:3px 7px;border:1px solid #d2e8ed;border-radius:5px;background:#eef8fa;color:#176580;font-size:12px;line-height:1.4;white-space:nowrap}
.customer-service-badges small,.customer-service-default{color:#627582;font-size:12px}
.customer-service-default{display:block;margin-top:5px}
.customer-service-notice{margin:0 0 16px;padding:12px 16px;border:1px solid #bcded0;border-radius:8px;background:#edf9f3;color:#24654d}
.client-sidebar-toggle,.client-nav-icon{display:none}
@media(min-width:901px){
body[data-portal="unified"][data-nav-layout="side"]{--client-sidebar-width:232px}
body[data-portal="unified"][data-nav-layout="side"] .oms-topbar.client-topbar{align-items:center;box-sizing:border-box;border-bottom:1px solid #e1eaf0}
body[data-portal="unified"][data-nav-layout="side"] .client-topbar .oms-mainnav{top:var(--client-header-height,82px);width:var(--client-sidebar-width);box-sizing:border-box;padding:12px;gap:6px}
body[data-portal="unified"][data-nav-layout="side"] .oms-shell{margin-left:var(--client-sidebar-width);width:calc(100% - var(--client-sidebar-width));box-sizing:border-box}
body[data-portal="unified"][data-nav-layout="side"] .client-sidebar-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 12px;border:0;background:#f4f8fb;border-radius:8px;color:#567186;cursor:pointer;margin-bottom:8px}
body[data-portal="unified"][data-nav-layout="side"] .client-sidebar-toggle>[aria-hidden]{font-size:24px;line-height:20px;width:24px;text-align:center}
body[data-portal="unified"][data-nav-layout="side"] .nav-button{display:flex;align-items:center;gap:12px;border-radius:8px!important;border-bottom:0;min-height:44px}
body[data-portal="unified"][data-nav-layout="side"] .client-nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px}
body[data-portal="unified"][data-nav-layout="side"] .client-nav-icon svg{width:20px;height:20px}
body[data-portal="unified"][data-nav-layout="side"] .client-nav-label{flex:1;text-align:left}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"]{--client-sidebar-width:76px}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .oms-mainnav{overflow:visible}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .client-nav-label,body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .nav-button .menu-caret{display:none}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .nav-button,body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .client-sidebar-toggle{justify-content:center;padding:10px}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .nav-menu{position:fixed;left:76px;min-width:210px;width:210px;background:#fff;border:1px solid #dce7ee;box-shadow:0 8px 24px #19334d20;border-radius:10px;padding:8px;max-height:calc(100vh - var(--client-header-height) - 20px);overflow:auto;z-index:50}
}
.customer-service-modal .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.table-page-customers table{min-width:1480px}
.table-page-customers th,.table-page-customers td{white-space:nowrap}
.table-page-customers .table-col-company{min-width:160px}
.client-nav-tooltip,.client-flyout-title{display:none}
@media(min-width:901px){
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .client-flyout-title{display:block;padding:10px 12px 12px;color:#19334d;font-weight:700;border-bottom:1px solid #e2eaf0;margin-bottom:6px}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .client-nav-tooltip{position:fixed;left:76px;display:none;padding:12px 16px;background:#19334d;color:#fff;font-size:14px;border-radius:8px;box-shadow:0 6px 18px #19334d20;white-space:nowrap;z-index:60}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .hover-open .client-nav-tooltip{display:block}
body[data-portal="unified"][data-nav-layout="side"][data-nav-collapsed="true"] .hover-open .nav-menu{display:flex;animation:clientFlyoutIn .12s ease-out}
@keyframes clientFlyoutIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
}
@media(prefers-reduced-motion:reduce){body[data-portal="unified"] .hover-open .nav-menu{animation:none!important}}

/* Keep the customer list filters compact without changing other workbenches. */
.admin-filter-panel[data-filter-form="customers"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  margin-bottom: 10px;
}
.admin-filter-panel[data-filter-form="customers"] > label {
  flex: 0 1 126px;
  min-width: 120px;
  gap: 3px;
  font-size: 12px;
}
.admin-filter-panel[data-filter-form="customers"] > .filter-contractStatus {
  flex-basis: 96px;
  min-width: 96px;
}
.admin-filter-panel[data-filter-form="customers"] > .filter-keyword {
  flex: 1 1 140px;
}
.admin-filter-panel[data-filter-form="customers"] > label > input,
.admin-filter-panel[data-filter-form="customers"] > label > select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
}
.admin-filter-panel[data-filter-form="customers"] > .filter-reset-link,
.admin-filter-panel[data-filter-form="customers"] > .filter-config-wrap {
  flex: 0 0 auto;
}
.admin-filter-panel[data-filter-form="customers"] > .filter-reset-link,
.admin-filter-panel[data-filter-form="customers"] > .filter-config-wrap > button {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* Unified settlement forms and audit tables. */
[data-settlement-history] td small, [data-bank-receipt] td small { display:block; margin-top:5px; color:var(--muted, #64748b); }
[data-settlement-history] form { display:grid; gap:10px; padding:14px 0; }
[data-settlement-history] label, [data-bank-receipt] label { display:grid; gap:6px; }
[data-settlement-history] th, [data-settlement-history] td, [data-bank-receipt] th, [data-bank-receipt] td { padding:12px; text-align:left; vertical-align:top; }
[data-bank-receipt] input[type="number"] { min-width:110px; width:140px; }
[data-bank-receipt] .table-wrap { overflow-x:auto; margin-bottom:18px; }
[data-bank-receipt] .notice { margin-bottom:18px; }

/* Compact draft drawer shared by import and customs order lists. */
.service-drafts > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.service-drafts > summary::-webkit-details-marker { display: none; }
.service-drafts > summary::after { content: '▾'; color: var(--blue); }
.service-drafts[open] > summary::after { content: '▴'; }
.service-drafts > summary strong { margin-right: auto; }
.service-drafts > summary span { color: var(--muted); font-size: 13px; }
.service-drafts-body { margin-top: 16px; border-top: 1px solid var(--line); }
.service-drafts[open] > summary span { font-size: 0; }
.service-drafts[open] > summary span::after { content: '点击收起'; font-size: 13px; }

/* Keep narrow admin headers compact and in flow so they cannot cover actions. */
@media (max-width: 980px) {
  body[data-app="admin"] .admin-topbar {
    position: static;
    display: grid;
    grid-template-columns: 40px minmax(110px, 150px) minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    gap: 8px;
    padding: 10px 14px;
  }
  body[data-app="admin"] .admin-topbar .admin-menu-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
    align-self: center;
  }
  body[data-app="admin"] .admin-top-context {
    min-width: 0;
  }
  body[data-app="admin"] .admin-top-search {
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    overflow: hidden;
  }
  body[data-app="admin"] .admin-top-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
  }
  body[data-app="admin"] .admin-top-actions > a,
  body[data-app="admin"] .admin-top-actions > button,
  body[data-app="admin"] .admin-user-chip.compact,
  body[data-app="admin"] .admin-lang-pill {
    min-height: 36px;
    height: 36px;
  }
}
@media (max-width: 520px) {
  body[data-app="admin"] .admin-topbar {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  body[data-app="admin"] .admin-top-search {
    grid-column: 1 / -1;
  }
}