:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#16243a;background:#f3f6fa}*{box-sizing:border-box}body{margin:0}header{background:#10243e;color:white;padding:22px 5vw;display:flex;justify-content:space-between;align-items:center;gap:24px;box-shadow:0 3px 12px #10243e33}h1{margin:4px 0 0;font-size:26px}.eyebrow{font-size:11px;letter-spacing:1.4px;color:#74b7f2}.login{display:flex;gap:8px;flex-wrap:wrap}input,button{font:inherit;border-radius:7px;border:1px solid #c9d4e1;padding:9px 12px}button{cursor:pointer;background:#0877c9;color:white;border:none;font-weight:650}button:hover{filter:brightness(.94)}button.secondary,.toolbar button{background:white;color:#28425f;border:1px solid #cbd7e4}.toolbar button.active{background:#0877c9;color:white}main{max-width:1240px;margin:24px auto;padding:0 24px}.hidden{display:none}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:white;padding:16px;border-radius:10px;box-shadow:0 2px 9px #25364d12}.stat b{display:block;font-size:26px;color:#0877c9}.toolbar{margin:18px 0 10px;display:flex;justify-content:space-between;gap:12px}.toolbar>div{display:flex;gap:7px;flex-wrap:wrap}.notice{background:#e9f5ff;color:#235477;padding:10px 13px;border-radius:7px}.messages{display:grid;gap:12px}.card{background:white;border-radius:11px;padding:18px;box-shadow:0 2px 10px #25364d14;border-left:5px solid #468dc8}.card.quote{border-color:#ef9f16}.card.noise{border-color:#9aa7b5}.card.reply{border-color:#2e9b68}.meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:#64758a;font-size:13px}.card h2{font-size:17px;margin:11px 0 7px}.badge{padding:4px 8px;border-radius:12px;background:#e8eef5;color:#304a66;font-size:12px;font-weight:700}.summary{color:#4e6177}.preview{white-space:pre-wrap;background:#f6f8fb;padding:11px;border-radius:7px;max-height:145px;overflow:auto;font-size:13px}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.actions button[data-decision="SALES_NOISE"]{background:#68798b}.actions button[data-decision="DEVELOPED_LEAD_REPLY"]{background:#27865d}.actions button[data-decision="REVIEW_REQUIRED"]{background:#426987}.pager{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px}.pager button:disabled{opacity:.4}.empty{text-align:center;padding:45px;background:white;border-radius:10px;color:#67788b}#toast{position:fixed;right:20px;bottom:20px;background:#18334f;color:white;padding:12px 16px;border-radius:8px;display:none}@media(max-width:800px){header{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:repeat(2,1fr)}main{padding:0 12px}}

#correction-modal:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.modal-panel {
  width: min(520px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
}

.modal-panel label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-weight: 700;
}

.modal-panel select,
.modal-panel input,
.modal-panel textarea {
  width: 100%;
  box-sizing: border-box;
}

.review-outcomes button {
  min-width: 120px;
}


button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.notice {
  line-height: 1.7;
}

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

.preview.collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 5.2em;
}

.preview-toggle {
  margin-top: 8px;
  margin-bottom: 8px;
}

.preview-empty {
  color: #64748b;
  font-style: italic;
}

/* Expanded email body */
.preview {
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

.preview:not(.collapsed):not(.preview-empty) {
  display: block;
  max-height: 420px;
  overflow-x: auto;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.25);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  -webkit-line-clamp: unset;
}

.preview.collapsed {
  white-space: pre-wrap;
}

.preview:not(.collapsed) {
  height: auto !important;
  max-height: 420px !important;
  overflow-y: auto !important;
}

/* Definitive expanded email state */
.card.body-expanded .preview:not(.preview-empty) {
  display: block !important;
  min-height: 280px !important;
  height: auto !important;
  height: 420px !important;
  max-height: 420px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  padding: 16px !important;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 10px;
}

.card.body-expanded {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.card.body-expanded .preview-toggle {
  margin-bottom: 14px;
}

/* Email body only — do not apply expansion rules to attachment metadata. */
.card.body-expanded .email-body-preview:not(.preview-empty) {
  display: block !important;
  min-height: 280px !important;
  height: 420px !important;
  max-height: 420px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}


/* Operations Hub shell */
.hub-layout.hidden {
  display: none;
}

.hub-workspace > .hidden {
  display: none;
}

.hub-layout {
  width: 100%;
  min-height: calc(100vh - 92px);
  margin: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
}

.hub-sidebar {
  padding: 28px 16px;
  border-right: 1px solid #dbe4ee;
  background: #ffffff;
}

.hub-sidebar-title {
  margin: 0 12px 12px;
  color: #7a899a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.hub-navigation {
  display: grid;
  gap: 5px;
}

.hub-nav-item {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #40566f;
  text-align: left;
  font-weight: 650;
}

.hub-nav-item:hover {
  background: #edf4fa;
  filter: none;
}

.hub-nav-item.active {
  background: #e4f1fb;
  color: #086cae;
}

.hub-workspace {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 24px;
}

.workspace-placeholder {
  min-height: 360px;
  padding: 38px;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
}

.workspace-placeholder h2 {
  margin: 8px 0 10px;
  font-size: 26px;
}

.workspace-placeholder p {
  max-width: 660px;
  color: #5f7185;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .hub-layout {
    display: block;
  }

  .hub-sidebar {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid #dbe4ee;
  }

  .hub-navigation {
    display: flex;
    overflow-x: auto;
  }

  .hub-nav-item {
    width: auto;
    white-space: nowrap;
  }

  .hub-workspace {
    padding: 12px;
  }
}


/* Product experience refinement */
header {
  min-height: 78px;
  padding-top: 14px;
  padding-bottom: 14px;
}

header h1 {
  max-width: 520px;
  font-size: 24px;
  line-height: 1.15;
}

.authenticated-session {
  display: flex;
  align-items: center;
  gap: 14px;
}

.authenticated-session > div {
  display: grid;
  text-align: right;
}

.authenticated-session span {
  color: #9cc4e8;
  font-size: 12px;
}

.authenticated-session button {
  background: #ffffff;
  color: #28425f;
}

.hub-nav-group {
  display: grid;
  gap: 5px;
}

.hub-nav-divider {
  height: 1px;
  margin: 8px 12px;
  background: #e3eaf2;
}

.today-workspace {
  display: grid;
  gap: 20px;
}

.workspace-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.workspace-heading h2 {
  margin: 6px 0 6px;
  font-size: 28px;
}

.workspace-heading p {
  margin: 0;
  color: #607286;
}

.workspace-eyebrow {
  color: #4a94d2;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.2px;
}

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

.attention-stat {
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.attention-stat span {
  color: #687a8d;
  font-size: 13px;
}

.attention-stat strong {
  display: block;
  margin-top: 5px;
  color: #174d78;
  font-size: 29px;
}

.attention-stat.high strong {
  color: #b42318;
}

.attention-stat.review strong {
  color: #9a6700;
}

.attention-stat.waiting strong {
  color: #426987;
}

.attention-groups {
  display: grid;
  gap: 18px;
}

.attention-group {
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #ffffff;
}

.attention-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 17px;
  border-bottom: 1px solid #e4ebf2;
  background: #f8fafc;
}

.attention-group-heading h3 {
  margin: 0;
  font-size: 15px;
}

.attention-group-heading span {
  min-width: 27px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7eef6;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}

.attention-list {
  display: grid;
}

.attention-card {
  padding: 16px 18px;
  border-bottom: 1px solid #edf1f5;
}

.attention-card:last-child {
  border-bottom: 0;
}

.attention-card-topline,
.attention-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #718194;
  font-size: 12px;
}

.attention-card-topline {
  justify-content: space-between;
}

.attention-card h3 {
  margin: 9px 0 4px;
  font-size: 17px;
}

.attention-subject {
  margin: 0 0 7px;
  color: #3f5369;
  font-weight: 650;
}

.attention-reason {
  margin: 0 0 11px;
  color: #607286;
  line-height: 1.55;
}

.attention-priority {
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf2f7;
  color: #475b70;
  font-weight: 750;
}

.priority-high,
.priority-urgent,
.priority-critical {
  background: #feeceb;
  color: #b42318;
}

.attention-empty {
  border: 1px solid #dce5ef;
}

@media (max-width: 900px) {
  .attention-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .attention-stats {
    grid-template-columns: 1fr;
  }

  .workspace-heading {
    display: grid;
  }

  .authenticated-session > div {
    text-align: left;
  }
}


/* Work Item Workspace */
.today-master-detail {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(440px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.attention-card {
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease;
}

.attention-card:hover {
  background: #f8fbfe;
}

.attention-card.selected {
  position: relative;
  background: #f1f8fd;
  box-shadow: inset 4px 0 0 #0877c9;
}

.attention-card:focus-visible {
  outline: 3px solid rgba(8, 119, 201, 0.28);
  outline-offset: -3px;
}

.work-item-workspace {
  position: sticky;
  top: 18px;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #ffffff;
}

.work-item-empty {
  padding: 42px 30px;
}

.work-item-empty h3 {
  margin: 8px 0 8px;
  font-size: 22px;
}

.work-item-empty p,
.work-item-muted {
  color: #687a8d;
  line-height: 1.6;
}

.work-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.work-item-header h3 {
  margin: 7px 0 5px;
  font-size: 23px;
}

.work-item-header p {
  margin: 0;
  color: #586c81;
  font-weight: 650;
}

.work-item-section {
  padding: 19px 22px;
  border-bottom: 1px solid #edf1f5;
}

.work-item-section h4 {
  margin: 0 0 13px;
  color: #263f59;
  font-size: 14px;
}

.work-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.work-item-field {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f6f8fb;
}

.work-item-field span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.work-item-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.work-item-reason {
  margin: 0 0 13px;
  color: #435970;
  line-height: 1.65;
}

.work-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.work-item-actions button:disabled {
  cursor: not-allowed;
}

.work-item-developer {
  margin: 18px 22px 22px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
}

.work-item-developer summary {
  cursor: pointer;
  padding: 11px 13px;
  color: #52677d;
  font-weight: 700;
}

.work-item-developer pre {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  padding: 14px;
  border-top: 1px solid #dce5ef;
  background: #10243e;
  color: #dbeafe;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
  .today-master-detail {
    grid-template-columns: 1fr;
  }

  .work-item-workspace {
    position: static;
  }
}

@media (max-width: 600px) {
  .work-item-grid {
    grid-template-columns: 1fr;
  }

  .work-item-header {
    display: grid;
  }
}



/* Slack Workspace Delivery */
.slack-delivery-panel {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #d6e1ec;
  border-radius: 10px;
  background: #f8fafc;
}

.slack-delivery-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.slack-delivery-heading h5 {
  margin: 4px 0 0;
  color: #263f59;
  font-size: 14px;
}

.slack-delivery-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.delivered-badge {
  background: #e8f7ee;
  color: #18794e;
}

.pending-badge {
  background: #edf2f7;
  color: #607286;
}

/* Work Item Role Assignment */
.role-assignment-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #cfdce9;
  border-radius: 10px;
  background: #f8fafc;
}

.role-assignment-heading {
  display: grid;
  gap: 3px;
  margin-bottom: 13px;
}

.role-assignment-heading span {
  color: #687a8d;
  font-size: 12px;
}

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

.role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #d9e3ed;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.role-option:has(input:checked) {
  border-color: #0877c9;
  background: #eaf5fd;
}

.role-option input {
  margin: 0;
}

.role-assignment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 600px) {
  .role-options {
    grid-template-columns: 1fr;
  }
}


/* Business Task Creation */
.task-created-badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: #e5f5ec;
  color: #26714e;
  font-weight: 750;
}

.work-item-task-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

@media (max-width: 700px) {
  .work-item-task-summary {
    grid-template-columns: 1fr;
  }
}

/* Task Operations Workspace */
.task-operations-workspace {
  display: grid;
  gap: 20px;
}

.task-operations-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.task-operation-stat {
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.task-operation-stat span {
  color: #687a8d;
  font-size: 13px;
}

.task-operation-stat strong {
  display: block;
  margin-top: 5px;
  color: #174d78;
  font-size: 29px;
}

.task-operation-stat.overdue strong {
  color: #b42318;
}

.task-operation-stat.unassigned strong {
  color: #9a6700;
}

.task-operation-stat.in-progress strong {
  color: #0877c9;
}

.task-operations-list {
  display: grid;
  gap: 13px;
}

.task-operation-card {
  padding: 18px;
  border: 1px solid #dce5ef;
  border-left: 5px solid #468dc8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
}

.task-operation-card.overdue {
  border-left-color: #d92d20;
}

.task-operation-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.task-operation-card-heading h3 {
  margin: 6px 0 0;
  color: #233d57;
  font-size: 18px;
}

.task-number {
  color: #4f6a84;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.4px;
}

.task-operation-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.task-status-badge,
.overdue-badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.task-status-badge {
  background: #e8eef5;
  color: #40566f;
}

.status-in_progress {
  background: #e6f3fc;
  color: #086cae;
}

.status-unassigned {
  background: #fff4db;
  color: #8a5b00;
}

.status-assigned {
  background: #edf2f7;
  color: #40566f;
}

.status-done {
  background: #e7f6ed;
  color: #18794e;
}

.status-cancelled {
  background: #f1f3f5;
  color: #667085;
}

.overdue-badge {
  background: #feeceb;
  color: #b42318;
}

.task-operation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.task-operation-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f6f8fb;
}

.task-operation-grid span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.task-operation-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.task-operations-empty,
.task-operations-error {
  border: 1px solid #dce5ef;
}

.task-operations-error {
  color: #b42318;
}

@media (max-width: 900px) {
  .task-operations-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 600px) {
  .task-operations-stats,
  .task-operation-grid {
    grid-template-columns: 1fr;
  }

  .task-operation-card-heading {
    display: grid;
  }

  .task-operation-badges {
    justify-content: flex-start;
  }
}

/* Task Operations Filters */
.task-operations-filters {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(160px, 1fr)
    minmax(170px, 1fr)
    auto
    auto;
  gap: 12px;
  align-items: end;
  padding: 15px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.task-operations-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.task-operations-filters label > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.task-operations-filters input,
.task-operations-filters select {
  width: 100%;
  min-width: 0;
  background: #ffffff;
}

.task-overdue-filter {
  display: flex !important;
  align-items: center;
  min-height: 39px;
  padding: 0 4px;
  white-space: nowrap;
}

.task-overdue-filter input {
  width: auto;
  margin: 0;
}

@media (max-width: 1050px) {
  .task-operations-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .task-operations-filters {
    grid-template-columns: 1fr;
  }
}

/* Operations Control Dashboard */
.task-operations-stats {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.task-operation-stat.waiting strong {
  color: #426987;
}

.task-operation-stat.completed strong {
  color: #18794e;
}

.task-operation-stat.cancelled strong {
  color: #667085;
}

.task-manager-dashboard {
  display: grid;
  grid-template-columns:
    minmax(240px, 0.75fr)
    minmax(340px, 1.15fr)
    minmax(340px, 1.15fr);
  gap: 13px;
}

.task-dashboard-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.task-dashboard-heading {
  padding: 14px 16px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.task-dashboard-heading h3 {
  margin: 4px 0 0;
  color: #263f59;
  font-size: 15px;
}

.task-waiting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 14px;
}

.task-waiting-grid > div {
  padding: 11px;
  border-radius: 8px;
  background: #f6f8fb;
}

.task-waiting-grid span {
  display: block;
  color: #687a8d;
  font-size: 11px;
  font-weight: 700;
}

.task-waiting-grid strong {
  display: block;
  margin-top: 4px;
  color: #2d435b;
  font-size: 22px;
}

.task-dashboard-table {
  overflow-x: auto;
}

.task-dashboard-row {
  display: grid;
  grid-template-columns:
    minmax(125px, 1fr)
    repeat(4, minmax(45px, auto));
  gap: 9px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid #edf1f5;
  color: #50657b;
  font-size: 12px;
}

.task-dashboard-row:last-child {
  border-bottom: 0;
}

.task-dashboard-row.heading {
  color: #718194;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.task-dashboard-row strong {
  color: #2d435b;
  overflow-wrap: anywhere;
}

.dashboard-alert {
  color: #b42318;
  font-weight: 800;
}

.task-dashboard-empty {
  padding: 20px;
  color: #687a8d;
}

@media (max-width: 1250px) {
  .task-operations-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .task-manager-dashboard {
    grid-template-columns: 1fr 1fr;
  }

  .task-dashboard-panel:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .task-manager-dashboard {
    grid-template-columns: 1fr;
  }

  .task-dashboard-panel:first-child {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .task-operations-stats {
    grid-template-columns: 1fr;
  }

  .task-waiting-grid {
    grid-template-columns: 1fr;
  }
}

/* Task Detail Workspace */
.task-operations-master-detail {
  display: grid;
  grid-template-columns:
    minmax(390px, 0.95fr)
    minmax(430px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.task-operation-card {
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.task-operation-card:hover {
  background: #f8fbfe;
}

.task-operation-card.selected {
  border-color: #87bce1;
  background: #f1f8fd;
  box-shadow:
    inset 4px 0 0 #0877c9,
    0 3px 14px rgba(37, 54, 77, 0.09);
}

.task-operation-card:focus-visible {
  outline: 3px solid rgba(8, 119, 201, 0.28);
  outline-offset: 2px;
}

.task-detail-workspace {
  position: sticky;
  top: 18px;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.task-detail-empty {
  padding: 42px 30px;
}

.task-detail-empty h3 {
  margin: 8px 0;
  color: #263f59;
  font-size: 22px;
}

.task-detail-empty p {
  color: #687a8d;
  line-height: 1.65;
}

.task-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 21px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.task-detail-header .task-number {
  display: block;
  margin-top: 8px;
}

.task-detail-header h3 {
  margin: 5px 0 0;
  color: #233d57;
  font-size: 23px;
}

.task-detail-section {
  padding: 18px 21px;
  border-bottom: 1px solid #edf1f5;
}

.task-detail-section:last-child {
  border-bottom: 0;
}

.task-detail-section h4 {
  margin: 0 0 12px;
  color: #263f59;
  font-size: 14px;
}

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

.task-detail-field {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f6f8fb;
}

.task-detail-field span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.task-detail-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.task-detail-placeholder {
  background: #fbfcfe;
}

.task-detail-placeholder > div {
  display: grid;
  gap: 3px;
}

.task-detail-placeholder h4 {
  margin: 0;
}

.task-detail-placeholder p {
  margin: 9px 0 0;
  color: #687a8d;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .task-operations-master-detail {
    grid-template-columns: 1fr;
  }

  .task-detail-workspace {
    position: static;
  }
}

@media (max-width: 600px) {
  .task-detail-header {
    display: grid;
  }

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

/* Task Timeline UI */
.task-detail-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.task-detail-section-heading h4 {
  margin: 3px 0 0;
}

.task-timeline {
  display: grid;
}

.task-timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
}

.task-timeline-event:not(:last-child)::before {
  position: absolute;
  top: 15px;
  bottom: -7px;
  left: 6px;
  width: 2px;
  background: #dce5ef;
  content: "";
}

.task-timeline-marker {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #6b7f93;
  box-shadow: 0 0 0 1px #bac8d6;
}

.task-timeline-event.created .task-timeline-marker {
  background: #18794e;
}

.task-timeline-event.slack .task-timeline-marker {
  background: #4a3f9f;
}

.task-timeline-event-content {
  min-width: 0;
  padding: 0 0 20px;
}

.task-timeline-event-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 13px;
}

.task-timeline-event-heading > div {
  min-width: 0;
}

.task-timeline-action {
  display: block;
  color: #263f59;
  font-size: 14px;
  font-weight: 800;
}

.task-timeline-event-heading strong {
  display: block;
  margin-top: 3px;
  color: #607286;
  font-size: 12px;
}

.task-timeline-event-heading time {
  flex: 0 0 auto;
  color: #718194;
  font-size: 11px;
  white-space: nowrap;
}

.task-timeline-details {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
}

.task-timeline-details > div {
  display: grid;
  grid-template-columns: minmax(105px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #f6f8fb;
}

.task-timeline-details dt {
  color: #718194;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.task-timeline-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #40566f;
  font-size: 11px;
}

.task-timeline-loading,
.task-timeline-empty,
.task-timeline-error {
  padding: 17px;
  border: 1px dashed #cbd6e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #687a8d;
  font-size: 13px;
}

.task-timeline-error {
  border-color: #f1b7b2;
  background: #fff7f6;
  color: #b42318;
}

@media (max-width: 600px) {
  .task-timeline-event-heading {
    display: grid;
  }

  .task-timeline-event-heading time {
    white-space: normal;
  }

  .task-timeline-details > div {
    grid-template-columns: 1fr;
  }
}

/* Task Lifecycle Controls */
.task-lifecycle {
  background: #fbfcfe;
}

.task-lifecycle-note {
  display: grid;
  gap: 7px;
}

.task-lifecycle-note > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.task-lifecycle-note textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid #cbd6e1;
  border-radius: 8px;
  background: #ffffff;
  color: #2d435b;
  font: inherit;
  line-height: 1.5;
}

.task-lifecycle-note textarea:focus {
  border-color: #79add3;
  outline: 3px solid rgba(8, 119, 201, 0.12);
}

.task-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.task-lifecycle-action {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
}

.lifecycle-primary {
  background: #0877c9;
  color: #ffffff;
}

.lifecycle-secondary {
  border-color: #cbd6e1;
  background: #ffffff;
  color: #40566f;
}

.lifecycle-waiting {
  border-color: #b9cddd;
  background: #eef5fa;
  color: #365d7a;
}

.lifecycle-warning {
  border-color: #efc36e;
  background: #fff6df;
  color: #865900;
}

.lifecycle-success {
  border-color: #95d5af;
  background: #e7f6ed;
  color: #18794e;
}

.lifecycle-danger {
  border-color: #efb0aa;
  background: #fff1f0;
  color: #b42318;
}

.task-lifecycle-action:hover {
  filter: brightness(0.97);
}

.task-lifecycle-action:disabled,
.task-lifecycle-note textarea:disabled {
  cursor: wait;
  opacity: 0.58;
}

.task-lifecycle-terminal {
  padding: 13px;
  border: 1px dashed #cbd6e1;
  border-radius: 8px;
  background: #f6f8fb;
  color: #687a8d;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .task-lifecycle-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .task-lifecycle-action {
    width: 100%;
  }
}


/* Cargo Load Workspace */
.cargo-load-workspace {
  display: grid;
  gap: 20px;
}

.cargo-load-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cargo-load-stat {
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.cargo-load-stat span {
  color: #687a8d;
  font-size: 12px;
  font-weight: 700;
}

.cargo-load-stat strong {
  display: block;
  margin-top: 5px;
  color: #174d78;
  font-size: 28px;
}

.cargo-load-stat.received strong,
.cargo-load-stat.completed strong {
  color: #18794e;
}

.cargo-load-stat.outstanding strong,
.cargo-load-stat.partial strong {
  color: #9a6700;
}

.cargo-load-stat.missing strong {
  color: #b42318;
}

.cargo-load-stat.unknown strong {
  color: #667085;
}

.cargo-load-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.cargo-dashboard-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.cargo-dashboard-heading {
  padding: 14px 16px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.cargo-dashboard-heading h3 {
  margin: 4px 0 0;
  color: #263f59;
  font-size: 15px;
}

.cargo-dashboard-table {
  overflow-x: auto;
}

.cargo-dashboard-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 1fr)
    repeat(4, minmax(62px, auto));
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid #edf1f5;
  color: #50657b;
  font-size: 12px;
}

.cargo-dashboard-row:last-child {
  border-bottom: 0;
}

.cargo-dashboard-row.heading {
  color: #718194;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.cargo-dashboard-row strong {
  color: #2d435b;
  overflow-wrap: anywhere;
}

.cargo-dashboard-alert {
  color: #b42318;
  font-weight: 800;
}

.cargo-dashboard-empty {
  padding: 20px;
  color: #687a8d;
}

.cargo-load-master-detail {
  display: grid;
  grid-template-columns:
    minmax(390px, 0.95fr)
    minmax(430px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.cargo-load-list {
  display: grid;
  gap: 13px;
}

.cargo-load-card {
  cursor: pointer;
  padding: 18px;
  border: 1px solid #dce5ef;
  border-left: 5px solid #6b7f93;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.cargo-load-card.arrival-missing {
  border-left-color: #d92d20;
}

.cargo-load-card.arrival-partial {
  border-left-color: #d29a14;
}

.cargo-load-card.arrival-received {
  border-left-color: #2f8f62;
}

.cargo-load-card:hover {
  background: #f8fbfe;
}

.cargo-load-card.selected {
  border-color: #87bce1;
  background: #f1f8fd;
  box-shadow:
    inset 4px 0 0 #0877c9,
    0 3px 14px rgba(37, 54, 77, 0.09);
}

.cargo-load-card:focus-visible {
  outline: 3px solid rgba(8, 119, 201, 0.28);
  outline-offset: 2px;
}

.cargo-load-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.cargo-load-card-heading h3 {
  margin: 6px 0 0;
  color: #233d57;
  font-size: 18px;
}

.cargo-load-reference {
  color: #4f6a84;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.4px;
}

.cargo-arrival-badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf2f7;
  color: #40566f;
  font-size: 12px;
  font-weight: 750;
}

.cargo-arrival-badge.arrival-missing {
  background: #feeceb;
  color: #b42318;
}

.cargo-arrival-badge.arrival-partial {
  background: #fff4db;
  color: #8a5b00;
}

.cargo-arrival-badge.arrival-received {
  background: #e7f6ed;
  color: #18794e;
}

.cargo-arrival-badge.arrival-unknown {
  background: #f1f3f5;
  color: #667085;
}

.cargo-load-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.cargo-load-card-grid > div,
.cargo-load-detail-field {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f6f8fb;
}

.cargo-load-card-grid span,
.cargo-load-detail-field span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.cargo-load-card-grid strong,
.cargo-load-detail-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.cargo-load-detail-workspace {
  position: sticky;
  top: 18px;
  min-width: 0;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.cargo-load-detail-empty {
  padding: 42px 30px;
}

.cargo-load-detail-empty h3 {
  margin: 8px 0;
  color: #263f59;
  font-size: 22px;
}

.cargo-load-detail-empty p {
  color: #687a8d;
  line-height: 1.65;
}

.cargo-load-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 21px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.cargo-load-detail-header .cargo-load-reference {
  display: block;
  margin-top: 8px;
}

.cargo-load-detail-header h3 {
  margin: 5px 0 0;
  color: #233d57;
  font-size: 23px;
}

.cargo-load-detail-section {
  padding: 18px 21px;
  border-bottom: 1px solid #edf1f5;
}

.cargo-load-detail-section:last-child {
  border-bottom: 0;
}

.cargo-load-detail-section h4 {
  margin: 0 0 12px;
  color: #263f59;
  font-size: 14px;
}

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

.cargo-load-description,
.cargo-read-only-note p {
  margin: 0;
  color: #607286;
  line-height: 1.6;
}

.cargo-read-only-note {
  background: #fbfcfe;
}

.cargo-load-empty,
.cargo-load-error {
  border: 1px solid #dce5ef;
}

.cargo-load-error {
  color: #b42318;
}

@media (max-width: 1180px) {
  .cargo-load-master-detail {
    grid-template-columns: 1fr;
  }

  .cargo-load-detail-workspace {
    position: static;
  }
}

@media (max-width: 900px) {
  .cargo-load-stats,
  .cargo-load-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cargo-load-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .cargo-load-stats,
  .cargo-load-dashboard,
  .cargo-load-card-grid,
  .cargo-load-detail-grid {
    grid-template-columns: 1fr;
  }

  .cargo-load-card-heading,
  .cargo-load-detail-header {
    display: grid;
  }
}


/* Cargo Load Filters */
.cargo-load-filters {
  display: grid;
  grid-template-columns:
    minmax(170px, 0.9fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    auto;
  gap: 12px;
  align-items: end;
  padding: 15px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.cargo-load-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cargo-load-filters label > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.cargo-load-filters input,
.cargo-load-filters select {
  width: 100%;
  min-width: 0;
  background: #ffffff;
}

.cargo-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cargo-filter-actions button {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .cargo-load-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cargo-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .cargo-load-filters {
    grid-template-columns: 1fr;
  }

  .cargo-filter-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* Cargo Load Detail Foundation */
.cargo-load-detail-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 13px;
}

.cargo-load-detail-section-heading h4 {
  margin: 3px 0 0;
}

.cargo-package-progress {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #f8fafc;
}

.cargo-package-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ef;
}

.cargo-package-progress-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #2f8f62;
  transition: width 180ms ease;
}

.cargo-package-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: #607286;
  font-size: 12px;
}

.cargo-package-progress-label strong {
  color: #2d435b;
}

.cargo-progress-percentage {
  color: #174d78;
  font-size: 19px;
}

.cargo-package-totals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.cargo-detail-placeholder {
  background: #fbfcfe;
}

.cargo-detail-placeholder > div {
  display: grid;
  gap: 3px;
}

.cargo-detail-placeholder h4 {
  margin: 0;
}

.cargo-detail-placeholder p {
  margin: 9px 0 0;
  color: #687a8d;
  line-height: 1.6;
}

@media (max-width: 650px) {
  .cargo-package-progress-label,
  .cargo-load-detail-section-heading {
    display: grid;
  }

  .cargo-package-totals,
  .cargo-detail-status-grid {
    grid-template-columns: 1fr;
  }
}



/* Receiving Exception Workspace */

.receiving-exception-workspace {
  display: grid;
  gap: 20px;
}

.receiving-exception-filters {
  display: grid;
  grid-template-columns:
    minmax(220px,1.15fr)
    minmax(170px,.8fr)
    minmax(220px,1.15fr)
    auto;
  gap:12px;
  align-items:end;
  padding:16px;
  border:1px solid #dce5ef;
  border-radius:12px;
  background:#fff;
}

.receiving-exception-filters label{
  display:grid;
  gap:6px;
}

.receiving-exception-filters label>span{
  font-size:12px;
  font-weight:700;
  color:#607286;
}

.receiving-exception-filter-actions{
  display:flex;
  gap:8px;
}

.receiving-exception-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, .65fr);
  gap: 18px;
  align-items: start;
}

.receiving-exception-list{
  display:grid;
  gap:14px;
}

.receiving-exception-detail {
  position: sticky;
  top: 18px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
}

.receiving-exception-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.receiving-exception-detail-heading h3 {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: #233d57;
  font-size: 18px;
}

.receiving-exception-detail-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.receiving-exception-detail-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f6f8fb;
}

.receiving-exception-detail-grid span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.receiving-exception-detail-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.receiving-exception-detail-note {
  margin-top: 18px;
  padding: 12px;
  border-radius: 8px;
  background: #f6f8fb;
}

.receiving-exception-detail-note p {
  margin: 6px 0 0;
  color: #607286;
  font-size: 13px;
  line-height: 1.55;
}

.receiving-exception-resolve-section,
.receiving-exception-resolve-complete {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #f0c36a;
  border-radius: 10px;
  background: #fffaf0;
}

.receiving-exception-resolve-field {
  display: grid;
  gap: 7px;
}

.receiving-exception-resolve-field > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.receiving-exception-resolve-field textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid #c9d4e1;
  background: #ffffff;
  color: #263f59;
  line-height: 1.5;
}

.receiving-exception-resolve-field textarea:focus {
  border-color: #5b91bd;
  outline: 3px solid #dbeaf7;
}

.receiving-exception-resolve-field textarea:disabled {
  background: #edf2f7;
  color: #718194;
}

.receiving-exception-resolve-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.receiving-exception-resolve-actions button {
  background: #18794e;
}

.receiving-exception-resolve-actions button:disabled {
  cursor: wait;
}

.receiving-exception-resolve-complete {
  border-color: #a8d8bc;
  background: #f1faf5;
}

.receiving-exception-resolve-complete strong {
  display: block;
  margin-top: 6px;
  color: #18794e;
  font-size: 14px;
}

.receiving-exception-resolve-complete p {
  margin: 7px 0 0;
  color: #567064;
  font-size: 13px;
  line-height: 1.5;
}

.receiving-exception-audit-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e9f1;
}

.receiving-exception-detail-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.receiving-exception-detail-section-heading h4 {
  margin: 5px 0 0;
  color: #263f59;
  font-size: 15px;
}

.receiving-exception-detail-section-heading > strong {
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf2f7;
  color: #50657b;
  font-size: 12px;
}

.receiving-exception-audit-list {
  display: grid;
}

.receiving-exception-audit-event {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
}

.receiving-exception-audit-event:not(:last-child)::before {
  position: absolute;
  top: 15px;
  bottom: -6px;
  left: 6px;
  width: 2px;
  background: #dce5ef;
  content: "";
}

.receiving-exception-audit-marker {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #6b7f93;
  box-shadow: 0 0 0 1px #bac8d6;
}

.receiving-exception-audit-event.created
.receiving-exception-audit-marker {
  background: #d97706;
}

.receiving-exception-audit-event.resolved
.receiving-exception-audit-marker {
  background: #18794e;
}

.receiving-exception-audit-content {
  min-width: 0;
  padding: 0 0 19px;
}

.receiving-exception-audit-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.receiving-exception-audit-heading > div {
  min-width: 0;
}

.receiving-exception-audit-sequence {
  display: block;
  color: #718194;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.receiving-exception-audit-heading strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #263f59;
  font-size: 13px;
}

.receiving-exception-audit-transition {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf2f7;
  color: #50657b;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.receiving-exception-audit-reason {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: #607286;
  font-size: 12px;
  line-height: 1.5;
}

.receiving-exception-audit-empty,
.receiving-exception-detail-error {
  padding: 15px;
  border: 1px dashed #cbd6e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #687a8d;
  font-size: 13px;
}

.receiving-exception-detail-error {
  border-color: #f1b7b2;
  background: #fff7f6;
  color: #b42318;
}

.receiving-exception-detail-empty {
  margin: 0;
}

.receiving-exception-card {
  padding: 18px;
  border: 1px solid #dce5ef;
  border-left: 5px solid #b42318;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
}

.receiving-exception-card.state-open {
  border-left-color: #d97706;
}

.receiving-exception-card.state-resolved {
  border-left-color: #2f8f62;
}

.receiving-exception-card[role="button"] {
  cursor: pointer;
}

.receiving-exception-card[role="button"]:focus-visible {
  outline: 3px solid #94b9dc;
  outline-offset: 2px;
}

.receiving-exception-card.selected {
  border-color: #356d9c;
  border-left-color: #356d9c;
  box-shadow:
    0 0 0 2px #dbeaf7,
    0 4px 14px #25364d14;
}

.receiving-exception-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.receiving-exception-card-heading h3 {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: #233d57;
  font-size: 18px;
}

.receiving-exception-state-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff1ef;
  color: #b42318;
  font-size: 12px;
  font-weight: 750;
}

.receiving-exception-state-badge.state-open {
  background: #fff4db;
  color: #8a5b00;
}

.receiving-exception-state-badge.state-resolved {
  background: #e7f6ed;
  color: #18794e;
}



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

.receiving-exception-card-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f6f8fb;
}

.receiving-exception-card-grid span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.receiving-exception-card-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.receiving-exception-empty,
.receiving-exception-loading,
.receiving-exception-error {
  border: 1px solid #dce5ef;
}

.receiving-exception-loading {
  color: #607286;
}

.receiving-exception-error {
  border-color: #f1b7b2;
  background: #fff7f6;
  color: #b42318;
}



@media (max-width: 900px) {
  .receiving-exception-layout {
    grid-template-columns: 1fr;
  }

  .receiving-exception-detail {
    position: static;
  }

  .receiving-exception-filters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .receiving-exception-filter-actions {
    grid-column: 1 / -1;
  }

  .receiving-exception-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .receiving-exception-filters {
    grid-template-columns: 1fr;
  }

  .receiving-exception-filter-actions {
    grid-column: auto;
    flex-wrap: wrap;
  }

  .receiving-exception-card-heading,
  .receiving-exception-detail-heading,
  .receiving-exception-detail-section-heading,
  .receiving-exception-audit-heading {
    display: grid;
    gap: 10px;
  }

  .receiving-exception-audit-transition {
    justify-self: start;
    white-space: normal;
  }

  .receiving-exception-state-badge {
    justify-self: start;
  }

  .receiving-exception-card-grid {
    grid-template-columns: 1fr;
  }
}


/* Cargo Timeline Workspace */
.cargo-timeline {
  display: grid;
}

.cargo-timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
}

.cargo-timeline-event:not(:last-child)::before {
  position: absolute;
  top: 15px;
  bottom: -7px;
  left: 6px;
  width: 2px;
  background: #dce5ef;
  content: "";
}

.cargo-timeline-marker {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #6b7f93;
  box-shadow: 0 0 0 1px #bac8d6;
}

.cargo-timeline-event.created .cargo-timeline-marker {
  background: #18794e;
}

.cargo-timeline-event.checklist .cargo-timeline-marker {
  background: #0877c9;
}

.cargo-timeline-event-content {
  min-width: 0;
  padding: 0 0 20px;
}

.cargo-timeline-event-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 13px;
}

.cargo-timeline-event-heading > div {
  min-width: 0;
}

.cargo-timeline-action {
  display: block;
  color: #263f59;
  font-size: 14px;
  font-weight: 800;
}

.cargo-timeline-event-heading strong {
  display: block;
  margin-top: 3px;
  color: #607286;
  font-size: 12px;
}

.cargo-timeline-event-heading time {
  flex: 0 0 auto;
  color: #718194;
  font-size: 11px;
  white-space: nowrap;
}

.cargo-timeline-entity {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf2f7;
  color: #50657b;
  font-size: 10px;
  font-weight: 750;
}

.cargo-timeline-details {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
}

.cargo-timeline-details > div {
  display: grid;
  grid-template-columns: minmax(105px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #f6f8fb;
}

.cargo-timeline-details dt {
  color: #718194;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.cargo-timeline-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #40566f;
  font-size: 11px;
}

.cargo-timeline-loading,
.cargo-timeline-empty,
.cargo-timeline-error {
  padding: 17px;
  border: 1px dashed #cbd6e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #687a8d;
  font-size: 13px;
}

.cargo-timeline-error {
  border-color: #f1b7b2;
  background: #fff7f6;
  color: #b42318;
}

@media (max-width: 650px) {
  .cargo-timeline-event-heading {
    display: grid;
  }

  .cargo-timeline-details > div {
    grid-template-columns: 1fr;
  }
}


/* Receiving Workspace */
.receiving-workspace {
  display: grid;
  gap: 20px;
}

.receiving-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.receiving-stat {
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.receiving-stat span {
  color: #687a8d;
  font-size: 12px;
  font-weight: 700;
}

.receiving-stat strong {
  display: block;
  margin-top: 5px;
  color: #174d78;
  font-size: 28px;
}

.receiving-stat.active strong {
  color: #0877c9;
}

.receiving-stat.partial strong,
.receiving-stat.outstanding strong {
  color: #9a6700;
}

.receiving-stat.completed strong,
.receiving-stat.received strong {
  color: #18794e;
}

.receiving-filters {
  display: grid;
  grid-template-columns:
    minmax(170px, 0.9fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    auto;
  gap: 12px;
  align-items: end;
  padding: 15px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.receiving-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.receiving-filters label > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.receiving-filters input,
.receiving-filters select {
  width: 100%;
  min-width: 0;
  background: #ffffff;
}

.receiving-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.receiving-filter-actions button {
  white-space: nowrap;
}

.receiving-master-detail {
  display: grid;
  grid-template-columns:
    minmax(390px, 0.95fr)
    minmax(430px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.receiving-list {
  display: grid;
  gap: 13px;
}

.receiving-card {
  cursor: pointer;
  padding: 18px;
  border: 1px solid #dce5ef;
  border-left: 5px solid #6b7f93;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px #25364d0f;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.receiving-card.state-receiving {
  border-left-color: #0877c9;
}

.receiving-card.state-partially_received {
  border-left-color: #d29a14;
}

.receiving-card.state-received {
  border-left-color: #2f8f62;
}

.receiving-card:hover {
  background: #f8fbfe;
}

.receiving-card.selected {
  border-color: #87bce1;
  background: #f1f8fd;
  box-shadow:
    inset 4px 0 0 #0877c9,
    0 3px 14px rgba(37, 54, 77, 0.09);
}

.receiving-card:focus-visible {
  outline: 3px solid rgba(8, 119, 201, 0.28);
  outline-offset: 2px;
}

.receiving-card-heading,
.receiving-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.receiving-card-heading h3 {
  margin: 6px 0 0;
  color: #233d57;
  font-size: 18px;
}

.receiving-reference {
  color: #4f6a84;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.4px;
}

.receiving-state-badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf2f7;
  color: #40566f;
  font-size: 12px;
  font-weight: 750;
}

.receiving-state-badge.state-receiving {
  background: #e6f3fc;
  color: #086cae;
}

.receiving-state-badge.state-partially_received {
  background: #fff4db;
  color: #8a5b00;
}

.receiving-state-badge.state-received {
  background: #e7f6ed;
  color: #18794e;
}

.receiving-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.receiving-card-grid > div,
.receiving-detail-field {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f6f8fb;
}

.receiving-card-grid span,
.receiving-detail-field span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.receiving-card-grid strong,
.receiving-detail-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.receiving-detail-workspace {
  position: sticky;
  top: 18px;
  min-width: 0;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.receiving-detail-empty {
  padding: 42px 30px;
}

.receiving-detail-empty h3 {
  margin: 8px 0;
  color: #263f59;
  font-size: 22px;
}

.receiving-detail-empty p {
  color: #687a8d;
  line-height: 1.65;
}

.receiving-detail-header {
  padding: 21px;
  border-bottom: 1px solid #e5ebf2;
  background: #f8fafc;
}

.receiving-detail-header .receiving-reference {
  display: block;
  margin-top: 8px;
}

.receiving-detail-header h3 {
  margin: 5px 0 0;
  color: #233d57;
  font-size: 23px;
}

.receiving-detail-section {
  padding: 18px 21px;
  border-bottom: 1px solid #edf1f5;
}

.receiving-detail-section:last-child {
  border-bottom: 0;
}

.receiving-detail-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 13px;
}

.receiving-detail-section-heading h4 {
  margin: 3px 0 0;
  color: #263f59;
  font-size: 14px;
}

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

.receiving-progress {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #f8fafc;
}

.receiving-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ef;
}

.receiving-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: #2f8f62;
  transition: width 180ms ease;
}

.receiving-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: #607286;
  font-size: 12px;
}

.receiving-progress-label strong {
  color: #2d435b;
}

.receiving-progress-percentage {
  color: #174d78;
  font-size: 19px;
}

.receiving-read-only-note {
  background: #fbfcfe;
}

.receiving-read-only-note p {
  margin: 0;
  color: #607286;
  line-height: 1.6;
}

.receiving-empty,
.receiving-error {
  border: 1px solid #dce5ef;
}

.receiving-error {
  color: #b42318;
}

@media (max-width: 1180px) {
  .receiving-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .receiving-filter-actions {
    grid-column: 1 / -1;
  }

  .receiving-master-detail {
    grid-template-columns: 1fr;
  }

  .receiving-detail-workspace {
    position: static;
  }
}

@media (max-width: 700px) {
  .receiving-stats,
  .receiving-filters,
  .receiving-card-grid,
  .receiving-detail-grid {
    grid-template-columns: 1fr;
  }

  .receiving-filter-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr;
  }

  .receiving-card-heading,
  .receiving-detail-header,
  .receiving-detail-section-heading,
  .receiving-progress-label {
    display: grid;
  }
}


/* Receiving Update Controls */
.receiving-update-controls {
  background: #ffffff;
}

.receiving-update-guidance {
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #52677d;
  font-size: 13px;
  line-height: 1.6;
}

.receiving-update-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.receiving-update-field > span {
  color: #607286;
  font-size: 12px;
  font-weight: 750;
}

.receiving-update-field input,
.receiving-update-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff;
}

.receiving-update-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.receiving-update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.receiving-update-action {
  min-width: 145px;
}

.receiving-complete-action {
  background: #18794e;
}

.receiving-complete-action:hover {
  background: #12623f;
}

.receiving-update-action:disabled,
.receiving-update-field input:disabled,
.receiving-update-field textarea:disabled {
  cursor: wait;
  opacity: 0.58;
}

.receiving-update-terminal {
  background: #f8fafc;
}

.receiving-update-terminal p {
  margin: 7px 0 0;
  color: #687a8d;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .receiving-update-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .receiving-update-action {
    width: 100%;
  }
}


/* Receiving Start Workspace */
.receiving-start-workspace {
  padding: 17px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #ffffff;
}

.receiving-start-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 15px;
}

.receiving-start-heading h3 {
  margin: 4px 0;
  color: #263f59;
  font-size: 18px;
}

.receiving-start-heading p {
  margin: 0;
  color: #687a8d;
  line-height: 1.55;
}

.receiving-start-layout {
  display: grid;
  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(390px, 1.1fr);
  gap: 14px;
  align-items: start;
}

.receiving-start-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
}

.receiving-start-card {
  cursor: pointer;
  padding: 14px;
  border: 1px solid #dce5ef;
  border-left: 4px solid #75889b;
  border-radius: 10px;
  background: #ffffff;
}

.receiving-start-card:hover {
  background: #f8fbfe;
}

.receiving-start-card.selected {
  border-color: #87bce1;
  border-left-color: #0877c9;
  background: #f1f8fd;
  box-shadow: inset 3px 0 0 #0877c9;
}

.receiving-start-card:focus-visible {
  outline: 3px solid rgba(8, 119, 201, 0.25);
  outline-offset: 2px;
}

.receiving-start-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.receiving-start-card-heading h4 {
  margin: 5px 0 0;
  color: #263f59;
}

.receiving-start-package-count {
  color: #52677d;
  font-size: 12px;
  font-weight: 750;
}

.receiving-start-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.receiving-start-card-grid > div,
.receiving-start-detail-field {
  min-width: 0;
  padding: 9px;
  border-radius: 7px;
  background: #f6f8fb;
}

.receiving-start-card-grid span,
.receiving-start-detail-field span,
.receiving-start-field > span,
.receiving-start-generated-id > span {
  display: block;
  margin-bottom: 4px;
  color: #718194;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.receiving-start-card-grid strong,
.receiving-start-detail-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #2d435b;
  font-size: 13px;
}

.receiving-start-detail {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: #ffffff;
}

.receiving-start-detail-empty {
  padding: 26px;
}

.receiving-start-detail-empty h4 {
  margin: 7px 0;
  color: #263f59;
}

.receiving-start-detail-empty p {
  margin: 0;
  color: #687a8d;
  line-height: 1.6;
}

.receiving-start-detail-header {
  padding: 16px;
  border-bottom: 1px solid #e6ecf2;
  background: #f8fafc;
}

.receiving-start-detail-header h4 {
  margin: 5px 0 0;
  color: #263f59;
  font-size: 18px;
}

.receiving-start-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 15px;
}

.receiving-start-field {
  display: grid;
  gap: 6px;
  margin: 0 15px 12px;
}

.receiving-start-field input,
.receiving-start-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: #ffffff;
}

.receiving-start-field textarea {
  resize: vertical;
}

.receiving-start-generated-id {
  margin: 0 15px 15px;
  padding: 10px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  background: #f8fafc;
}

.receiving-start-generated-id strong {
  overflow-wrap: anywhere;
  color: #174d78;
}

#start-receiving-button {
  margin-top: 14px;
}

.receiving-start-empty {
  border: 1px solid #dce5ef;
}

@media (max-width: 1000px) {
  .receiving-start-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .receiving-start-heading,
  .receiving-start-card-heading {
    display: grid;
  }

  .receiving-start-card-grid,
  .receiving-start-detail-grid {
    grid-template-columns: 1fr;
  }

  #start-receiving-button {
    width: 100%;
  }
}


/* Receiving Timeline Workspace */

.receiving-timeline-section {
  overflow: hidden;
}

.receiving-timeline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.receiving-timeline-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.receiving-timeline-summary span {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.receiving-timeline-summary strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.receiving-timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 12px;
}

.receiving-timeline::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 18px;
  width: 2px;
  background: var(--border);
  content: "";
}

.receiving-timeline-event {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 18px;
}

.receiving-timeline-event:last-child {
  padding-bottom: 0;
}

.receiving-timeline-marker {
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 15px;
  border: 3px solid var(--panel);
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--border);
}

.receiving-timeline-event.started
.receiving-timeline-marker {
  background: #4c9aff;
}

.receiving-timeline-event.partial
.receiving-timeline-marker {
  background: #f0b429;
}

.receiving-timeline-event.completed
.receiving-timeline-marker {
  background: #36b37e;
}

.receiving-timeline-event-content {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.receiving-timeline-event-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.receiving-timeline-event-heading > div {
  display: grid;
  gap: 4px;
}

.receiving-timeline-sequence {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.receiving-timeline-transition {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.receiving-timeline-reason {
  margin: 10px 0 0;
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.receiving-timeline-loading,
.receiving-timeline-empty,
.receiving-timeline-error {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  color: var(--muted);
  text-align: center;
}

.receiving-timeline-error {
  color: var(--danger);
}

@media (max-width: 760px) {
  .receiving-timeline-summary {
    grid-template-columns: 1fr;
  }

  .receiving-timeline-event-heading {
    display: grid;
  }

  .receiving-timeline-transition {
    width: fit-content;
    white-space: normal;
  }
}

.action-plan-workspace-foundation {
  display: grid;
  gap: 16px;
}

.action-plan-list {
  display: grid;
  gap: 12px;
}

.action-plan-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.action-plan-card:hover,
.action-plan-card:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translateY(-1px);
}

.action-plan-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.action-plan-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.action-plan-card-heading h3 {
  margin: 4px 0 0;
}

.action-plan-status {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.action-plan-reason {
  margin: 12px 0;
  color: var(--text-muted);
}

.action-plan-card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.action-plan-card-grid div {
  display: grid;
  gap: 4px;
}

.action-plan-card-grid span {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.action-plan-card-grid strong {
  overflow-wrap: anywhere;
}

.action-plan-error {
  border-color: var(--danger);
}

.action-plan-summary {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.action-plan-summary-card {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.action-plan-summary-card span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.action-plan-summary-card strong {
  font-size: 1.55rem;
}

.action-plan-filters {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.action-plan-filters label {
  display: grid;
  gap: 6px;
}

.action-plan-filters label > span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.action-plan-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-plan-results-count {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.action-plan-master-detail {
  display: grid;
  grid-template-columns:
    minmax(320px, 0.9fr)
    minmax(420px, 1.4fr);
  gap: 16px;
  align-items: start;
}

.action-plan-detail {
  position: sticky;
  top: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.action-plan-detail-empty {
  display: grid;
  gap: 8px;
  min-height: 220px;
  place-content: center;
  text-align: center;
  color: var(--text-muted);
}

.action-plan-detail-empty h3,
.action-plan-detail-empty p {
  margin: 0;
}

.action-plan-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.action-plan-detail-header h3 {
  margin: 5px 0 8px;
}

.action-plan-detail-header p {
  margin: 0;
  color: var(--text-muted);
}

.action-plan-detail-section {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.action-plan-detail-section-heading h4 {
  margin: 0;
}

.action-plan-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.action-plan-detail-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.action-plan-detail-field span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.action-plan-detail-field strong {
  overflow-wrap: anywhere;
}

.action-plan-payload {
  display: grid;
  gap: 10px;
}

.action-plan-payload-row {
  display: grid;
  grid-template-columns:
    minmax(130px, 0.4fr)
    minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.action-plan-payload-row > span {
  padding-top: 9px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.action-plan-payload-row pre,
.action-plan-developer-detail pre {
  max-width: 100%;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-radius: 10px;
  background: var(--surface-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.action-plan-task-empty,
.action-plan-payload-empty {
  min-height: auto;
  padding: 14px;
}

.action-plan-developer-detail {
  margin-top: 18px;
}

.action-plan-developer-detail summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
}

.action-plan-developer-detail pre {
  margin-top: 10px;
}

@media (max-width: 980px) {
  .action-plan-master-detail {
    grid-template-columns: 1fr;
  }

  .action-plan-detail {
    position: static;
  }
}

@media (max-width: 620px) {
  .action-plan-detail-header,
  .action-plan-payload-row {
    grid-template-columns: 1fr;
    display: grid;
  }
}


/* =========================================================
   ACCESS ADMINISTRATION WORKSPACE
   ========================================================= */

.administration-workspace {
  display: grid;
  gap: 18px;
}

.administration-panel {
  background: #ffffff;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px #25364d12;
}

.administration-panel-heading,
.administration-modal-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.administration-panel-heading h3,
.administration-modal-heading h2 {
  margin: 4px 0 6px;
}

.administration-panel-heading p {
  margin: 0;
  color: #60758c;
}

.administration-message {
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.administration-message.info {
  background: #eaf5ff;
  color: #235477;
  border-color: #cce5fa;
}

.administration-message.success {
  background: #eaf8f0;
  color: #216943;
  border-color: #bfe5cf;
}

.administration-message.warning {
  background: #fff7df;
  color: #74520e;
  border-color: #ecd99d;
}

.administration-message.error {
  background: #fff0f0;
  color: #8a2e2e;
  border-color: #efc6c6;
}

.administration-form {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.administration-form label {
  display: grid;
  gap: 7px;
  color: #40566e;
  font-weight: 650;
}

.administration-form input,
.administration-form select {
  width: 100%;
  background: #ffffff;
}

.administration-form fieldset {
  grid-column: 1 / -1;
  border: 1px solid #d6e0ea;
  border-radius: 9px;
  padding: 14px;
}

.administration-form legend {
  padding: 0 7px;
  color: #40566e;
  font-weight: 700;
}

.administration-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.administration-checkbox {
  grid-column: 1 / -1;
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.administration-checkbox input {
  width: auto;
}

.administration-role-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));
  gap: 9px;
}

.administration-role-option {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #f5f8fb;
  border: 1px solid #dce5ef;
  border-radius: 8px;
}

.administration-role-option input {
  width: auto;
}

.administration-table-wrapper {
  overflow-x: auto;
}

.administration-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.administration-table th,
.administration-table td {
  padding: 13px 12px;
  text-align: left;
  border-bottom: 1px solid #e5ebf2;
  vertical-align: top;
}

.administration-table th {
  color: #536a82;
  font-size: 12px;
  letter-spacing: .45px;
  text-transform: uppercase;
  background: #f7f9fc;
}

.administration-table td strong {
  display: block;
  color: #172b43;
}

.administration-username {
  display: block;
  color: #718298;
  font-size: 13px;
  margin-top: 4px;
}

.administration-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.administration-role-badge {
  display: inline-flex;
  padding: 4px 8px;
  background: #e9f2fb;
  color: #295b83;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.administration-status {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.administration-status.active {
  background: #e4f6ec;
  color: #26734b;
}

.administration-status.disabled {
  background: #f1f2f4;
  color: #697584;
}

.administration-loading,
.administration-empty {
  padding: 34px;
  text-align: center;
  color: #687b90;
  background: #f8fafc;
  border-radius: 9px;
}

.administration-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #10243ebf;
  overflow-y: auto;
}

.administration-modal.hidden {
  display: none;
}

.administration-modal-panel {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 70px #07152566;
}

.administration-password-reset {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #dce5ef;
}

@media (max-width: 760px) {
  .administration-panel-heading,
  .administration-modal-heading {
    flex-direction: column;
  }

  .administration-form {
    grid-template-columns: 1fr;
  }

  .administration-modal {
    padding: 10px;
  }

  .administration-modal-panel {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }
}

/* =========================================================
   FAK Manifest Operations
   ========================================================= */

.fak-legacy-cargo-hidden {
  display: none !important;
}

.fak-manifest-operations {
  padding: 22px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background: #fff;
}

.fak-manifest-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.fak-manifest-heading h2 {
  margin: 4px 0;
  font-size: 24px;
}

.fak-manifest-heading p {
  margin: 0;
  color: #61748a;
}

.fak-manifest-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.fak-manifest-summary > div {
  padding: 15px 16px;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: #f8fafc;
}

.fak-manifest-summary strong {
  display: block;
  color: #10243e;
  font-size: 22px;
}

.fak-manifest-summary span {
  color: #687a8e;
  font-size: 12px;
}

.fak-manifest-layout {
  display: grid;
  grid-template-columns:
    minmax(260px, 340px)
    minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.fak-manifest-list {
  min-width: 0;
}

.fak-manifest-list-heading,
.fak-manifest-completed-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 3px;
  color: #50657c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.fak-manifest-card {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  padding: 14px;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  background: #fff;

  /*
   * Important:
   * global button rule is white text.
   * Manifest cards have a white background.
   */
  color: #16243a;

  text-align: left;
  cursor: pointer;
}

.fak-manifest-card:hover {
  background: #f6f9fc;
  filter: none;
}

.fak-manifest-card.active {
  border-color: #0877c9;
  box-shadow:
    inset 3px 0 0 #0877c9;
  background: #f1f8fe;
}

.fak-manifest-card.completed {
  background: #f9fafb;
}

.fak-manifest-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fak-manifest-number {
  display: block;
  color: #10243e;
  font-size: 16px;
}

.fak-manifest-customer {
  display: block;
  margin-top: 3px;
  color: #64778c;
  font-size: 12px;
}

.fak-manifest-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.fak-manifest-status.current {
  background: #e8f5ee;
  color: #147a46;
}

.fak-manifest-status.completed {
  background: #edf1f5;
  color: #607184;
}

.fak-manifest-card-metrics {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: #63768a;
  font-size: 11px;
}

.fak-manifest-card-metrics strong {
  color: #273d55;
}

.fak-manifest-card-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #edf0f4;
  color: #66798d;
  font-size: 11px;
}

.fak-manifest-card-container strong {
  color: #16243a;
}

.fak-manifest-completed-group {
  margin-top: 16px;
  border-top: 1px solid #e4e9ef;
}

.fak-manifest-completed-group summary {
  cursor: pointer;
}

.fak-manifest-completed-list {
  padding-top: 4px;
}

.fak-manifest-detail {
  min-width: 0;
}

.fak-manifest-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.fak-manifest-detail-header h3 {
  margin: 4px 0;
  color: #10243e;
  font-size: 22px;
}

.fak-manifest-detail-header p {
  margin: 0;
  color: #65788c;
  font-size: 12px;
}

.fak-manifest-detail-container {
  text-align: right;
}

.fak-manifest-detail-container span {
  display: block;
  color: #6c7d90;
  font-size: 11px;
}

.fak-manifest-detail-container strong {
  display: block;
  margin-top: 4px;
  color: #10243e;
}

.fak-manifest-detail-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.fak-manifest-detail-stats > div {
  padding: 10px 12px;
  border: 1px solid #e2e7ed;
  border-radius: 8px;
  background: #f8fafc;
}

.fak-manifest-detail-stats strong {
  display: block;
  color: #10243e;
  font-size: 18px;
}

.fak-manifest-detail-stats span {
  color: #6c7d90;
  font-size: 11px;
}

.fak-manifest-shipment-table {
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
}

.fak-manifest-shipment-row {
  display: grid;
  grid-template-columns:
    minmax(190px, 2fr)
    minmax(115px, 1fr)
    80px
    80px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f3;
  color: #16243a;
}

.fak-manifest-shipment-row:last-child {
  border-bottom: 0;
}

.fak-manifest-shipment-row.header {
  background: #f7f9fb;
  color: #607286;
  font-size: 11px;
  font-weight: 700;
}

.fak-manifest-shipment-row strong {
  color: #10243e;
}

.fak-manifest-shipment-row small {
  display: block;
  margin-top: 3px;
  color: #7a8998;
  font-size: 10px;
}

.fak-manifest-shipment-row.received {
  background: #f4fbf7;
}

.fak-manifest-shipment-row.partial {
  background: #fffaf0;
}

.fak-manifest-shipment-row.rolled,
.fak-manifest-shipment-row.removed {
  opacity: .55;
}

.empty-state.compact {
  padding: 18px;
}

@media (max-width: 900px) {
  .fak-manifest-layout {
    grid-template-columns: 1fr;
  }

  .fak-manifest-summary,
  .fak-manifest-detail-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

.fak-packing-controls {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d9e1ea;
  border-radius: 12px;
  background: #f8fafc;
}

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

.fak-packing-fields label {
  display: grid;
  gap: 6px;
}

.fak-packing-fields label span {
  font-size: 12px;
  font-weight: 700;
  color: #526171;
}

.fak-packing-fields input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #c9d3df;
  border-radius: 8px;
  background: #fff;
  color: #16243a;
  box-sizing: border-box;
}

.fak-packing-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.fak-packing-actions button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.fak-packing-actions .primary {
  font-weight: 700;
}

.fak-packing-completed-meta {
  margin-top: 12px;
  font-size: 13px;
  color: #526171;
}

@media (max-width: 900px) {
  .fak-packing-fields {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   A LINKS CONTAINER OPERATIONS
   ========================================================= */

.alinks-devanning-operations {
  margin-bottom: 24px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.alinks-devanning-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.alinks-devanning-heading h2 {
  margin: 4px 0 4px;
}

.alinks-devanning-heading p {
  margin: 0;
  opacity: 0.72;
}

.alinks-devanning-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.alinks-devanning-summary > div {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}

.alinks-devanning-summary strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.alinks-devanning-summary span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.68;
}

.alinks-devanning-list {
  display: grid;
  gap: 10px;
}

.alinks-container-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}

.alinks-container-main {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.3fr)
    minmax(120px, 0.85fr)
    minmax(90px, 0.7fr)
    minmax(120px, 0.9fr)
    minmax(100px, 0.8fr)
    minmax(120px, 0.9fr)
    minmax(135px, 1fr)
    auto;
  gap: 12px;
  align-items: end;
}

.alinks-container-identity strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.alinks-container-identity small {
  display: block;
  margin-top: 4px;
  opacity: 0.62;
}

.alinks-field,
.alinks-control {
  display: grid;
  gap: 6px;
}

.alinks-field > span,
.alinks-control > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.66;
}

.alinks-field input {
  width: 100%;
  box-sizing: border-box;
}

.alinks-status-button {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 9px;
  white-space: nowrap;
}

.alinks-status-button.complete {
  font-weight: 700;
}

.alinks-status-button.pending {
  opacity: 0.78;
}

.alinks-save-button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 1250px) {
  .alinks-container-main {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .alinks-devanning-heading {
    display: grid;
  }

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

  .alinks-container-main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .alinks-devanning-summary,
  .alinks-container-main {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   A LINKS CONTAINER OPERATIONS — COMPACT PRODUCTION VIEW
   ========================================================= */

.alinks-devanning-operations {
  padding: 18px 20px;
}

.alinks-devanning-heading {
  margin-bottom: 12px;
}

.alinks-devanning-heading h2 {
  margin-bottom: 2px;
}

.alinks-devanning-summary {
  grid-template-columns:
    repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.alinks-devanning-summary > div {
  padding: 10px 14px;
}

.alinks-devanning-summary strong {
  font-size: 20px;
}

.alinks-devanning-summary span {
  margin-top: 3px;
}

/*
 * Do not allow 20+ historical containers to push
 * FAK Operations several screens below the fold.
 */
.alinks-devanning-list {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  gap: 6px;
}

.alinks-container-card {
  padding: 9px 12px;
  border-radius: 9px;
  background: #ffffff;
}

.alinks-container-main {
  grid-template-columns:
    minmax(150px, 1.25fr)
    minmax(130px, 0.9fr)
    minmax(82px, 0.6fr)
    minmax(116px, 0.85fr)
    minmax(100px, 0.75fr)
    minmax(118px, 0.85fr)
    minmax(140px, 1fr)
    64px;
  gap: 9px;
  align-items: center;
}

.alinks-container-identity strong {
  margin-top: 1px;
  font-size: 14px;
}

.alinks-container-identity small {
  margin-top: 2px;
  font-size: 11px;
}

.alinks-field,
.alinks-control {
  gap: 4px;
}

.alinks-field > span,
.alinks-control > span {
  font-size: 10px;
}

.alinks-field input {
  min-height: 34px;
  height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  border-radius: 7px;
}

/*
 * Give the native calendar control enough room so its
 * calendar icon does not visually collide with Our Site.
 */
.alinks-field input[type="date"] {
  min-width: 130px;
  padding-right: 8px;
}

.alinks-reference-field input {
  min-width: 130px;
}

.alinks-status-button {
  min-height: 34px;
  height: 34px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1;
}

/*
 * Pending state should not visually look like "done".
 */
.alinks-status-button.pending {
  background: #eef3f8;
  border-color: #c9d6e3;
  color: #3d536a;
  opacity: 1;
}

/*
 * Completed / positive state remains visually stronger.
 */
.alinks-status-button.complete {
  background: #087dcc;
  border-color: #087dcc;
  color: #ffffff;
  font-weight: 700;
}

.alinks-save-button {
  min-height: 34px;
  height: 34px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
}

.alinks-devanning-list::-webkit-scrollbar {
  width: 8px;
}

.alinks-devanning-list::-webkit-scrollbar-thumb {
  background: #c6d2de;
  border-radius: 8px;
}

.alinks-devanning-list::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1450px) {
  .alinks-container-main {
    grid-template-columns:
      minmax(145px, 1.2fr)
      minmax(125px, 0.85fr)
      minmax(78px, 0.6fr)
      minmax(110px, 0.85fr)
      minmax(95px, 0.75fr)
      minmax(112px, 0.85fr)
      minmax(130px, 1fr)
      60px;
    gap: 7px;
  }
}

/* =========================================================
   CARGO OPERATIONS BUSINESS PAGES
   ========================================================= */

.cargo-business-switcher {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.cargo-business-heading h2 {
  margin: 3px 0 4px;
}

.cargo-business-heading p {
  margin: 0 0 14px;
  opacity: 0.7;
}

.cargo-business-buttons {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.cargo-business-button {
  display: grid;
  gap: 5px;
  padding: 15px 18px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
}

.cargo-business-button span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.cargo-business-button strong {
  font-size: 16px;
}

.cargo-business-button.active {
  border-color: #087dcc;
  box-shadow:
    inset 0 0 0 1px #087dcc;
  background: #eef7fd;
}

.business-page-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.business-page-search {
  display: grid;
  gap: 4px;
}

.business-page-search span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

.business-page-search input {
  width: 260px;
  min-height: 38px;
  box-sizing: border-box;
}

#fak-manifest-operations.hidden,
#alinks-devanning-operations.hidden {
  display: none !important;
}

@media (max-width: 800px) {
  .cargo-business-buttons {
    grid-template-columns: 1fr;
  }

  .business-page-actions {
    display: grid;
    justify-content: stretch;
  }

  .business-page-search input {
    width: 100%;
  }
}

/* =========================================================
   CARGO IMPORT / EXPORT TWO-LEVEL NAVIGATION
   ========================================================= */

.cargo-direction-buttons {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cargo-direction-button {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
}

.cargo-direction-button span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.cargo-direction-button strong {
  font-size: 18px;
}

.cargo-direction-button.active {
  border-color: #087dcc;
  box-shadow:
    inset 0 0 0 1px #087dcc;
  background: #eef7fd;
}

.cargo-customer-selector {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cargo-customer-selector.hidden {
  display: none !important;
}

.cargo-customer-heading {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.cargo-business-button small {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.65;
}

@media (max-width: 800px) {
  .cargo-direction-buttons {
    grid-template-columns: 1fr;
  }
}

/* M22.4L Alinks shipment classification */

.alinks-classification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.alinks-classification-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.alinks-classification-badge[
  data-alinks-shipment-type="FCL"
] {
  font-weight: 900;
}

.alinks-classification-badge[
  data-alinks-shipment-type="FAK"
] {
  font-weight: 900;
}

.alinks-classification-badge[
  data-alinks-shipment-type="UNKNOWN"
] {
  opacity: 0.65;
}

.alinks-customer-reference {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 260px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* M22.4N Alinks account reference navigation */

.alinks-reference-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.alinks-reference-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
}

.alinks-reference-button strong {
  min-width: 20px;
  text-align: center;
}

.alinks-reference-button.active {
  font-weight: 800;
}

/* Generic SEA Operations */

.sea-operations {
  margin: 0 0 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 14px;
}

.sea-operations-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.sea-operations-heading h2 {
  margin: 4px 0 6px;
}

.sea-operations-heading p {
  margin: 0;
  color: #64758a;
}

.sea-sync-panel {
  min-width: 190px;
  text-align: right;
}

.sea-sync-panel span,
.sea-sync-panel strong {
  display: block;
}

.sea-sync-panel span {
  color: #64758a;
  font-size: 12px;
}

.sea-sync-panel strong {
  margin: 4px 0 9px;
  font-size: 13px;
}

.sea-operations-summary {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.sea-operations-summary > div {
  padding: 13px;
  background: #f6f8fb;
  border-radius: 9px;
}

.sea-operations-summary strong {
  display: block;
  font-size: 22px;
  color: #0877c9;
}

.sea-operations-summary span {
  display: block;
  margin-top: 3px;
  color: #64758a;
  font-size: 12px;
}

.sea-search-row {
  margin-bottom: 12px;
}

.sea-search-row input {
  width: 100%;
}

.sea-customer-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 12px;
}

.sea-customer-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: #fff;
  color: #28425f;
  border: 1px solid #cbd7e4;
}

.sea-customer-tab strong {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf2f7;
  font-size: 11px;
}

.sea-customer-tab.active {
  background: #0877c9;
  color: #fff;
  border-color: #0877c9;
}

.sea-customer-tab.active strong {
  background: #ffffff2b;
}

.sea-result-summary {
  margin: 2px 0 9px;
  color: #64758a;
  font-size: 12px;
}

.sea-container-table-wrap {
  width: 100%;
  overflow: auto;
  max-height: 720px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
}

.sea-container-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  background: #fff;
}

.sea-container-table th,
.sea-container-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #e7edf4;
  text-align: left;
  font-size: 12px;
  vertical-align: middle;
}

.sea-container-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f6f8fb;
  color: #53677d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.sea-container-table tbody tr:hover {
  background: #f8fbfe;
}

.sea-eta {
  white-space: nowrap;
}

.sea-status {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}

.sea-status.complete {
  background: #e7f6ee;
  color: #23714c;
}

.sea-status.pending {
  background: #fff1df;
  color: #8a5717;
}

@media (max-width: 900px) {
  .sea-operations-heading {
    flex-direction: column;
  }

  .sea-sync-panel {
    text-align: left;
  }

  .sea-operations-summary {
    grid-template-columns:
      repeat(2, minmax(120px, 1fr));
  }
}

/* SEA table compact desktop layout */

.sea-container-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.sea-container-table th,
.sea-container-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sea-container-table th:nth-child(1),
.sea-container-table td:nth-child(1) {
  width: 95px;
}

.sea-container-table th:nth-child(2),
.sea-container-table td:nth-child(2) {
  width: 125px;
}

.sea-container-table th:nth-child(3),
.sea-container-table td:nth-child(3) {
  width: 120px;
}

.sea-container-table th:nth-child(4),
.sea-container-table td:nth-child(4) {
  width: 160px;
}

.sea-container-table th:nth-child(5),
.sea-container-table td:nth-child(5) {
  width: 115px;
}

.sea-container-table th:nth-child(6),
.sea-container-table td:nth-child(6) {
  width: 105px;
}

.sea-container-table th:nth-child(7),
.sea-container-table td:nth-child(7) {
  width: 110px;
}

.sea-container-table th:nth-child(8),
.sea-container-table td:nth-child(8) {
  width: 105px;
}

.sea-container-table th:nth-child(9),
.sea-container-table td:nth-child(9) {
  width: 85px;
}

.sea-container-table th:nth-child(10),
.sea-container-table td:nth-child(10) {
  width: 90px;
}

.sea-container-table-wrap {
  overflow-x: hidden;
}

/* SEA table compact width override — M22.6E-8A */

.sea-container-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.sea-container-table th,
.sea-container-table td {
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ETA */
.sea-container-table th:nth-child(1),
.sea-container-table td:nth-child(1) {
  width: 82px;
}

/* Container */
.sea-container-table th:nth-child(2),
.sea-container-table td:nth-child(2) {
  width: 108px;
}

/* Customer */
.sea-container-table th:nth-child(3),
.sea-container-table td:nth-child(3) {
  width: 100px;
}

/* Reference */
.sea-container-table th:nth-child(4),
.sea-container-table td:nth-child(4) {
  width: 105px;
}

/* Truck */
.sea-container-table th:nth-child(5),
.sea-container-table td:nth-child(5) {
  width: 105px;
}

/* CCP */
.sea-container-table th:nth-child(6),
.sea-container-table td:nth-child(6) {
  width: 90px;
}

/* SEA Status */
.sea-container-table th:nth-child(7),
.sea-container-table td:nth-child(7) {
  width: 92px;
}

/* Wiseway S */
.sea-container-table th:nth-child(8),
.sea-container-table td:nth-child(8) {
  width: 90px;
}

/* AP */
.sea-container-table th:nth-child(9),
.sea-container-table td:nth-child(9) {
  width: 65px;
}

/* Location */
.sea-container-table th:nth-child(10),
.sea-container-table td:nth-child(10) {
  width: 72px;
}

.sea-container-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}


/* M23.7F3 FAK multi-container evidence */

.fak-container-evidence-section {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
}

.fak-container-evidence-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.fak-container-evidence-title h4 {
  margin: 4px 0 0;
  font-size: 18px;
}

.fak-container-evidence-title > strong {
  white-space: nowrap;
  font-size: 13px;
}

.fak-container-evidence-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(240px, 1fr)
    );
  gap: 12px;
}

.fak-container-evidence-card {
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 13px;
  background: #fff;
}

.fak-container-evidence-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fak-container-evidence-heading > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fak-container-evidence-heading strong {
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.fak-container-evidence-sequence {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.62;
}

.fak-container-type-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  font-size: 11px;
  font-weight: 700;
}

.fak-container-evidence-meta {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.fak-container-evidence-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fak-container-evidence-meta span {
  font-size: 11px;
  opacity: 0.62;
}

.fak-container-evidence-meta strong {
  font-size: 13px;
}

.fak-container-evidence-empty {
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  opacity: 0.68;
}

@media (max-width: 720px) {
  .fak-container-evidence-meta {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   M25 AIR IMPORT
   ========================================================= */

.air-business-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.air-business-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.air-business-tab {
  border: 1px solid rgba(22, 36, 58, 0.18);
  background: #fff;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}

.air-business-tab.active {
  background: #16243a;
  color: #fff;
  border-color: #16243a;
}

.air-business-panel {
  min-width: 0;
}

.air-import-summary {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.air-import-summary-card {
  background: #fff;
  border: 1px solid rgba(22, 36, 58, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
}

.air-import-summary-card span {
  display: block;
  font-size: 12px;
  opacity: 0.68;
  margin-bottom: 4px;
}

.air-import-summary-card strong {
  display: block;
  font-size: 24px;
}

.air-import-table-wrap {
  overflow-x: auto;
}

.air-import-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.air-import-table th,
.air-import-table td {
  padding: 11px 12px;
  border-bottom:
    1px solid rgba(22, 36, 58, 0.1);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.air-import-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

.air-import-table td.numeric,
.air-import-table th.numeric {
  text-align: right;
}

.air-import-mawb {
  font-weight: 700;
}

.air-import-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.air-import-status.waiting {
  background: rgba(213, 151, 0, 0.12);
}

.air-import-status.partial {
  background: rgba(196, 91, 36, 0.12);
}

.air-import-status.arrived {
  background: rgba(32, 125, 72, 0.12);
}

.air-import-status.pre-alert {
  background: rgba(50, 96, 168, 0.12);
}

@media (max-width: 900px) {
  .air-import-summary {
    grid-template-columns: 1fr;
  }
}

/* M25.3C AIR business tab visual contract */

.air-business-tab {
  color: #16243a;
}

.air-business-tab.active {
  color: #ffffff;
}


/* =========================================================
   M25.3D3 AIR IMPORT CUSTOMER / READABILITY
   ========================================================= */

.air-import-customer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 3px 0 18px;
}

.air-import-customer-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border:
    1px solid rgba(22, 36, 58, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: #16243a;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.air-import-customer-tab span {
  display: inline-flex;
  min-width: 22px;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 6px;
  background:
    rgba(22, 36, 58, 0.08);
  font-size: 11px;
}

.air-import-customer-tab.active {
  background: #16243a;
  border-color: #16243a;
  color: #ffffff;
}

.air-import-customer-tab.active span {
  background:
    rgba(255, 255, 255, 0.18);
}


/*
 * AIR Import operational columns
 *
 * 1 Status
 * 2 MAWB
 * 3 Flight
 * 4 ETA
 * 5 Pre-alert Pieces
 * 6 NOA Manifested
 * 7 NOA Available
 */

.air-import-table th,
.air-import-table td,
.air-import-table td.numeric {
  text-align: left;
}

.air-import-table th:nth-child(5),
.air-import-table td:nth-child(5) {
  padding-right: 28px;
}

.air-import-table th:nth-child(6),
.air-import-table td:nth-child(6) {
  border-left:
    3px solid rgba(22, 36, 58, 0.20);
  padding-left: 26px;
}

.air-import-table th:nth-child(5) {
  background:
    rgba(40, 89, 145, 0.035);
}

.air-import-table th:nth-child(6),
.air-import-table th:nth-child(7) {
  background:
    rgba(35, 122, 73, 0.045);
}

.air-import-table tbody tr {
  border-bottom:
    1px solid rgba(22, 36, 58, 0.18);
}

.air-import-table tbody tr:nth-child(even) {
  background:
    rgba(22, 36, 58, 0.018);
}

.air-import-table tbody tr:hover {
  background:
    rgba(42, 94, 147, 0.055);
}

.air-import-table tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.air-import-table tbody td:nth-child(5),
.air-import-table tbody td:nth-child(6),
.air-import-table tbody td:nth-child(7) {
  font-variant-numeric: tabular-nums;
}

.air-import-table th:nth-child(5)::before {
  content: "PRE-ALERT";
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.air-import-table th:nth-child(6)::before {
  content: "ARRIVAL / NOA";
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.55;
}


/* M25.3D5 AIR Import search / sort */

.air-import-toolbar {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 4px 0 12px;
}

.air-import-search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 300px;
}

.air-import-search span {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.65;
}

.air-import-search input {
  min-height: 38px;
  border:
    1px solid rgba(22, 36, 58, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #16243a;
  padding: 8px 11px;
  font: inherit;
}

.air-import-sort {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.air-import-sort:hover {
  text-decoration: underline;
}

/* M25.4D2 manual override */

.air-import-manual-override {
  margin: 14px 0 18px;
}

.air-import-manual-override label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

.air-import-manual-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.air-import-manual-controls input {
  min-width: 280px;
  max-width: 420px;
}

.air-import-manual-message {
  margin-top: 6px;
  font-size: 12px;
}

.air-import-manual-message.error {
  font-weight: 600;
}

.air-import-status.manually-closed {
  font-weight: 600;
  border-style: dashed;
}

/* M25.4D2-R6 compact status + Excel-like sort */

.air-import-status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 12px;
  font-size: 12px;
  color: #5a6678;
}

.air-import-status {
  min-width: 34px;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
  color: #16243a;
}

.air-import-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.air-import-sort-arrow {
  display: inline-block;
  min-width: 10px;
  font-size: 9px;
  line-height: 1;
  opacity: 0.32;
}

.air-import-sort-arrow.active {
  opacity: 1;
}

/* M25.4D3 AIR toolbar alignment */

.air-import-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.air-import-manual-override {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.air-import-manual-override > label {
  display: block;
  margin: 0;
}

.air-import-manual-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.air-import-manual-message {
  flex-basis: 100%;
}


/* =========================================================
   M25.4D15D AIR IMPORT TOOLBAR FINAL
   ========================================================= */

.air-import-toolbar {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: 0;
  margin: 4px 0 14px;
}

.air-import-toolbar-search {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.air-import-toolbar-spacer {
  width: clamp(80px, 8vw, 150px);
  flex: 0 0 auto;
}

.air-import-manual-override {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}

.air-import-search,
.air-import-manual-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.air-import-search {
  width: 300px;
}

.air-import-manual-field {
  width: 280px;
}

.air-import-search span,
.air-import-manual-field span {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  color: #5a6678;
}

.air-import-search input,
.air-import-manual-field input {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 8px 11px;
  border:
    1px solid rgba(22, 36, 58, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: #16243a;
  font: inherit;
}

.air-import-toolbar .secondary-button {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.air-import-manual-message {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .air-import-toolbar-spacer {
    width: 60px;
  }
}

@media (max-width: 980px) {
  .air-import-toolbar {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .air-import-toolbar-spacer {
    display: none;
  }

  .air-import-toolbar-search,
  .air-import-manual-override {
    flex-wrap: wrap;
  }
}

/* =========================================================
   M25.5E AIR IMPORT CARTAGE / BILLING DASHBOARD
   ========================================================= */

.air-import-summary {
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
}

.air-import-summary-card.billing-unknown {
  border-color:
    rgba(90, 100, 116, 0.28);
  background:
    rgba(90, 100, 116, 0.07);
}

.air-import-table tbody tr.has-s-number {
  background:
    rgba(46, 125, 72, 0.055);
}

.air-import-table tbody tr.missing-s-number {
  background:
    rgba(224, 156, 0, 0.075);
}

.air-import-table tbody tr.has-s-number:hover {
  background:
    rgba(46, 125, 72, 0.10);
}

.air-import-table tbody tr.missing-s-number:hover {
  background:
    rgba(224, 156, 0, 0.13);
}

.air-import-s-number {
  font-weight: 650;
}

.air-import-business-value {
  font-weight: 650;
}

.air-import-billing,
.air-import-booking {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.air-import-billing.done {
  background:
    rgba(32, 125, 72, 0.12);
}

.air-import-billing.pending {
  background:
    rgba(213, 151, 0, 0.15);
}

.air-import-billing.unknown {
  background:
    rgba(90, 100, 116, 0.12);
}

.air-import-booking.feng {
  background:
    rgba(50, 96, 168, 0.11);
}

.air-import-booking.pbt {
  background:
    rgba(111, 78, 145, 0.12);
}

.air-import-booking.none {
  background:
    rgba(22, 36, 58, 0.07);
}

#air-import-manual-close:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 1400px) {
  .air-import-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .air-import-summary {
    grid-template-columns:
      1fr;
  }
}