/* Shared modal and modal-form system. Keep future dialog changes scoped here. */
:root {
  --app-modal-overlay: rgba(8, 13, 22, 0.58);
  --app-modal-surface: var(--enterprise-surface, var(--ui-card, #ffffff));
  --app-modal-frame-surface: var(--app-modal-surface);
  --app-modal-surface-subtle: var(--enterprise-surface-subtle, var(--ui-muted, #f6f8fb));
  --app-modal-card-surface: var(--enterprise-card-surface, var(--app-modal-surface-subtle));
  --app-modal-surface-hover: var(--enterprise-surface-hover, #eef3f8);
  --app-modal-border: var(--enterprise-border, var(--ui-border, #d8e1ec));
  --app-modal-border-strong: var(--enterprise-border-strong, var(--ui-input, #c3cfdd));
  --app-modal-text: var(--enterprise-text, var(--ui-foreground, #172033));
  --app-modal-text-soft: var(--enterprise-text-soft, #526176);
  --app-modal-muted: var(--enterprise-muted, #718096);
  --app-modal-focus: var(--enterprise-primary, var(--ui-primary, #2563eb));
  --app-modal-focus-soft: var(--enterprise-primary-soft, rgba(37, 99, 235, 0.16));
  --app-modal-shadow: 0 24px 72px rgba(15, 23, 42, 0.24);
  --app-modal-radius: 10px;
  --app-modal-gutter: 24px;
  --app-modal-section-gap: 20px;
}

html[data-theme="dark"] {
  --app-modal-overlay: rgba(1, 5, 18, 0.74);
  --app-modal-surface: var(--apex-surface, #10172b);
  --app-modal-surface-subtle: var(--apex-surface-subtle, #151f38);
  --app-modal-card-surface: var(--enterprise-card-surface, var(--app-modal-surface-subtle));
  --app-modal-surface-hover: var(--apex-surface-hover, #1b2947);
  --app-modal-border: var(--apex-border, #26395f);
  --app-modal-border-strong: var(--apex-border-strong, #36518b);
  --app-modal-text: var(--apex-text, #e8eef8);
  --app-modal-text-soft: var(--apex-text-soft, #bac7dc);
  --app-modal-muted: var(--apex-muted, #96a8c2);
  --app-modal-focus: var(--apex-info, #6f9be8);
  --app-modal-focus-soft: var(--apex-info-soft, rgba(77, 124, 211, 0.2));
  --app-modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

body.modal-open {
  overflow: hidden;
}

.app-modal-overlay,
.modal-backdrop.app-modal-overlay,
.ui-dialog-overlay.app-modal-overlay {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px;
  background: var(--app-modal-overlay) !important;
  background-image: none !important;
  backdrop-filter: blur(4px) !important;
  overscroll-behavior: contain;
  z-index: 1000 !important;
}

.app-modal-overlay[hidden] {
  display: none;
}

#modal-backdrop.app-modal-overlay,
#note-modal-backdrop.app-modal-overlay,
#load-modal-backdrop.app-modal-overlay,
#quote-detail-backdrop.app-modal-overlay,
#quote-modal-backdrop.app-modal-overlay,
#quote-filters-backdrop.app-modal-overlay,
#customer-modal-backdrop.app-modal-overlay,
#carrier-modal-backdrop.app-modal-overlay,
#detail-modal-backdrop.app-modal-overlay,
#billing-detail-modal-backdrop.app-modal-overlay,
#load-contact-modal-backdrop.app-modal-overlay,
#load-document-modal-backdrop.app-modal-overlay,
#location-modal-backdrop.app-modal-overlay,
#columns-modal-backdrop.app-modal-overlay,
#advanced-filters-backdrop.app-modal-overlay,
#billing-filters-backdrop.app-modal-overlay,
#bulk-update-backdrop.app-modal-overlay {
  align-items: center;
  padding: 16px !important;
}

#columns-modal-backdrop.app-modal-overlay,
#load-modal-backdrop.app-modal-overlay,
#customer-modal-backdrop.app-modal-overlay,
#carrier-modal-backdrop.app-modal-overlay,
#billing-detail-modal-backdrop.app-modal-overlay,
#bulk-update-backdrop.app-modal-overlay {
  z-index: 1020 !important;
}

#modal-backdrop.app-modal-overlay {
  z-index: 1040 !important;
}

#note-modal-backdrop.app-modal-overlay,
#load-contact-modal-backdrop.app-modal-overlay,
#load-document-modal-backdrop.app-modal-overlay,
#location-modal-backdrop.app-modal-overlay {
  z-index: 1060 !important;
}

.app-modal,
.modal.app-modal,
.wide-modal.app-modal,
.detail-modal.app-modal,
.billing-detail-modal.app-modal,
.ui-dialog-content.app-modal {
  --app-modal-max-width: 560px;
  display: flex !important;
  width: min(var(--app-modal-max-width), 100%) !important;
  max-width: 100% !important;
  max-height: min(920px, calc(100dvh - 32px)) !important;
  flex-direction: column;
  overflow: hidden !important;
  border: 1px solid var(--app-modal-border) !important;
  border-radius: var(--app-modal-radius) !important;
  background: var(--app-modal-frame-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text) !important;
  box-shadow: var(--app-modal-shadow) !important;
  padding: 0 !important;
}

#modal-backdrop > .app-modal,
#note-modal-backdrop > .app-modal,
#load-modal-backdrop > .app-modal,
#quote-detail-backdrop > .app-modal,
#quote-modal-backdrop > .app-modal,
#quote-filters-backdrop > .app-modal,
#customer-modal-backdrop > .app-modal,
#carrier-modal-backdrop > .app-modal,
#detail-modal-backdrop > .app-modal,
#billing-detail-modal-backdrop > .app-modal,
#load-contact-modal-backdrop > .app-modal,
#load-document-modal-backdrop > .app-modal,
#location-modal-backdrop > .app-modal,
#columns-modal-backdrop > .app-modal,
#advanced-filters-backdrop > .app-modal,
#billing-filters-backdrop > .app-modal,
#bulk-update-backdrop > .app-modal {
  width: min(var(--app-modal-max-width), 100%) !important;
}

.app-modal.app-modal--medium {
  --app-modal-max-width: 840px;
}

.app-modal.app-modal--wide {
  --app-modal-max-width: 1120px;
}

.app-modal.app-modal--detail {
  --app-modal-max-width: 1320px;
}

.app-modal__header,
.app-modal > .app-modal__header,
.modal.app-modal > .app-modal__header:first-child,
.wide-modal.app-modal > .app-modal__header:first-child,
.detail-modal.app-modal > .app-modal__header:first-child {
  position: relative !important;
  top: auto !important;
  z-index: 2;
  display: flex;
  min-height: 72px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-modal-border) !important;
  border-radius: var(--app-modal-radius) var(--app-modal-radius) 0 0 !important;
  background: var(--app-modal-frame-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text) !important;
  padding: 16px var(--app-modal-gutter) !important;
}

.app-modal__header::before,
.modal.app-modal > .app-modal__header:first-child::before,
.wide-modal.app-modal > .app-modal__header:first-child::before,
.detail-modal.app-modal > .app-modal__header:first-child::before {
  display: none !important;
  content: none !important;
}

.app-modal__header > div {
  min-width: 0;
}

.app-modal__header h3,
.modal.app-modal .app-modal__header h3 {
  margin: 0;
  color: var(--app-modal-text) !important;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: 0;
}

.app-modal__header p,
.modal.app-modal .app-modal__header p,
.app-modal__header .modal-subtitle {
  max-width: 72ch;
  margin: 4px 0 0;
  color: var(--app-modal-muted) !important;
  font-size: 13px;
  line-height: 1.45;
}

.app-modal__close,
.icon-button.app-modal__close {
  position: relative;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px;
  border: 1px solid var(--app-modal-border-strong) !important;
  border-radius: 8px !important;
  background: var(--app-modal-surface-subtle) !important;
  color: var(--app-modal-text-soft) !important;
  font-size: 0;
  box-shadow: none !important;
}

.app-modal__close::before,
.app-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.app-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.app-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.app-modal__close:hover {
  border-color: var(--app-modal-focus) !important;
  background: var(--app-modal-surface-hover) !important;
  color: var(--app-modal-text) !important;
}

.app-modal__close:focus-visible {
  border-color: var(--app-modal-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--app-modal-focus-soft) !important;
}

.app-modal__body,
.app-modal #detail-modal-content.app-modal__body,
.app-modal #billing-detail-modal-content.app-modal__body,
.app-modal #quote-detail-content.app-modal__body,
.app-modal #load-form.app-modal__body,
.app-modal #customer-form.app-modal__body,
.app-modal #carrier-form.app-modal__body,
.app-modal #quote-form.app-modal__body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--app-modal-gutter) !important;
}

.app-modal form.app-modal__body,
.app-modal .bulk-update-layout.app-modal__body,
.app-modal .filter-sections.app-modal__body {
  display: grid;
  align-content: start;
  gap: var(--app-modal-section-gap) !important;
}

.app-modal .load-stepper {
  position: sticky;
  top: 0;
  z-index: 10;
  isolation: isolate;
  margin: 0;
  border: 1px solid var(--app-modal-border);
  border-radius: 8px;
  background: var(--app-modal-frame-surface) !important;
  padding: 14px var(--app-modal-gutter) 12px;
  box-shadow: 0 1px 0 var(--app-modal-border);
}

.app-modal .load-stepper::before {
  position: absolute;
  inset: calc(var(--app-modal-gutter) * -1) calc(var(--app-modal-gutter) * -1) -1px;
  z-index: -1;
  background: var(--app-modal-frame-surface);
  content: "";
}

.app-modal .load-stepper ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-modal .load-stepper li {
  position: relative;
  min-width: 0;
}

.app-modal .load-stepper li:not(:last-child)::after {
  position: absolute;
  top: 16px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: var(--app-modal-border-strong);
  content: "";
}

.app-modal .load-step-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  justify-items: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-modal-muted);
  padding: 0 6px;
  font: inherit;
  cursor: pointer;
}

.app-modal .load-step-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-modal .load-step-trigger:not(:disabled):hover {
  background: var(--app-modal-surface-hover);
  color: var(--app-modal-text);
}

.app-modal .load-step-trigger:focus-visible {
  outline: 2px solid var(--app-modal-focus);
  outline-offset: 2px;
}

.app-modal .load-step-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--app-modal-border-strong);
  border-radius: 50%;
  background: var(--app-modal-surface);
  color: var(--app-modal-text-soft);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

.app-modal .load-step-trigger.active {
  color: var(--app-modal-text);
  font-weight: 720;
}

.app-modal .load-step-trigger.active .load-step-number {
  border-color: var(--app-modal-focus);
  background: var(--app-modal-focus);
  color: var(--app-modal-frame-surface);
  box-shadow: 0 0 0 3px var(--app-modal-focus-soft);
}

.app-modal .load-step-trigger.complete .load-step-number {
  border-color: var(--app-modal-focus);
  background: var(--app-modal-focus-soft);
  color: var(--app-modal-focus);
}

.app-modal .load-step-label {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
}

.app-modal .load-step-status {
  margin: 8px 0 0;
  color: var(--app-modal-muted);
  text-align: center;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.app-modal .load-step-status.has-error {
  color: var(--enterprise-danger);
}

.app-modal input[aria-invalid="true"],
.app-modal select[aria-invalid="true"],
.app-modal .ui-select[aria-invalid="true"],
.app-modal textarea[aria-invalid="true"] {
  border-color: var(--enterprise-danger) !important;
  box-shadow: 0 0 0 3px var(--enterprise-danger-soft) !important;
}

.app-modal .load-field-error {
  display: block;
  min-height: 1.35em;
  color: var(--enterprise-danger);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
  visibility: hidden;
}

.app-modal .load-field-error:not(:empty) {
  visibility: visible;
}

.app-modal .load-form label.load-field-error-slot {
  align-content: start;
}

.app-modal .load-step-panel:not(.form-section) {
  display: grid;
  gap: var(--app-modal-section-gap);
}

#quote-detail-backdrop.app-modal-overlay {
  align-items: start !important;
  overflow: auto !important;
  place-items: start center !important;
}

#quote-detail-backdrop .quote-detail-modal.app-modal {
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
}

#quote-detail-backdrop #quote-detail-content.app-modal__body {
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.app-modal .load-step-panel[hidden] {
  display: none !important;
}

.app-modal .load-step-panel > h4[tabindex="-1"]:focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.app-modal .load-review {
  margin-bottom: 18px;
  border: 1px solid var(--app-modal-border);
  border-radius: 8px;
  background: var(--app-modal-card-surface);
  padding: 16px;
}

.app-modal .load-review h5,
.app-modal .load-posting-heading {
  margin: 0 0 12px;
  color: var(--app-modal-text);
  font-size: 13px;
  font-weight: 740;
  line-height: 1.35;
}

.app-modal .load-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.app-modal .load-review-grid > div {
  min-width: 0;
}

.app-modal .load-review-grid dt {
  margin-bottom: 4px;
  color: var(--app-modal-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.app-modal .load-review-grid dd {
  margin: 0;
  color: var(--app-modal-text);
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.app-modal .load-success {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--app-modal-border);
  border-radius: 8px;
  background: var(--app-modal-card-surface);
  color: var(--app-modal-text);
  padding: 36px;
  text-align: center;
}

.app-modal .load-success[hidden] {
  display: none !important;
}

.app-modal .load-success:focus {
  outline: none !important;
  box-shadow: none !important;
}

.app-modal .load-success__icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid var(--app-modal-border);
  border-radius: 50%;
  background: var(--app-modal-surface);
  color: var(--enterprise-success);
}

.app-modal .load-success__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.app-modal .load-success__eyebrow {
  margin: 4px 0 0;
  color: var(--app-modal-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  text-transform: uppercase;
}

.app-modal .load-success h4 {
  margin: 0;
  color: var(--app-modal-text);
  font-size: 24px;
  font-weight: 760;
  line-height: 1.25;
}

.app-modal .load-success > p:not(.load-success__eyebrow) {
  max-width: 560px;
  margin: 0;
  color: var(--app-modal-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

.app-modal .load-success__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(720px, 100%);
  gap: 12px;
  margin: 18px 0 0;
  text-align: left;
}

.app-modal .load-success__summary > div {
  min-width: 0;
  border: 1px solid var(--app-modal-border);
  border-radius: 7px;
  background: var(--app-modal-card-surface);
  padding: 12px;
}

.app-modal .load-success__summary dt {
  margin-bottom: 4px;
  color: var(--app-modal-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.app-modal .load-success__summary dd {
  margin: 0;
  color: var(--app-modal-text);
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.4;
}

/* Keep load-detail review cards aligned with the wizard and shared modal palette. */
.app-modal--detail .detail-header {
  border: 1px solid var(--app-modal-border) !important;
  border-radius: 8px !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.app-modal--detail .detail-header::before {
  display: none !important;
}

.app-modal--detail .info-tile,
.app-modal--detail .tracking-note-rollup,
.app-modal--detail .detail-tabs .mini-record-row,
.app-modal--detail .detail-tabs .timeline-item,
.app-modal--detail .detail-tabs .bucket,
.app-modal--detail .detail-tabs .readiness-badge {
  border: 1px solid var(--app-modal-border) !important;
  border-radius: 7px !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text) !important;
  box-shadow: none !important;
}

.app-modal--detail .detail-tabs .mini-record-row {
  padding-inline: 11px;
}

.app-modal--detail .detail-tabs .panel.ui-card {
  border: 1px solid var(--app-modal-border) !important;
  border-radius: 8px !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text) !important;
  box-shadow: none !important;
}

.app-modal--detail .detail-tabs .panel-header,
.app-modal--detail .tracking-note-rollup .compact-panel-header,
.app-modal--detail .tracking-note-rollup .activity-list {
  border-color: var(--app-modal-border) !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text) !important;
}

/* Legacy load-detail selectors are ID-scoped, so normalize them at the same level. */
#detail-modal-backdrop .app-modal--detail .detail-header,
#detail-modal-backdrop .app-modal--detail .info-tile,
#detail-modal-backdrop .app-modal--detail .tracking-note-rollup,
#detail-modal-backdrop .app-modal--detail .tracking-note-rollup .compact-panel-header,
#detail-modal-backdrop .app-modal--detail .tracking-note-rollup .activity-list,
#detail-modal-backdrop .app-modal--detail .detail-tabs .detail-timeline-list,
#detail-modal-backdrop .app-modal--detail .detail-tabs .panel.ui-card,
#detail-modal-backdrop .app-modal--detail .detail-tabs .panel-header,
#detail-modal-backdrop .app-modal--detail .detail-tabs .mini-record-row,
#detail-modal-backdrop .app-modal--detail .detail-tabs .timeline-item,
#detail-modal-backdrop .app-modal--detail .detail-tabs .bucket,
#detail-modal-backdrop .app-modal--detail .detail-tabs .readiness-badge {
  border-color: var(--app-modal-border) !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-header,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .info-tile,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .tracking-note-rollup,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .tracking-note-rollup .compact-panel-header,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .tracking-note-rollup .activity-list,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .detail-timeline-list,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .panel.ui-card,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .panel-header,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .mini-record-row,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .timeline-item,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .bucket,
html[data-theme="dark"] #detail-modal-backdrop .app-modal--detail .detail-tabs .readiness-badge {
  border-color: var(--app-modal-border) !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

#load-form .load-step-actions {
  justify-content: space-between;
}

#load-form .load-step-actions #load-step-back,
#load-form .load-step-actions #load-step-next {
  margin-left: auto;
}

#load-form .load-step-actions.is-success #load-success-new {
  margin-left: auto;
}

.app-modal .load-step-actions [hidden] {
  display: none !important;
}

.app-modal__footer,
.app-modal .ui-dialog-footer.app-modal__footer {
  z-index: 3;
  display: flex;
  min-height: 72px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px calc(var(--app-modal-gutter) * -1) calc(var(--app-modal-gutter) * -1) !important;
  border: 0 !important;
  border-top: 1px solid var(--app-modal-border) !important;
  background: var(--app-modal-frame-surface) !important;
  background-image: none !important;
  padding: 14px var(--app-modal-gutter) !important;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06) !important;
}

.app-modal__body > .app-modal__footer {
  position: sticky;
  bottom: calc(var(--app-modal-gutter) * -1) !important;
}

.app-modal > .app-modal__footer,
.app-modal > .ui-dialog-footer.app-modal__footer {
  position: relative;
  bottom: auto;
  margin: 0 !important;
}

html[data-theme="dark"] .app-modal__footer {
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.24) !important;
}

.load-build-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  border: 1px solid var(--app-modal-border);
  border-radius: 8px;
  background: var(--app-modal-surface-subtle);
  padding: 4px;
}

.load-build-mode-button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--app-modal-muted);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 720;
}

.load-build-mode-button.active {
  background: var(--app-modal-surface);
  color: var(--app-modal-text);
  box-shadow: 0 0 0 1px var(--app-modal-border);
}

.load-mode-panel {
  display: grid;
  gap: var(--app-modal-section-gap);
}

.load-mode-panel[hidden] {
  display: none !important;
}

.load-mode-panel .load-stepper {
  top: 0;
  margin: 0 0 calc(var(--app-modal-section-gap) + 4px);
}

.bol-upload-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--app-modal-border);
  padding-bottom: 14px;
}

.bol-upload-header h4 {
  margin-bottom: 6px !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.form-section-helper {
  margin: 0 0 16px;
  color: var(--app-modal-muted);
  font-size: 13px;
  line-height: 1.45;
}

.bol-intake-actions {
  position: sticky;
  bottom: calc(var(--app-modal-gutter) * -1);
}

.app-modal__footer .ui-button,
.app-modal__footer button {
  min-height: 44px;
  padding-inline: 16px;
}

.app-modal .ui-form-section,
.app-modal .form-section,
.app-modal .filter-sections > section,
.app-modal .config-content > section,
.app-modal .movement-card,
.app-modal .fit-check-panel,
.app-modal .bol-drop-zone {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--app-modal-border) !important;
  border-radius: 8px !important;
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
  color: var(--app-modal-text);
  box-shadow: none !important;
  padding: 18px !important;
}

/* Keep modal form cards in the modal palette when legacy dark-theme rules compete. */
html[data-theme="dark"] .app-modal .ui-form-section,
html[data-theme="dark"] .app-modal .form-section,
html[data-theme="dark"] .app-modal .filter-sections > section,
html[data-theme="dark"] .app-modal .config-content > section,
html[data-theme="dark"] .app-modal .movement-card,
html[data-theme="dark"] .app-modal .fit-check-panel,
html[data-theme="dark"] .app-modal .bol-drop-zone {
  background: var(--app-modal-card-surface) !important;
  background-image: none !important;
}

.app-modal .bol-drop-zone.bol-drop-zone--primary {
  display: flex;
  min-height: 190px;
  margin-top: 16px !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px dashed var(--app-modal-border-strong) !important;
  background: var(--app-modal-surface) !important;
  color: var(--app-modal-text);
  text-align: center;
  cursor: pointer;
}

.app-modal .bol-drop-zone.bol-drop-zone--primary:hover,
.app-modal .bol-drop-zone.bol-drop-zone--primary.dragging,
.app-modal .bol-drop-zone.bol-drop-zone--primary:focus-visible {
  border-color: var(--app-modal-focus) !important;
  background: var(--app-modal-surface-hover) !important;
}

.bol-upload-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--app-modal-text-soft);
}

.bol-upload-icon svg {
  width: 36px;
  height: 36px;
}

.app-modal .bol-drop-zone.bol-drop-zone--primary strong {
  font-size: 15px;
  font-weight: 740;
}

.app-modal .bol-drop-zone.bol-drop-zone--primary p {
  margin: 2px 0 0;
  color: var(--app-modal-muted);
  font-size: 13px;
}

.bol-upload-file {
  margin-top: 4px;
  border: 1px solid var(--app-modal-border);
  border-radius: 999px;
  background: var(--app-modal-surface-subtle);
  color: var(--app-modal-text-soft);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 680;
}

.app-modal .ui-form-section h4,
.app-modal .form-section h4,
.app-modal .filter-sections h4,
.app-modal .config-content h4,
.app-modal .movement-card h5,
.app-modal .fit-check-panel h5 {
  margin: 0 0 16px;
  border-bottom: 1px solid var(--app-modal-border);
  color: var(--app-modal-text) !important;
  padding: 0 0 12px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: 0;
}

.app-modal .movement-card h5 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-modal .movement-card h5 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--app-modal-text-soft);
  stroke-width: 1.5;
}

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

.app-modal .load-step-panel {
  display: grid;
  gap: var(--app-modal-section-gap);
}

.app-modal .load-step-panel > .form-grid + .fit-check-panel {
  margin-top: 0 !important;
}

.app-modal--wide .form-grid,
.app-modal--detail .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-modal.filters-modal .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-modal .form-grid > *,
.app-modal .movement-fields > *,
.app-modal .field-row > * {
  min-width: 0;
}

.app-modal label,
.app-modal .bulk-update-note,
.app-modal .filters-modal label,
.app-modal .load-form label,
.app-modal .reminder-form label {
  display: grid;
  gap: 7px;
  color: var(--app-modal-text-soft) !important;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
  letter-spacing: 0;
}

.app-modal .form-label-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-modal .required-badge {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-modal-border);
  border-radius: 999px;
  background: var(--app-modal-surface-subtle);
  color: var(--app-modal-muted);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.app-modal input,
.app-modal textarea,
.app-modal .ui-form input,
.app-modal .ui-form textarea,
.app-modal .ui-select {
  width: 100%;
  min-width: 0;
  min-height: 44px !important;
  border: 1px solid var(--app-modal-border-strong) !important;
  border-radius: 7px !important;
  background: var(--app-modal-surface) !important;
  background-image: none;
  color: var(--app-modal-text) !important;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: none !important;
}

.app-modal .ui-select-wrap {
  width: 100%;
}

.app-modal .ui-select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 8px !important;
  background-color: var(--app-modal-surface) !important;
  background-image: none;
  padding-inline: 14px 40px;
  font-weight: 650;
}

.app-modal textarea,
.app-modal .ui-form textarea {
  min-height: 104px !important;
  resize: vertical;
}

.app-modal input::placeholder,
.app-modal textarea::placeholder {
  color: var(--app-modal-muted);
  opacity: 0.82;
}

.app-modal input:focus,
.app-modal .ui-select:focus,
.app-modal textarea:focus {
  border-color: var(--app-modal-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--app-modal-focus-soft) !important;
}

.app-modal input[readonly],
.app-modal input:disabled,
.app-modal .ui-select:disabled,
.app-modal textarea:disabled {
  background: var(--app-modal-surface-subtle) !important;
  color: var(--app-modal-muted) !important;
  cursor: not-allowed;
  opacity: 0.72;
}

.app-modal input[type="checkbox"],
.app-modal input[type="radio"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px !important;
  padding: 0;
}

.app-modal input[type="file"] {
  min-height: 46px !important;
  padding: 8px 10px;
}

.app-modal .check-option {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--app-modal-border) !important;
  border-radius: 7px !important;
  background: var(--app-modal-surface) !important;
  padding: 10px 12px;
  box-shadow: none !important;
}

.app-modal .span-2 {
  grid-column: span 2;
}

.app-modal .span-4 {
  grid-column: 1 / -1;
}

.app-modal .movement-grid {
  gap: 16px;
}

.app-modal .fit-check-panel {
  align-content: start;
  gap: 16px;
}

.app-modal .fit-check-panel .compact-panel-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  border-bottom: 1px solid var(--app-modal-border);
  padding: 0 0 16px;
}

.app-modal .fit-check-panel .compact-panel-header > div {
  min-width: 0;
}

.app-modal .fit-check-panel .compact-panel-header h5 {
  margin: 0;
  border: 0;
  padding: 0;
}

.app-modal .fit-check-panel .compact-panel-header p {
  margin: 5px 0 0;
  color: var(--app-modal-muted);
  font-size: 12px;
  line-height: 1.45;
}

.app-modal .fit-check-panel .compact-panel-header .compact-action {
  flex: 0 0 auto;
}

.app-modal .fit-input-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.app-modal .fit-input-grid > label {
  align-content: start;
}

.app-modal .fit-profile-fields {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  border: 1px solid var(--app-modal-border-strong);
  border-radius: 7px;
  background: var(--app-modal-surface);
  color: var(--app-modal-text);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.app-modal .fit-result {
  margin: 0;
  border-color: var(--app-modal-border) !important;
  background: var(--app-modal-surface) !important;
  box-shadow: none !important;
}

.app-modal .movement-fields,
.app-modal .bulk-update-layout,
.app-modal .bulk-update-rows,
.app-modal .filter-sections,
.app-modal .config-content {
  gap: 16px;
}

.app-modal .inline-helper-row {
  min-height: 44px;
  gap: 12px;
  color: var(--app-modal-muted);
  font-size: 12px;
  line-height: 1.45;
}

.app-modal .load-note-actions {
  margin-top: 12px;
}

.app-modal .advanced-config-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

.app-modal .config-sidebar {
  top: 0;
  align-self: start;
}

.app-modal .bulk-update-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) 44px;
  gap: 12px;
}

.app-modal .remove-bulk-update {
  width: 44px;
  height: 44px;
}

@media (max-width: 900px) {
  .app-modal--wide .form-grid,
  .app-modal--detail .form-grid,
  .app-modal.filters-modal .form-grid,
  .app-modal .fit-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-modal .movement-grid,
  .app-modal .quote-detail-grid,
  .app-modal .billing-detail-grid,
  .app-modal .detail-grid,
  .app-modal .detail-tabs {
    grid-template-columns: 1fr !important;
  }

  .app-modal .load-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --app-modal-gutter: 16px;
    --app-modal-section-gap: 16px;
  }

  .app-modal-overlay,
  .modal-backdrop.app-modal-overlay,
  .ui-dialog-overlay.app-modal-overlay {
    padding: 8px;
  }

  #modal-backdrop.app-modal-overlay,
  #note-modal-backdrop.app-modal-overlay,
  #load-modal-backdrop.app-modal-overlay,
  #quote-detail-backdrop.app-modal-overlay,
  #quote-modal-backdrop.app-modal-overlay,
  #quote-filters-backdrop.app-modal-overlay,
  #customer-modal-backdrop.app-modal-overlay,
  #carrier-modal-backdrop.app-modal-overlay,
  #detail-modal-backdrop.app-modal-overlay,
  #billing-detail-modal-backdrop.app-modal-overlay,
  #load-contact-modal-backdrop.app-modal-overlay,
  #load-document-modal-backdrop.app-modal-overlay,
  #location-modal-backdrop.app-modal-overlay,
  #columns-modal-backdrop.app-modal-overlay,
  #advanced-filters-backdrop.app-modal-overlay,
  #billing-filters-backdrop.app-modal-overlay,
  #bulk-update-backdrop.app-modal-overlay {
    padding: 8px !important;
  }

  .app-modal,
  .modal.app-modal,
  .wide-modal.app-modal,
  .detail-modal.app-modal,
  .billing-detail-modal.app-modal,
  .ui-dialog-content.app-modal {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
  }

  #modal-backdrop > .app-modal,
  #note-modal-backdrop > .app-modal,
  #load-modal-backdrop > .app-modal,
  #quote-detail-backdrop > .app-modal,
  #quote-modal-backdrop > .app-modal,
  #quote-filters-backdrop > .app-modal,
  #customer-modal-backdrop > .app-modal,
  #carrier-modal-backdrop > .app-modal,
  #detail-modal-backdrop > .app-modal,
  #billing-detail-modal-backdrop > .app-modal,
  #load-contact-modal-backdrop > .app-modal,
  #load-document-modal-backdrop > .app-modal,
  #location-modal-backdrop > .app-modal,
  #columns-modal-backdrop > .app-modal,
  #advanced-filters-backdrop > .app-modal,
  #billing-filters-backdrop > .app-modal,
  #bulk-update-backdrop > .app-modal {
    width: 100% !important;
  }

  .app-modal__header,
  .app-modal > .app-modal__header {
    min-height: 68px;
    align-items: center;
    padding-block: 12px !important;
  }

  .app-modal__header h3,
  .modal.app-modal .app-modal__header h3 {
    font-size: 17px;
  }

  .app-modal__header p {
    font-size: 12px;
  }

  .app-modal .form-grid,
  .app-modal--wide .form-grid,
  .app-modal--detail .form-grid,
  .app-modal.filters-modal .form-grid,
  .app-modal .fit-input-grid,
  .app-modal .field-row,
  .app-modal .two-up,
  .app-modal .bulk-update-row,
  .app-modal .advanced-config-layout {
    grid-template-columns: 1fr !important;
  }

  .app-modal .span-2,
  .app-modal .span-4 {
    grid-column: 1 / -1;
  }

  .app-modal input,
  .app-modal .ui-select,
  .app-modal textarea {
    font-size: 16px;
  }

  .app-modal .ui-form-section,
  .app-modal .form-section,
  .app-modal .filter-sections > section,
  .app-modal .config-content > section,
  .app-modal .movement-card,
  .app-modal .fit-check-panel {
    padding: 14px !important;
  }

  .app-modal .config-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .app-modal .remove-bulk-update {
    justify-self: end;
  }
}

@media (max-width: 480px) {
  .app-modal__header p {
    display: none;
  }

  .app-modal__footer,
  .app-modal .ui-dialog-footer.app-modal__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 72px;
    height: auto;
    padding-block: 12px !important;
  }

  .app-modal__footer button,
  .app-modal__footer .ui-button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    font-size: 12px;
  }

  .app-modal .load-stepper {
    padding-inline: 10px;
  }

  .app-modal .load-step-trigger {
    padding-inline: 2px;
  }

  .app-modal .load-step-label {
    font-size: 10px;
  }

  .app-modal .load-review-grid {
    grid-template-columns: 1fr;
  }

  .app-modal .load-success {
    min-height: 0;
    padding: 24px 16px;
  }

  .app-modal .load-success__summary {
    grid-template-columns: 1fr;
  }

  #load-form .load-step-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #load-form .load-step-actions #load-step-back,
  #load-form .load-step-actions #load-step-next {
    margin-left: 0;
  }

  #load-form .load-step-actions #load-step-next,
  #load-form .load-step-actions #save-load {
    grid-column: 3;
  }

  #load-form .load-step-actions.is-success {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #load-form .load-step-actions.is-success #load-success-new {
    margin-left: 0;
  }

  .app-modal .inline-helper-row,
  .app-modal .bol-drop-zone,
  .app-modal .section-title-row,
  .app-modal .detail-title-row,
  .app-modal .quote-detail-hero,
  .app-modal .quote-response-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-modal,
  .app-modal * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}