.procurementSettlementsPage .financeShell {
  --customs-accent: #9f1d22;
  --customs-dark: #7f171b;
  --customs-soft: #f8eeee;
  color: #18212f;
  background: #f5f7fa;
}

.procurementSettlementsPage .financeShell .sidebar {
  border-right-color: #dfe4eb;
  background: #fff;
}

.procurementSettlementsPage .financeShell .brand strong { color: #18212f; }
.procurementSettlementsPage .financeShell .navItem:hover,
.procurementSettlementsPage .financeShell .navItem.active {
  color: var(--customs-dark);
  background: var(--customs-soft);
}

.procurementSettlementsPage .financeShell .main {
  min-width: 0;
  background: #f5f7fa;
}

.procurementSettlementsPage .financeShell .customsPage,
.procurementSettlementsPage .financeWorkflowPage {
  width: min(1480px, 100%);
  margin: 0 auto;
}

.procurementSettlementsPage .financeShell .customsPageHeader {
  align-items: center;
  margin-bottom: 18px;
}

.procurementSettlementsPage .financeShell .customsPageHeader > div { min-width: 0; }
.procurementSettlementsPage .financeShell .customsPageHeader h1 {
  margin: 0;
  color: #18212f;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.procurementSettlementsPage .financeShell .customsPageHeader p {
  max-width: 820px;
  margin-top: 7px;
  color: #6b7687;
  font-size: 13px;
  line-height: 1.65;
}

.procurementSettlementsPage .financeShell .customsEyebrow {
  margin-bottom: 5px;
  color: var(--customs-accent);
  font-size: 11px;
  letter-spacing: .09em;
}

.procurementSettlementsPage .financeShell .customsPanel {
  border-color: #dfe4eb;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(24, 33, 47, .055);
}

.procurementSettlementsPage .financeShell .customsPanelHeader { align-items: flex-start; }
.procurementSettlementsPage .financeShell .customsPanelHeader h2 {
  font-size: 17px;
  line-height: 1.35;
}

.procurementSettlementsPage .financeShell .customsRecordCount {
  color: #5b6574;
  background: #f1f4f7;
}

.procurementSettlementsPage .financeShell .customsToolbar {
  align-items: stretch;
  gap: 9px;
}

.procurementSettlementsPage .financeShell .customsToolbar input,
.procurementSettlementsPage .financeShell .customsToolbar select,
.procurementSettlementsPage .financeShell .customsPrimaryButton,
.procurementSettlementsPage .financeShell .customsSecondaryButton {
  min-height: 40px;
  font-family: inherit;
  font-size: 13px;
}

.procurementSettlementsPage .financeShell .customsToolbar input,
.procurementSettlementsPage .financeShell .customsToolbar select {
  border-color: #d8dee7;
  border-radius: 9px;
  padding-inline: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.procurementSettlementsPage .financeShell .customsToolbar input:focus,
.procurementSettlementsPage .financeShell .customsToolbar select:focus {
  border-color: #c26165;
  outline: 3px solid rgba(159, 29, 34, .10);
}

.procurementSettlementsPage .financeShell .customsPrimaryButton,
.procurementSettlementsPage .financeShell .customsSecondaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.procurementSettlementsPage .financeShell .customsPrimaryButton {
  border-color: var(--customs-accent);
  background: var(--customs-accent);
  box-shadow: 0 5px 14px rgba(159, 29, 34, .16);
}

.procurementSettlementsPage .financeShell .customsSecondaryButton:hover:not(:disabled) {
  color: var(--customs-dark);
  border-color: #cf9da0;
  background: #fffafa;
}

.procurementSettlementsPage .financeShell .customsTableWrap {
  border-color: #e0e5ec;
  border-radius: 10px;
  background: #fff;
}

.procurementSettlementsPage .financeShell .customsTable th {
  height: 44px;
  padding: 10px 12px;
  color: #596577;
  background: #f7f9fb;
  font-size: 12px;
  font-weight: 800;
}

.procurementSettlementsPage .financeShell .customsTable td {
  height: 50px;
  padding: 11px 12px;
  border-top-color: #e7ebf0;
  color: #303b4a;
  font-size: 12px;
}

.procurementSettlementsPage .financeShell .customsTable tbody tr:not(.isSelected):hover td { background: #fafbfd; }
.procurementSettlementsPage .financeShell .customsTable tr.isSelected td { background: #fff6f6; }
.procurementSettlementsPage .financeShell .customsTable tr.isSelected td:first-child { box-shadow: inset 3px 0 0 var(--customs-accent); }

.procurementSettlementsPage .financeShell .customsEmpty {
  min-height: 178px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}

.procurementSettlementsPage .financeShell .customsEmpty::before {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  color: #98a2b1;
  background: #f6f8fa;
  content: "—";
  font-size: 18px;
  font-weight: 800;
}

.procurementSettlementsPage .financeShell .customsEmpty strong {
  color: #4c5868;
  font-size: 14px;
}

.procurementSettlementsPage .financeShell .customsEmpty p {
  max-width: 460px;
  color: #8a94a3;
}

.procurementSettlementsPage .financeShell .customsAlert {
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(24, 33, 47, .035);
}

.procurementSettlementsPage .financeWorkflowPanel { overflow: visible; }
.procurementSettlementsPage .financeWorkflowPanel .financeWorkflowPanelHeader { margin-bottom: 16px; }
.procurementSettlementsPage .financeWorkflowPanel .customsPanelNote { max-width: 760px; }

.procurementSettlementsPage .financeRefundToolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px auto;
}
.procurementSettlementsPage .financeRefundToolbar input { min-width: 0; }
.procurementSettlementsPage .financeRefundToolbar select { min-width: 0; }
.procurementSettlementsPage .financeRefundTable { min-width: 1120px; }
.procurementSettlementsPage .financeRefundTable th:first-child,
.procurementSettlementsPage .financeRefundTable td:first-child { text-align: left; }
.procurementSettlementsPage .financeRefundTable .financeAmountCell {
  color: #18212f;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.procurementSettlementsPage .financeRefundTable .financeRefundActionCell { width: 250px; }
.procurementSettlementsPage .refundManagementActions {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.procurementSettlementsPage .financeRefundAction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  padding: 5px 0;
  color: var(--customs-accent);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.procurementSettlementsPage .financeRefundAction:hover { text-decoration: underline; }
.procurementSettlementsPage .financeRefundAction:disabled { cursor: wait; opacity: .5; text-decoration: none; }
.procurementSettlementsPage .refundDangerAction { color: #b42318; }
.procurementSettlementsPage .financeStatusBadge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.procurementSettlementsPage .financeRefundPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: #697586;
  font-size: 12px;
}

.procurementSettlementsPage .financeRefundPaginationActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.procurementSettlementsPage .financeRefundPageIndicator {
  min-width: 54px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.procurementSettlementsPage .refundWorkspacePage { max-width: 1480px; }
.procurementSettlementsPage .refundApplicationModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(15 23 42 / 48%);
}
.procurementSettlementsPage .refundApplicationModalDialog {
  display: flex;
  width: min(1280px, 100%);
  max-height: calc(100vh - 48px);
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #f6f8fb;
  box-shadow: 0 24px 80px rgb(15 23 42 / 28%);
}
.procurementSettlementsPage .refundApplicationModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 16px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.procurementSettlementsPage .refundApplicationModalHeader span { color: #64748b; font-size: 12px; }
.procurementSettlementsPage .refundApplicationModalHeader h2 { margin: 3px 0 0; color: #0f172a; font-size: 21px; }
.procurementSettlementsPage .refundApplicationModalHeader button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  color: #475569;
  background: transparent;
  cursor: pointer;
}
.procurementSettlementsPage .refundApplicationModalHeader button:hover { background: #f1f5f9; }
.procurementSettlementsPage .refundApplicationModalHeader button:disabled { cursor: not-allowed; opacity: .45; }
.procurementSettlementsPage .refundApplicationModalBody { min-height: 0; overflow: auto; padding: 18px 20px 22px; }
.procurementSettlementsPage .refundApplicationModalFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  gap: 20px;
  padding: 12px 20px;
  border-top: 1px solid #dfe5ec;
  background: #fff;
  box-shadow: 0 -8px 24px rgb(15 23 42 / 6%);
}
.procurementSettlementsPage .refundApplicationModalFooter > div { display: flex; min-width: 0; align-items: baseline; justify-content: flex-end; gap: 9px; }
.procurementSettlementsPage .refundApplicationModalFooter span,
.procurementSettlementsPage .refundApplicationModalFooter small { color: #697586; font-size: 12px; }
.procurementSettlementsPage .refundApplicationModalFooter strong { color: #172033; font-size: 18px; font-variant-numeric: tabular-nums; }
.procurementSettlementsPage .refundApplicationModalFooter .refundSubmitButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 168px;
  min-height: 40px;
  margin-top: 0;
  border: 1px solid var(--customs-accent, #1668b4);
  border-radius: 8px;
  padding: 0 18px;
  color: #fff;
  background: var(--customs-accent, #1668b4);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.procurementSettlementsPage .refundApplicationModalFooter .refundSubmitButton:disabled { opacity: .5; cursor: not-allowed; }
.procurementSettlementsPage .refundEditModalDialog { width: min(560px, 100%); background: #fff; }
.procurementSettlementsPage .refundEditModalDialog .refundApplicationModalBody { display: grid; gap: 16px; }
.procurementSettlementsPage .refundEditLockedNotice {
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  padding: 11px 13px;
  color: #1e40af;
  background: #eff6ff;
  font-size: 12px;
  line-height: 1.55;
}
.procurementSettlementsPage .refundField { display: grid; gap: 7px; color: #334155; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .refundField input,
.procurementSettlementsPage .refundField textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d6dce5;
  border-radius: 8px;
  padding: 9px 11px;
  color: #172033;
  background: #fff;
  font: inherit;
  font-weight: 500;
  resize: vertical;
}
.procurementSettlementsPage .refundField input:focus,
.procurementSettlementsPage .refundField textarea:focus { border-color: var(--customs-accent); outline: 2px solid rgb(36 99 235 / 12%); }
.procurementSettlementsPage .refundModalActions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.procurementSettlementsPage .refundWorkflowGridInModal { grid-template-columns: minmax(0, 1fr) 280px; }
.procurementSettlementsPage .refundWorkflowGrid,
.procurementSettlementsPage .refundDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.procurementSettlementsPage .refundWorkflowMain,
.procurementSettlementsPage .refundActionRail { display: grid; gap: 16px; }
.procurementSettlementsPage .refundSection { padding: 18px; }
.procurementSettlementsPage .refundSectionHeader,
.procurementSettlementsPage .refundSectionHeader > div,
.procurementSettlementsPage .refundHeaderActions,
.procurementSettlementsPage .refundActionButtons,
.procurementSettlementsPage .refundDocumentRow,
.procurementSettlementsPage .refundAlert {
  display: flex;
  align-items: center;
}
.procurementSettlementsPage .refundSectionHeader { justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.procurementSettlementsPage .refundSectionHeader > div { gap: 9px; min-width: 0; }
.procurementSettlementsPage .refundSectionHeader h2,
.procurementSettlementsPage .refundActionCard h2 { margin: 0; color: #172033; font-size: 15px; }
.procurementSettlementsPage .refundStep {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--customs-accent);
  font-size: 12px;
  font-weight: 800;
}
.procurementSettlementsPage .refundSourceBadge,
.procurementSettlementsPage .refundClaimed,
.procurementSettlementsPage .refundUnclaimed,
.procurementSettlementsPage .refundGuardBlocked,
.procurementSettlementsPage .refundGuardClear {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.procurementSettlementsPage .refundSourceBadge { color: #1d5fa8; background: #edf6ff; }
.procurementSettlementsPage .refundClaimed,
.procurementSettlementsPage .refundGuardClear { color: #237348; background: #edf9f2; }
.procurementSettlementsPage .refundUnclaimed { color: #9a6500; background: #fff8df; }
.procurementSettlementsPage .refundGuardBlocked { color: #b42318; background: #fff0ee; }
.procurementSettlementsPage .refundSummaryGrid,
.procurementSettlementsPage .refundFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.procurementSettlementsPage .refundSummaryGrid > div { min-width: 0; padding: 11px 12px; border: 1px solid #edf0f4; border-radius: 8px; background: #fbfcfd; }
.procurementSettlementsPage .refundSummaryGrid span { display: block; margin-bottom: 5px; color: #7a8493; font-size: 11px; }
.procurementSettlementsPage .refundSummaryGrid strong { display: block; overflow-wrap: anywhere; color: #1e293b; font-size: 13px; line-height: 1.5; }
.procurementSettlementsPage .refundFullField { grid-column: 1 / -1; }
.procurementSettlementsPage .refundSectionNote { margin: -4px 0 13px; color: #697586; font-size: 12px; line-height: 1.6; }
.procurementSettlementsPage .refundDocumentRow { flex-wrap: wrap; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #eef1f4; }
.procurementSettlementsPage .refundDocumentRow > span { color: #697586; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .refundDocumentRow a,
.procurementSettlementsPage .refundReceiptTable a { color: var(--customs-accent); text-decoration: none; font-size: 12px; font-weight: 800; }
.procurementSettlementsPage .refundDocumentRow a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 6px; background: #f2f7fd; }
.procurementSettlementsPage .refundVehicleTable { min-width: 980px; }
.procurementSettlementsPage .refundVehicleTable th:first-child,
.procurementSettlementsPage .refundVehicleTable td:first-child {
  width: 190px;
  min-width: 190px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.procurementSettlementsPage .refundReceiptTable { min-width: 980px; }
.procurementSettlementsPage .refundReceiptTable td strong,
.procurementSettlementsPage .refundReceiptTable td small { display: block; }
.procurementSettlementsPage .refundReceiptTable td small { max-width: 270px; margin-top: 3px; overflow: hidden; color: #8490a0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .refundReceiptTable input[type="number"] { width: 132px; padding: 6px 8px; border: 1px solid #dfe4ea; border-radius: 6px; text-align: right; }
.procurementSettlementsPage .refundReceiptTable input:disabled { color: #a0a7b2; background: #f4f6f8; }
.procurementSettlementsPage .refundSelectedTotal { color: #1d5fa8; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.procurementSettlementsPage .refundFormGrid label,
.procurementSettlementsPage .refundActionCard label,
.procurementSettlementsPage .refundPaymentDraft label { display: grid; gap: 6px; color: #536070; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .refundFormGrid input,
.procurementSettlementsPage .refundFormGrid select,
.procurementSettlementsPage .refundFormGrid textarea,
.procurementSettlementsPage .refundActionCard input,
.procurementSettlementsPage .refundActionCard select,
.procurementSettlementsPage .refundActionCard textarea,
.procurementSettlementsPage .refundPaymentDraft input,
.procurementSettlementsPage .refundPaymentDraft select,
.procurementSettlementsPage .refundPaymentDraft textarea {
  width: 100%;
  border: 1px solid #dce2e9;
  border-radius: 7px;
  padding: 8px 10px;
  color: #1f2937;
  background: #fff;
  font: inherit;
}
.procurementSettlementsPage .refundFormGrid textarea,
.procurementSettlementsPage .refundActionCard textarea,
.procurementSettlementsPage .refundPaymentDraft textarea { resize: vertical; }
.procurementSettlementsPage .refundSubmitCard,
.procurementSettlementsPage .refundActionCard { position: sticky; top: 18px; padding: 18px; }
.procurementSettlementsPage .refundSubmitCard > span { display: block; color: #6b7686; font-size: 12px; }
.procurementSettlementsPage .refundSubmitCard > strong { display: block; margin: 7px 0 18px; color: #172033; font-size: 24px; letter-spacing: -.02em; }
.procurementSettlementsPage .refundSubmitCard dl { margin: 0; }
.procurementSettlementsPage .refundSubmitCard dl > div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #edf0f4; font-size: 12px; }
.procurementSettlementsPage .refundSubmitCard dt { color: #7c8796; }
.procurementSettlementsPage .refundSubmitCard dd { margin: 0; color: #273244; text-align: right; }
.procurementSettlementsPage .refundSubmitButton { width: 100%; justify-content: center; margin-top: 14px; }
.procurementSettlementsPage .refundApprovalProgressCard .businessApprovalProgressBlock { margin-top: 12px; }
.procurementSettlementsPage .refundApprovalProgressCard .refundAlert { margin: 14px 0 0; }
.procurementSettlementsPage .refundAlert { gap: 9px; margin-bottom: 16px; border: 1px solid; border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.procurementSettlementsPage .refundAlert span { flex: 1; }
.procurementSettlementsPage .refundAlert button { border: 0; padding: 3px; color: inherit; background: transparent; cursor: pointer; }
.procurementSettlementsPage .refundAlertError { color: #a51d17; border-color: #f0c9c6; background: #fff5f4; }
.procurementSettlementsPage .refundAlertSuccess { color: #166534; border-color: #bbdfc4; background: #f0fdf4; }
.procurementSettlementsPage .refundAlertWarning { margin: 14px 0 0; color: #865600; border-color: #f1d89a; background: #fffbeb; }
.procurementSettlementsPage .refundPreviousApprovalFeedback {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  border: 1px solid #f0c9c6;
  border-radius: 9px;
  padding: 12px 14px;
  color: #8f1d18;
  background: #fff5f4;
}
.procurementSettlementsPage .refundPreviousApprovalFeedback > svg { flex: 0 0 auto; margin-top: 1px; }
.procurementSettlementsPage .refundPreviousApprovalFeedback > div { min-width: 0; }
.procurementSettlementsPage .refundPreviousApprovalFeedback strong { display: block; margin-bottom: 4px; font-size: 13px; }
.procurementSettlementsPage .refundPreviousApprovalFeedback p { margin: 0; color: #7a2925; line-height: 1.55; white-space: pre-wrap; }
.procurementSettlementsPage .refundPreviousApprovalFeedback small { display: block; margin-top: 5px; color: #9b5652; }
.procurementSettlementsPage .refundPreviousApprovalDetail {
  border-left: 3px solid #d92d20;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff5f4;
}
.procurementSettlementsPage .refundPreviousApprovalDetail > strong { color: #8f1d18; white-space: pre-wrap; }
.procurementSettlementsPage .refundPreviousApprovalDetail > small { color: #9b5652; }
.procurementSettlementsPage .refundMaterialCard {
  overflow: hidden;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  background: #fbfcfe;
}
.procurementSettlementsPage .refundMaterialCard.isComplete { border-color: #a9d4b9; background: #fbfefc; }
.procurementSettlementsPage .refundMaterialHeader {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px 12px;
}
.procurementSettlementsPage .refundMaterialIcon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  color: #a12620;
  background: #fff0ef;
}
.procurementSettlementsPage .refundMaterialHeader > div { min-width: 0; }
.procurementSettlementsPage .refundMaterialTitle { display: flex; align-items: center; gap: 8px; }
.procurementSettlementsPage .refundMaterialTitle strong { color: #1f2937; font-size: 14px; }
.procurementSettlementsPage .refundMaterialTitle > span {
  border-radius: 999px;
  padding: 2px 7px;
  color: #a12620;
  background: #fff0ef;
  font-size: 10px;
  font-weight: 800;
}
.procurementSettlementsPage .refundMaterialHeader p { margin: 4px 0 0; color: #667085; font-size: 12px; line-height: 1.55; }
.procurementSettlementsPage .refundMaterialTemplateLink {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 2px;
  color: #667085;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}
.procurementSettlementsPage .refundMaterialTemplateLink:hover { color: #8f2924; text-decoration: underline; }
.procurementSettlementsPage .refundMaterialUpload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.procurementSettlementsPage .refundFormGrid label.refundMaterialUpload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 15px 13px;
  border: 1px dashed #c9d1dc;
  border-radius: 9px;
  padding: 13px 14px;
  color: #344054;
  background: #fff;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.procurementSettlementsPage .refundFormGrid label.refundMaterialUpload:hover { border-color: #a7332d; box-shadow: 0 3px 10px rgba(15, 23, 42, .05); }
.procurementSettlementsPage .refundMaterialUploadIcon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  color: #8f2924;
  background: #fff0ef;
}
.procurementSettlementsPage .refundMaterialUploadCopy { display: grid; min-width: 0; gap: 3px; }
.procurementSettlementsPage .refundMaterialUploadCopy strong { color: #253044; font-size: 12px; }
.procurementSettlementsPage .refundMaterialUploadCopy small { color: #7a8493; font-size: 10px; font-weight: 500; }
.procurementSettlementsPage .refundMaterialUploadAction {
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  background: #8f2924;
  font-size: 11px;
  font-weight: 800;
}
.procurementSettlementsPage .refundFormGrid label.refundMaterialUpload.isUploaded { border-color: #9bcfb1; background: #f5fbf7; }
.procurementSettlementsPage .refundMaterialUpload.isUploaded .refundMaterialUploadIcon { color: #237348; background: #e6f6ec; }
.procurementSettlementsPage .refundMaterialUpload.isUploaded .refundMaterialUploadAction { background: #237348; }
.procurementSettlementsPage .refundMaterialStatus {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid #e8ecf1;
  padding: 9px 15px;
  color: #8a5a00;
  background: #fffaf0;
  font-size: 11px;
  font-weight: 700;
}
.procurementSettlementsPage .refundMaterialStatus.isComplete { color: #237348; border-color: #d6eadc; background: #edf8f1; }
.procurementSettlementsPage .refundMaterialStatus svg { flex: 0 0 auto; }
.procurementSettlementsPage .refundBlockerList { margin-top: 13px; padding: 9px 10px; border-radius: 8px; background: #fff4f2; }
.procurementSettlementsPage .refundBlockerList p { display: flex; gap: 7px; margin: 5px 0; color: #a51d17; font-size: 12px; line-height: 1.45; }
.procurementSettlementsPage .refundLoadingPanel { min-height: 160px; display: grid; place-items: center; color: #697586; }
.procurementSettlementsPage .refundHeaderActions { gap: 10px; }
.procurementSettlementsPage .refundActionCard { position: static; }
.procurementSettlementsPage .refundActionCard > p { margin: 8px 0 14px; color: #697586; font-size: 12px; line-height: 1.55; }
.procurementSettlementsPage .refundActionCard > label + label { margin-top: 11px; }
.procurementSettlementsPage .refundActionButtons { justify-content: flex-end; gap: 8px; margin-top: 14px; }
.procurementSettlementsPage .refundRejectButton,
.procurementSettlementsPage .refundCancelButton {
  border: 1px solid #e7b7b2;
  border-radius: 7px;
  padding: 7px 13px;
  color: #b42318;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.procurementSettlementsPage .refundCancelButton { width: 100%; }
.procurementSettlementsPage .refundPaymentHistory { display: grid; gap: 8px; }
.procurementSettlementsPage .refundPaymentHistory > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid #edf0f4; border-radius: 8px; }
.procurementSettlementsPage .refundPaymentHistory strong,
.procurementSettlementsPage .refundPaymentHistory span { display: block; }
.procurementSettlementsPage .refundPaymentHistory span { margin-top: 3px; color: #7b8695; font-size: 11px; }
.procurementSettlementsPage .refundPaymentDraft { display: grid; gap: 10px; margin-top: 13px; padding: 12px; border: 1px solid #e5eaf0; border-radius: 9px; background: #fafbfd; }
.procurementSettlementsPage .refundPaymentDraftHeader { display: flex; align-items: center; justify-content: space-between; }
.procurementSettlementsPage .refundPaymentDraftHeader button { border: 0; padding: 3px; color: #8a94a3; background: transparent; cursor: pointer; }
.procurementSettlementsPage .refundUploadLabel input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.procurementSettlementsPage .refundUploadLabel span { display: block; border: 1px dashed #cbd3dd; border-radius: 7px; padding: 9px; text-align: center; cursor: pointer; }
.procurementSettlementsPage .refundUploadLabel span.isUploaded { color: #237348; border-color: #9bcfb1; background: #f2fbf5; }
.procurementSettlementsPage .refundAddPayment { width: 100%; justify-content: center; margin-top: 12px; }

.procurementSettlementsPage .financeShell .customsTaxRefundApplicationTable { min-width: 1040px; }
.procurementSettlementsPage .financeShell .customsTaxRefundDetailPanel { border-top: 3px solid #e7c5c7; }
.procurementSettlementsPage .customsTaxRefundFinanceModal { width: min(1180px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 14px; padding: 18px; background: #fff; box-shadow: 0 24px 72px rgba(15, 23, 42, .3); }
.procurementSettlementsPage .customsTaxRefundModalClose { float: right; margin-bottom: 12px; }
.procurementSettlementsPage .financeShell .customsTaxRefundCoreCard { background: #fcfdff; }
.procurementSettlementsPage .financeShell .customsTaxRefundCoreCard:has(.customsStatus.valid) {
  border-color: #cde7d7;
  background: #f7fcf9;
}

.procurementSettlementsPage .financeShell .customsTaxRefundScopeNotice {
  color: #6f3033;
  border-color: #eccacc;
  background: #fff7f7;
}

.procurementSettlementsPage .financeShell .customsTaxRefundScopeNotice strong { color: var(--customs-dark); }
.procurementSettlementsPage .financeShell .customsSettlementTable { min-width: 1020px; }
.procurementSettlementsPage .financeShell .customsSettlementDetail { border-top: 3px solid #e7c5c7; }
.procurementSettlementsPage .financeShell .customsSettlementDocumentCard { background: #fcfdff; }
.procurementSettlementsPage .financeShell .customsSettlementDocumentCard:has(.customsStatus.valid) {
  border-color: #cde7d7;
  background: #f7fcf9;
}

.procurementSettlementsPage .financeExpensePage, .procurementSettlementsPage.financeExpensePage { max-width: 1440px; margin: 0 auto; }
.procurementSettlementsPage .financeExpensePageHeader { align-items: center; gap: 24px; }
.procurementSettlementsPage .financeExpensePageHeader > div:first-child { min-width: 0; }
.procurementSettlementsPage .financeExpenseHeaderHint { display: grid; flex: 0 1 470px; justify-items: end; gap: 3px; max-width: 470px; color: #667085; font-size: 12px; line-height: 1.5; text-align: right; }
.procurementSettlementsPage .financeExpenseHeaderHint strong { color: #344054; font-size: 13px; }
.procurementSettlementsPage .financeExpenseHeaderHint span { max-width: 100%; }
.procurementSettlementsPage .financeExpenseTabs { display: flex; gap: 4px; margin: 20px 0 16px; border-bottom: 1px solid #e4e7ec; }
.procurementSettlementsPage .financeExpenseTabs button { position: relative; border: 0; background: transparent; color: #667085; padding: 12px 18px 13px; cursor: pointer; font-weight: 700; }
.procurementSettlementsPage .financeExpenseTabs button::after { position: absolute; right: 16px; bottom: -1px; left: 16px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.procurementSettlementsPage .financeExpenseTabs button.active, .procurementSettlementsPage .financeExpenseTabs button:focus-visible { color: #8f1d1d; outline: none; }
.procurementSettlementsPage .financeExpenseTabs button.active::after, .procurementSettlementsPage .financeExpenseTabs button:focus-visible::after { background: #b42318; }
.procurementSettlementsPage .financeExpenseBody { min-height: 0; border: 1px solid #e4e7ec; border-radius: 14px; padding: 16px; background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 5%); }
.procurementSettlementsPage .financeExpenseToolbar { display: grid; grid-template-columns: minmax(280px, 1fr) 180px auto auto; align-items: end; gap: 10px; margin-bottom: 16px; }
.procurementSettlementsPage .financeExpenseToolbar label { display: grid; gap: 6px; color: #475467; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .financeExpenseToolbar input, .procurementSettlementsPage .financeExpenseToolbar select { width: 100%; min-height: 40px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; padding: 8px 11px; color: #344054; }
.procurementSettlementsPage .financeExpensePrimaryButton, .procurementSettlementsPage .financeExpenseSecondaryButton, .procurementSettlementsPage .financeExpenseCard > button { display: inline-flex; min-width: 76px; min-height: 40px; align-items: center; justify-content: center; border: 1px solid #b42318; border-radius: 8px; padding: 8px 15px; background: #b42318; color: #fff; cursor: pointer; font-weight: 700; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseSecondaryButton { border-color: #d0d5dd; background: #fff; color: #344054; }
.procurementSettlementsPage .financeExpensePrimaryButton:disabled, .procurementSettlementsPage .financeExpenseSecondaryButton:disabled { cursor: not-allowed; opacity: .5; }
.procurementSettlementsPage .financeExpenseListHeader, .procurementSettlementsPage .financeExpenseCard { display: grid; grid-template-columns: minmax(145px, 1.15fr) minmax(0, 1.3fr) minmax(0, .95fr) minmax(90px, .65fr) minmax(80px, .65fr) minmax(82px, auto); align-items: center; gap: 14px; }
.procurementSettlementsPage .financeExpenseListHeader > *, .procurementSettlementsPage .financeExpenseCard > * { min-width: 0; }
.procurementSettlementsPage .financeExpenseListHeader { border-radius: 8px; padding: 9px 14px; background: #f9fafb; color: #667085; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .financeExpenseList { display: grid; gap: 8px; margin-top: 8px; }
.procurementSettlementsPage .financeExpenseCard { border: 1px solid #eaecf0; border-radius: 10px; padding: 13px 14px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.procurementSettlementsPage .financeExpenseCard:hover, .procurementSettlementsPage .financeExpenseCard:focus-visible { border-color: #e6b5b1; box-shadow: 0 5px 16px rgb(16 24 40 / 8%); outline: none; transform: translateY(-1px); }
.procurementSettlementsPage .financeExpenseIdentity, .procurementSettlementsPage .financeExpenseListCell, .procurementSettlementsPage .financeExpenseAmount { display: grid; min-width: 0; gap: 4px; }
.procurementSettlementsPage .financeExpenseIdentity strong { overflow: hidden; color: #101828; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseIdentity span, .procurementSettlementsPage .financeExpenseListCell span, .procurementSettlementsPage .financeExpenseAmount span { overflow: hidden; color: #667085; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseListCell strong { overflow: hidden; color: #344054; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseAmount { grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 5px; }
.procurementSettlementsPage .financeExpenseAmount strong { color: #101828; font-size: 15px; }
.procurementSettlementsPage .financeExpenseCard > button { min-width: 82px; min-height: 34px; padding: 6px 13px; }
.procurementSettlementsPage .financeExpenseStatusBadge { display: inline-flex; width: max-content; align-items: center; border-radius: 999px; padding: 4px 9px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseStatusBadge.pending { background: #fffaeb; color: #b54708; }
.procurementSettlementsPage .financeExpenseStatusBadge.processing { background: #eff8ff; color: #175cd3; }
.procurementSettlementsPage .financeExpenseStatusBadge.complete { background: #ecfdf3; color: #067647; }
.procurementSettlementsPage .financeExpenseStatusBadge.draft { background: #f2f4f7; color: #475467; }
.procurementSettlementsPage .financeExpenseLoading { padding: 48px 20px; color: #667085; text-align: center; }
.procurementSettlementsPage .financeExpensePagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; color: #667085; font-size: 12px; }
.procurementSettlementsPage .financeExpensePagination > div { display: flex; gap: 8px; }
.procurementSettlementsPage .financeExpensePagination button { border: 1px solid #d0d5dd; background: #fff; border-radius: 7px; padding: 6px 11px; cursor: pointer; }
.procurementSettlementsPage .financeExpensePagination button:disabled { cursor: not-allowed; opacity: .45; }
.procurementSettlementsPage .financeExpenseCustomsWorkspace { width: 100%; max-width: none; }
.procurementSettlementsPage .financeExpenseCustomsWorkspace .customsAlert { margin-bottom: 14px; }
.procurementSettlementsPage .financeExpenseDetailModal { display: flex; flex-direction: column; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 16px; background: #f9fafb; }
.procurementSettlementsPage .financeExpenseDetailHeader { flex: 0 0 auto; align-items: center; padding: 18px 22px; }
.procurementSettlementsPage .financeExpenseDetailHeader > div:first-child { display: grid; gap: 2px; }
.procurementSettlementsPage .financeExpenseDetailHeader > div:first-child > span { color: #b42318; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.procurementSettlementsPage .financeExpenseDetailHeader h2 { color: #101828; font-size: 20px; }
.procurementSettlementsPage .financeExpenseDetailHeader p { margin: 0; color: #667085; }
.procurementSettlementsPage .financeExpenseDetailHeader > div:last-child { display: flex; align-items: center; gap: 12px; }
.procurementSettlementsPage .financeExpenseDetailBody { display: grid; gap: 16px; overflow: auto; padding: 18px 22px 22px; }
.procurementSettlementsPage .financeCustomsDetailModal { width: min(1040px, 100%); }
.procurementSettlementsPage .financeCustomsDetailHeader .customsPanelNote { margin: 2px 0 0; }
.procurementSettlementsPage .financeCustomsDetailActions { display: flex; align-items: center; gap: 12px; }
.procurementSettlementsPage .financeCustomsDetailBody { gap: 14px; }
.procurementSettlementsPage .financeCustomsDetailBody .customsFormSection { margin: 0; background: #fff; }
.procurementSettlementsPage .financeExpenseWorkflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 15px 18px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; list-style: none; }
.procurementSettlementsPage .financeExpenseWorkflow li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; }
.procurementSettlementsPage .financeExpenseWorkflow li:not(:last-child)::after { position: absolute; top: 15px; right: 10px; left: 42px; height: 1px; background: #eaecf0; content: ""; }
.procurementSettlementsPage .financeExpenseWorkflow li > span { position: relative; z-index: 1; display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 1px solid #d0d5dd; border-radius: 50%; background: #fff; color: #98a2b3; font-size: 12px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseWorkflow li > div { position: relative; z-index: 1; display: grid; min-width: 0; gap: 2px; padding-right: 12px; background: #fff; }
.procurementSettlementsPage .financeExpenseWorkflow strong { color: #475467; font-size: 12px; }
.procurementSettlementsPage .financeExpenseWorkflow small { overflow: hidden; color: #98a2b3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseWorkflow li.complete > span { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.procurementSettlementsPage .financeExpenseWorkflow li.current > span { border-color: #fda29b; background: #fef3f2; color: #b42318; }
.procurementSettlementsPage .financeExpenseWorkflow li.complete strong, .procurementSettlementsPage .financeExpenseWorkflow li.current strong { color: #101828; }
.procurementSettlementsPage .financeExpenseDetailSection { display: grid; gap: 14px; border: 1px solid #e4e7ec; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); }
.procurementSettlementsPage .financeExpenseDetailSectionHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.procurementSettlementsPage .financeExpenseDetailSectionHeader > div { display: grid; gap: 3px; }
.procurementSettlementsPage .financeExpenseDetailSectionHeader h3 { margin: 0; color: #101828; font-size: 16px; }
.procurementSettlementsPage .financeExpenseDetailSectionHeader p { margin: 0; color: #667085; font-size: 12px; }
.procurementSettlementsPage .financeExpenseDetailSectionHeader > span { flex: 0 0 auto; border-radius: 999px; padding: 4px 9px; background: #f2f4f7; color: #667085; font-size: 11px; }
.procurementSettlementsPage .financeExpenseSummaryCards { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 10px; }
.procurementSettlementsPage .financeExpenseSummaryCards > div { display: grid; align-content: start; gap: 6px; min-height: 66px; border: 1px solid #eaecf0; border-radius: 9px; padding: 11px 12px; background: #fcfcfd; }
.procurementSettlementsPage .financeExpenseSummaryCards span { color: #667085; font-size: 11px; }
.procurementSettlementsPage .financeExpenseSummaryCards strong { color: #101828; font-size: 14px; line-height: 1.4; }
.procurementSettlementsPage .financeExpenseSummaryCards > div:first-child strong { color: #9f1d1d; font-size: 20px; }
.procurementSettlementsPage .financeExpenseSummaryCards strong small { color: #667085; font-size: 11px; }
.procurementSettlementsPage .financeExpenseAccountCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.procurementSettlementsPage .financeExpenseAccountCards > div { border: 1px solid #eaecf0; border-radius: 10px; padding: 13px 14px; }
.procurementSettlementsPage .financeExpenseAccountCards > div > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #f2f4f7; }
.procurementSettlementsPage .financeExpenseAccountCards > div > div strong { color: #344054; font-size: 13px; }
.procurementSettlementsPage .financeExpenseAccountCards > div > div span { border-radius: 999px; padding: 3px 7px; background: #f2f4f7; color: #667085; font-size: 10px; }
.procurementSettlementsPage .financeExpenseAccountCards dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 7px 10px; margin: 11px 0 0; font-size: 12px; }
.procurementSettlementsPage .financeExpenseAccountCards dt { color: #98a2b3; }
.procurementSettlementsPage .financeExpenseAccountCards dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #344054; }
.procurementSettlementsPage .financeExpenseDocumentChecklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.procurementSettlementsPage .financeExpenseDocumentItem { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; border: 1px solid #e4e7ec; border-radius: 10px; padding: 12px; background: #fcfcfd; }
.procurementSettlementsPage .financeExpenseDocumentItem.complete { border-color: #ccebd8; background: #f8fdf9; }
.procurementSettlementsPage .financeExpenseDocumentItem > div:first-child { display: grid; min-width: 0; gap: 3px; }
.procurementSettlementsPage .financeExpenseDocumentItem > div:first-child > span { width: max-content; color: #b54708; font-size: 10px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseDocumentItem.complete > div:first-child > span { color: #067647; }
.procurementSettlementsPage .financeExpenseDocumentItem strong { color: #344054; font-size: 13px; }
.procurementSettlementsPage .financeExpenseDocumentItem small { overflow: hidden; color: #667085; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseDocumentItem > div:last-child { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.procurementSettlementsPage .financeExpenseDocumentItem a, .procurementSettlementsPage .financeExpenseUploadButton { border: 1px solid #d0d5dd; border-radius: 7px; padding: 6px 10px; background: #fff; color: #344054; cursor: pointer; font-size: 11px; font-weight: 700; text-decoration: none; }
.procurementSettlementsPage .financeExpenseUploadButton { border-color: #d92d20; color: #b42318; }
.procurementSettlementsPage .financeExpenseUploadButton.busy { opacity: .55; }
.procurementSettlementsPage .financeExpenseUploadButton input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.procurementSettlementsPage .financeExpenseReconciliation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 1px solid #f0d4d1; border-radius: 11px; padding: 11px; background: #fff9f8; }
.procurementSettlementsPage .financeExpenseReconciliation.matched { border-color: #b7e4c7; background: #f6fef9; }
.procurementSettlementsPage .financeExpenseReconciliation > div { position: relative; display: grid; align-content: start; gap: 4px; min-height: 76px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 9px; padding: 11px 12px; background: rgb(255 255 255 / 75%); }
.procurementSettlementsPage .financeExpenseReconciliation span { color: #667085; font-size: 11px; }
.procurementSettlementsPage .financeExpenseReconciliation strong { color: #101828; font-size: 19px; }
.procurementSettlementsPage .financeExpenseReconciliation strong small { color: #667085; font-size: 10px; }
.procurementSettlementsPage .financeExpenseReconciliation div > small { padding-right: 70px; color: #667085; font-size: 10px; line-height: 1.45; }
.procurementSettlementsPage .financeExpenseReconciliation em { position: absolute; top: 10px; right: 10px; border-radius: 999px; padding: 3px 7px; font-size: 10px; font-style: normal; font-weight: 800; }
.procurementSettlementsPage .financeExpenseReconciliation em.matched { background: #dcfae6; color: #067647; }
.procurementSettlementsPage .financeExpenseReconciliation em.unmatched { background: #fef3f2; color: #b42318; }
.procurementSettlementsPage .financeExpenseSourceDocuments { display: grid; gap: 8px; }
.procurementSettlementsPage .financeExpenseSourceDocuments > strong { color: #475467; font-size: 12px; }
.procurementSettlementsPage .financeExpenseVoucherGroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; }
.procurementSettlementsPage .financeExpenseVoucherGroup { display: grid; min-width: 0; gap: 10px; border: 1px solid #e4e7ec; border-radius: 11px; padding: 12px; background: #fcfcfd; }
.procurementSettlementsPage .financeExpenseVoucherHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.procurementSettlementsPage .financeExpenseVoucherHeader > div { display: grid; min-width: 0; gap: 3px; }
.procurementSettlementsPage .financeExpenseVoucherHeader > div > span { width: max-content; border-radius: 999px; padding: 2px 6px; background: #fef3f2; color: #b42318; font-size: 9px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseVoucherHeader strong { color: #344054; font-size: 13px; }
.procurementSettlementsPage .financeExpenseVoucherHeader small { min-height: 32px; color: #667085; font-size: 10px; line-height: 1.45; }
.procurementSettlementsPage .financeExpenseVoucherHeader > em { flex: 0 0 auto; color: #667085; font-size: 11px; font-style: normal; }
.procurementSettlementsPage .financeExpenseVoucherList { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.procurementSettlementsPage .financeExpenseVoucherList li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; border: 1px solid #e4e7ec; border-radius: 8px; padding: 9px; background: #fff; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:first-child { display: flex; min-width: 0; align-items: flex-start; gap: 7px; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:first-child > span { display: grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f2f4f7; color: #667085; font-size: 9px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:first-child > div { display: grid; min-width: 0; gap: 2px; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:first-child strong { overflow: hidden; color: #344054; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:first-child small { color: #98a2b3; font-size: 9px; }
.procurementSettlementsPage .financeExpenseVoucherList li > strong { color: #101828; font-size: 11px; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseVoucherList li > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.procurementSettlementsPage .financeExpenseVoucherList a, .procurementSettlementsPage .financeExpenseVoucherList button { border: 0; background: transparent; padding: 0; color: #175cd3; cursor: pointer; font-size: 10px; font-weight: 700; text-decoration: none; }
.procurementSettlementsPage .financeExpenseVoucherList button { color: #b42318; }
.procurementSettlementsPage .financeExpenseVoucherList button:disabled { cursor: not-allowed; opacity: .55; }
.procurementSettlementsPage .financeExpenseVoucherEmpty { margin: 0; border: 1px dashed #d0d5dd; border-radius: 8px; padding: 13px 10px; color: #98a2b3; font-size: 10px; text-align: center; }
.procurementSettlementsPage .financeExpenseUploadComposer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding-top: 2px; }
.procurementSettlementsPage .financeExpenseUploadComposer > label:first-child { display: grid; min-width: 0; gap: 5px; color: #475467; font-size: 10px; font-weight: 700; }
.procurementSettlementsPage .financeExpenseUploadComposer > label:first-child > div { display: flex; align-items: center; overflow: hidden; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; }
.procurementSettlementsPage .financeExpenseUploadComposer input[type="text"], .procurementSettlementsPage .financeExpenseUploadComposer input[inputmode="decimal"] { width: 100%; min-width: 0; height: 32px; box-sizing: border-box; border: 0; outline: none; padding: 6px 8px; color: #101828; }
.procurementSettlementsPage .financeExpenseUploadComposer > label:first-child > div > span { padding-right: 8px; color: #667085; font-size: 9px; }
.procurementSettlementsPage .financeExpenseUploadComposer > .financeExpenseUploadButton { display: grid; min-height: 32px; box-sizing: border-box; place-items: center; white-space: nowrap; }
.procurementSettlementsPage .financeExpenseActionBar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-top: 1px solid #e4e7ec; background: #fff; }
.procurementSettlementsPage .financeExpenseActionBar > div:first-child { display: grid; gap: 2px; }
.procurementSettlementsPage .financeExpenseActionBar > div:first-child strong { color: #344054; font-size: 13px; }
.procurementSettlementsPage .financeExpenseActionBar > div:first-child span { color: #667085; font-size: 11px; }
.procurementSettlementsPage .financeExpenseActionBar > div:last-child { display: flex; gap: 8px; }
.procurementSettlementsPage .financeExpenseModal { display: flex; flex-direction: column; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 16px; background: #fff; }
.procurementSettlementsPage .financeExpenseModal .modalHeader { flex: 0 0 auto; padding: 20px 24px; }
.procurementSettlementsPage .financeExpenseModal .modalHeader h2 { color: #101828; font-size: 22px; }
.procurementSettlementsPage .financeExpenseModal .modalHeader p { margin-bottom: 0; color: #667085; }
.procurementSettlementsPage .financeExpenseModalBody { overflow: auto; padding: 20px 24px 24px; background: #fcfcfd; }
.procurementSettlementsPage .financeExpenseModal form { display: grid; gap: 16px; margin: 0; }
.procurementSettlementsPage .financeExpenseAutoFillBanner { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d1e9dc; border-radius: 12px; padding: 13px 15px; background: #f6fef9; }
.procurementSettlementsPage .financeExpenseAutoFillBanner > div { display: grid; gap: 5px; }
.procurementSettlementsPage .financeExpenseAutoFillBanner strong { color: #175c3a; font-size: 14px; }
.procurementSettlementsPage .financeExpenseAutoFillBanner > span { flex: 0 0 auto; color: #287a51; font-size: 12px; font-weight: 700; }
.procurementSettlementsPage .financeExpenseAutoFillBadge { width: max-content; border-radius: 999px; padding: 3px 8px; background: #dcfae6; color: #067647; font-size: 11px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseFormSection { display: grid; gap: 15px; border: 1px solid #e4e7ec; border-radius: 12px; padding: 17px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 3%); }
.procurementSettlementsPage .financeExpenseSectionHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.procurementSettlementsPage .financeExpenseSectionHeader > div { display: grid; gap: 3px; }
.procurementSettlementsPage .financeExpenseSectionHeader h3 { margin: 0; color: #101828; font-size: 16px; }
.procurementSettlementsPage .financeExpenseSectionHeader p { margin: 0; color: #667085; font-size: 12px; line-height: 1.5; }
.procurementSettlementsPage .financeExpenseSectionHeader > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #fef3f2; color: #b42318; font-size: 12px; font-weight: 800; }
.procurementSettlementsPage .financeExpenseFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 16px; }
.procurementSettlementsPage .financeExpenseModal label { display: grid; align-content: start; gap: 6px; color: #344054; font-weight: 700; }
.procurementSettlementsPage .financeExpenseFormGrid label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.procurementSettlementsPage .financeExpenseFormGrid label em { color: #98a2b3; font-size: 11px; font-style: normal; font-weight: 500; }
.procurementSettlementsPage .financeExpenseModal input, .procurementSettlementsPage .financeExpenseModal textarea, .procurementSettlementsPage .financeExpenseModal select { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 9px; padding: 9px 11px; background: #fff; color: #101828; font: inherit; }
.procurementSettlementsPage .financeExpenseModal input::placeholder { color: #98a2b3; }
.procurementSettlementsPage .financeExpenseModal select:disabled, .procurementSettlementsPage .financeExpenseModal input:disabled { background: #f2f4f7; color: #667085; }
.procurementSettlementsPage .financeExpenseModal input:focus, .procurementSettlementsPage .financeExpenseModal textarea:focus, .procurementSettlementsPage .financeExpenseModal select:focus { border-color: #b42318; outline: 3px solid rgb(180 35 24 / 10%); }
.procurementSettlementsPage .financeExpenseModal legend { color: #344054; font-weight: 800; padding: 0; }
.procurementSettlementsPage .financeExpenseModal small { color: #667085; font-size: 11px; font-weight: 400; line-height: 1.45; }
.procurementSettlementsPage .financeExpenseModal small.warning { color: #b54708; }
.procurementSettlementsPage .financeExpenseAccountSection { display: grid; gap: 14px; border: 1px solid #eaecf0; border-radius: 10px; padding: 14px; margin: 0; background: #f9fafb; }
.procurementSettlementsPage .financeExpenseAccountSection > p { margin: -6px 0 0; color: #667085; font-size: 13px; font-weight: 400; }
.procurementSettlementsPage .financeExpenseFullField { grid-column: 1 / -1; }
.procurementSettlementsPage .financeSourceDocument, .procurementSettlementsPage .financeExistingNotice { display: grid; gap: 7px; border: 1px solid #eaecf0; border-radius: 12px; padding: 14px 16px; background: #fff; }
.procurementSettlementsPage .financeSourceDocument > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.procurementSettlementsPage .financeSourceDocument > div span { border-radius: 999px; padding: 3px 8px; background: #ecfdf3; color: #067647; font-size: 11px; font-weight: 700; }
.procurementSettlementsPage .financeSourceDocument strong { color: #344054; }
.procurementSettlementsPage .financeSourceDocument a { color: #9f1d1d; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.procurementSettlementsPage .financeSourceDocument a:hover { text-decoration: underline; }
.procurementSettlementsPage .financeExistingNotice { color: #6941c6; }
.procurementSettlementsPage .financeExistingNotice a { display: block; margin-top: 6px; color: #7f1d1d; }
.procurementSettlementsPage .financeExpenseModalActions { align-items: center; justify-content: space-between; margin-top: 2px; padding-top: 16px; border-top: 1px solid #eaecf0; }
.procurementSettlementsPage .financeExpenseModalActions > p { margin: 0; color: #667085; font-size: 12px; }
.procurementSettlementsPage .financeExpenseModalActions > p.financeExpenseActionError { color: #b42318; font-weight: 700; outline: none; }
.procurementSettlementsPage .financeExpenseModalActions > div { display: flex; gap: 8px; }
.procurementSettlementsPage .financeExpenseModalActions button, .procurementSettlementsPage .financeExpenseLoadFailure button { min-height: 38px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 16px; background: #fff; color: #344054; cursor: pointer; font-weight: 700; }
.procurementSettlementsPage .financeExpenseModalActions .primaryButton { border-color: #b42318; background: #b42318; color: #fff; }
.procurementSettlementsPage .financeExpenseModalActions button:disabled { cursor: not-allowed; opacity: .55; }
.procurementSettlementsPage .financeExpenseLoadState { padding: 34px 20px; color: #667085; text-align: center; }
.procurementSettlementsPage .financeExpenseLoadFailure { display: grid; justify-items: start; gap: 8px; padding: 22px; border: 1px solid #fecdca; border-radius: 10px; background: #fffbfa; }
.procurementSettlementsPage .financeExpenseLoadFailure strong { color: #912018; font-size: 16px; }
.procurementSettlementsPage .financeExpenseLoadFailure p { margin: 0; color: #b42318; }

.procurementSettlementsPage .financeRedemptionModal { width: min(1280px, calc(100% - 24px)); max-height: calc(100vh - 24px); border-radius: 18px; }
.procurementSettlementsPage .financeRedemptionModal .modalHeader { align-items: flex-start; min-height: 104px; box-sizing: border-box; padding: 23px 30px 21px; background: #fffafa; }
.procurementSettlementsPage .financeRedemptionModal .modalHeader > div { display: grid; gap: 3px; }
.procurementSettlementsPage .financeRedemptionModal .modalHeader h2 { font-size: 24px; line-height: 1.25; }
.procurementSettlementsPage .financeRedemptionModal .modalHeader p { margin: 1px 0 0; color: #667085; font-size: 12px; }
.procurementSettlementsPage .financeRedemptionEyebrow { color: #b42318; font-size: 10px; font-weight: 900; letter-spacing: .1em; line-height: 1.2; }
.procurementSettlementsPage .financeRedemptionTitleLine { display: flex; align-items: center; gap: 9px; }
.procurementSettlementsPage .financeRedemptionTitleLine > span { border-radius: 999px; padding: 3px 8px; color: #667085; background: #f2f4f7; font-size: 10px; font-weight: 800; }
.procurementSettlementsPage .financeRedemptionModal .financeExpenseModalBody { padding: 18px 22px 0; background: #f7f8fa; }
.procurementSettlementsPage .financeRedemptionRequestForm { grid-template-columns: 1fr; align-items: start; gap: 14px; }
.procurementSettlementsPage .financeRedemptionRequestForm > .financeRedemptionContractSummary,
.procurementSettlementsPage .financeRedemptionRequestForm > .financeRedemptionVehiclesSection,
.procurementSettlementsPage .financeRedemptionRequestForm > .financeRedemptionPaymentSection,
.procurementSettlementsPage .financeRedemptionRequestForm > .financeRedemptionDocumentSection,
.procurementSettlementsPage .financeRedemptionRequestForm > .financeExpenseModalActions { grid-column: 1 / -1; }

.procurementSettlementsPage .financeRedemptionContractSummary { display: grid; gap: 12px; border: 1px solid #eadbd6; border-radius: 12px; padding: 15px 18px 13px; background: #fffaf8; }
.procurementSettlementsPage .financeRedemptionSummaryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.procurementSettlementsPage .financeRedemptionSummaryGrid > div { display: grid; min-width: 0; gap: 3px; }
.procurementSettlementsPage .financeRedemptionSummaryGrid span { color: #667085; font-size: 10px; font-weight: 700; }
.procurementSettlementsPage .financeRedemptionSummaryGrid strong { overflow: hidden; color: #344054; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionSummaryNote { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; border-top: 1px solid #eee2de; padding-top: 11px; }
.procurementSettlementsPage .financeRedemptionSummaryNote p { margin: 0; color: #667085; font-size: 11px; line-height: 1.5; }
.procurementSettlementsPage .financeRedemptionSummaryNote ul { display: grid; flex: 0 1 48%; gap: 3px; margin: 0; padding-left: 17px; color: #b54708; font-size: 11px; line-height: 1.45; }

.procurementSettlementsPage .financeRedemptionStepHeader { justify-content: flex-start; gap: 12px; }
.procurementSettlementsPage .financeRedemptionStepHeader > span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; }
.procurementSettlementsPage .financeRedemptionStepHeader > div { flex: 1; }
.procurementSettlementsPage .financeRedemptionVehiclesSection { gap: 14px; padding: 16px 18px; }
.procurementSettlementsPage .financeRedemptionVehicleList { display: grid; gap: 9px; }
.procurementSettlementsPage .financeRedemptionVehicleCard { position: relative; display: grid !important; grid-template-columns: auto minmax(190px, 1.25fr) minmax(120px, .72fr) minmax(130px, .8fr) auto; align-items: center; gap: 11px 14px !important; min-height: 70px; border: 1px solid #d9e2ec; border-radius: 10px; padding: 12px 13px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.procurementSettlementsPage .financeRedemptionVehicleCard:hover { border-color: #b9c6d5; }
.procurementSettlementsPage .financeRedemptionVehicleCard:has(input:checked) { border-color: #efb6b2; background: #fffafa; box-shadow: 0 0 0 2px rgb(180 35 24 / 5%); }
.procurementSettlementsPage .financeRedemptionVehicleCard.isBlocked { border-color: #e4e7ec; background: #f6f8fa; cursor: not-allowed; }
.procurementSettlementsPage .financeRedemptionVehicleCard > input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: #b42318; }
.procurementSettlementsPage .financeRedemptionVehicleIdentity,
.procurementSettlementsPage .financeRedemptionVehicleDatum { display: grid; min-width: 0; gap: 3px; }
.procurementSettlementsPage .financeRedemptionVehicleIdentity strong { overflow: hidden; color: #1d2939; font-size: 13px; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionVehicleIdentity span,
.procurementSettlementsPage .financeRedemptionVehicleDatum span { overflow: hidden; color: #98a2b3; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionVehicleDatum strong { overflow: hidden; color: #475467; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionVehicleCost strong { color: #101828; }
.procurementSettlementsPage .financeRedemptionVehicleCard > em { justify-self: end; border-radius: 999px; padding: 4px 8px; background: #ecfdf3; color: #067647; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionVehicleCard.isBlocked > em { background: #fef3f2; color: #b42318; }
.procurementSettlementsPage .financeRedemptionVehicleCard > small { grid-column: 2 / -1; margin-top: -5px; color: #b54708; }

.procurementSettlementsPage .financeRedemptionPaymentSection { gap: 14px; padding: 16px 18px; }
.procurementSettlementsPage .financeRedemptionPaymentGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.procurementSettlementsPage .financeRedemptionPaymentGrid > label:nth-child(2) { grid-column: span 2; }
.procurementSettlementsPage .financeRedemptionPaymentGrid > label { gap: 5px; font-size: 12px; font-weight: 600; }
.procurementSettlementsPage .financeRedemptionPaymentGrid label > span { color: #344054; font-size: 12px; font-weight: 600; }
.procurementSettlementsPage .financeRedemptionPaymentGrid label em { font-size: 10px; font-weight: 500; }
.procurementSettlementsPage .financeRedemptionPaymentGrid input,
.procurementSettlementsPage .financeRedemptionPaymentGrid select { min-height: 38px; padding: 7px 10px; font-size: 13px; font-weight: 500; }
.procurementSettlementsPage .financeRedemptionPaymentGrid input:disabled,
.procurementSettlementsPage .financeRedemptionPaymentGrid select:disabled { font-weight: 500; }
.procurementSettlementsPage .financeRedemptionPaymentGrid > label > small { font-size: 10px; line-height: 1.35; }
.procurementSettlementsPage .financeRedemptionPayeeHint { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #eaecf0; padding-top: 12px; }
.procurementSettlementsPage .financeRedemptionPayeeHint > div { display: flex; align-items: center; gap: 8px; }
.procurementSettlementsPage .financeRedemptionPayeeHint strong { color: #344054; font-size: 12px; }
.procurementSettlementsPage .financeRedemptionPayeeHint span { border-radius: 999px; padding: 3px 7px; background: #f2f4f7; color: #667085; font-size: 10px; font-weight: 700; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionPayeeHint p { margin: 0; color: #667085; font-size: 11px; text-align: right; }

.procurementSettlementsPage .financeRedemptionDocumentSection { align-content: start; gap: 13px; padding: 16px 18px; }
.procurementSettlementsPage .financeRedemptionDocumentHeader { align-items: flex-start !important; }
.procurementSettlementsPage .financeRedemptionDocumentHeader > div { display: grid; gap: 3px; }
.procurementSettlementsPage .financeRedemptionDocumentHeader p em { margin-left: 8px; color: #b42318; font-size: 11px; font-style: normal; font-weight: 700; }
.procurementSettlementsPage .financeRedemptionDocumentSection.isReady .financeRedemptionDocumentHeader p em { color: #067647; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments { display: grid; gap: 8px; border: 1px solid #cfe4d7; border-radius: 10px; padding: 11px 12px; background: #f6fbf8; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments strong { color: #344054; font-size: 12px; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments > div > span,
.procurementSettlementsPage .financeRedemptionLinkedDocuments > p { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #dcebe1; padding-top: 7px; color: #475467; font-size: 11px; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionLinkedDocuments a,
.procurementSettlementsPage .financeRedemptionLinkedDocuments li > em { flex: 0 0 auto; color: #067647; font-size: 10px; font-style: normal; font-weight: 800; text-decoration: none; }
.procurementSettlementsPage .financeRedemptionUpload { display: grid; gap: 7px !important; border: 1px dashed #c7d1dc; border-radius: 10px; padding: 12px; background: #f9fafb; }
.procurementSettlementsPage .financeRedemptionUpload > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.procurementSettlementsPage .financeRedemptionUpload em { color: #98a2b3; font-size: 10px; font-style: normal; font-weight: 500; }
.procurementSettlementsPage .financeRedemptionUpload .logisticsFileEmptyState { background: #fff; }

.procurementSettlementsPage .financeRedemptionTemplateDetails { border-top: 1px solid #eaecf0; padding-top: 10px; }
.procurementSettlementsPage .financeRedemptionTemplateDetails summary { color: #475467; cursor: pointer; font-size: 11px; font-weight: 700; }
.procurementSettlementsPage .financeRedemptionReadonlyFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.procurementSettlementsPage .financeRedemptionReadonlyFields > div { display: grid; min-width: 0; gap: 3px; border-radius: 8px; padding: 8px 9px; background: #f8fafc; }
.procurementSettlementsPage .financeRedemptionReadonlyFields span { color: #98a2b3; font-size: 9px; font-weight: 700; }
.procurementSettlementsPage .financeRedemptionReadonlyFields strong { overflow: hidden; color: #475467; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.procurementSettlementsPage .financeRedemptionWideField { grid-column: 1 / -1; }
.procurementSettlementsPage .financeRedemptionSubmissionHint { color: #667085; font-size: 11px; line-height: 1.5; }

.procurementSettlementsPage .financeRedemptionRequestForm .financeExpenseModalActions { position: sticky; bottom: 0; z-index: 3; margin: 0 -22px; padding: 13px 22px; border-top-color: #dfe4ea; background: rgb(255 255 255 / 96%); box-shadow: 0 -8px 20px rgb(16 24 40 / 6%); backdrop-filter: blur(8px); }
.procurementSettlementsPage .financeRedemptionRequestForm .financeExpenseModalActions > p { max-width: 58%; color: #475467; font-weight: 700; }
.procurementSettlementsPage .financeRedemptionRequestForm .financeExpenseModalActions .primaryButton { min-width: 142px; }

@media (max-width: 1100px) {
  .procurementSettlementsPage .financeExpensePageHeader { align-items: flex-start; flex-direction: column; gap: 10px; }
  .procurementSettlementsPage .financeExpenseHeaderHint { flex: none; justify-items: start; max-width: none; text-align: left; }
  .procurementSettlementsPage .financeExpenseToolbar { grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr) 76px 76px; }
}

@media (max-width: 920px) {
  .procurementSettlementsPage .financeRedemptionRequestForm { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeRedemptionRequestForm > * { grid-column: 1 !important; }
  .procurementSettlementsPage .financeRedemptionSummaryNote { display: grid; gap: 8px; }
  .procurementSettlementsPage .financeRedemptionSummaryNote ul { max-width: none; }
  .procurementSettlementsPage .financeRedemptionPaymentGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurementSettlementsPage .financeRedemptionPaymentGrid > label:nth-child(2) { grid-column: auto; }
}

@media (max-width: 760px) {
  .procurementSettlementsPage .financeExpenseTabs { overflow-x: auto; }
  .procurementSettlementsPage .financeExpenseTabs button { white-space: nowrap; }
  .procurementSettlementsPage .financeExpensePageHeader { align-items: flex-start; }
  .procurementSettlementsPage .financeExpenseHeaderHint { display: none; }
  .procurementSettlementsPage .financeExpenseBody { padding: 12px; }
  .procurementSettlementsPage .financeExpenseToolbar { grid-template-columns: 1fr 1fr; }
  .procurementSettlementsPage .financeExpenseSearch { grid-column: 1 / -1; }
  .procurementSettlementsPage .financeExpenseListHeader { display: none; }
  .procurementSettlementsPage .financeExpenseCard { grid-template-columns: 1fr 1fr; gap: 13px 16px; padding: 14px; }
  .procurementSettlementsPage .financeExpenseCard > div::before { color: #98a2b3; content: attr(data-label); font-size: 10px; font-weight: 700; }
  .procurementSettlementsPage .financeExpenseCard > button { grid-column: 1 / -1; }
  .procurementSettlementsPage .financeExpensePagination { justify-content: space-between; flex-wrap: wrap; }
  .procurementSettlementsPage .financeExpenseDetailModal { max-height: calc(100vh - 24px); border-radius: 12px; }
  .procurementSettlementsPage .financeExpenseDetailHeader { padding: 15px 16px; }
  .procurementSettlementsPage .financeExpenseDetailBody { padding: 14px; }
  .procurementSettlementsPage .financeExpenseWorkflow { grid-template-columns: 1fr 1fr; gap: 14px 8px; padding: 14px; }
  .procurementSettlementsPage .financeExpenseWorkflow li:not(:last-child)::after { display: none; }
  .procurementSettlementsPage .financeExpenseSummaryCards, .procurementSettlementsPage .financeExpenseAccountCards, .procurementSettlementsPage .financeExpenseDocumentChecklist, .procurementSettlementsPage .financeExpenseReconciliation, .procurementSettlementsPage .financeExpenseVoucherGroups { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeExpenseActionBar { align-items: stretch; flex-direction: column; padding: 13px 16px; }
  .procurementSettlementsPage .financeExpenseActionBar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .procurementSettlementsPage .financeExpenseModal { max-height: calc(100vh - 24px); border-radius: 12px; }
  .procurementSettlementsPage .financeExpenseModal .modalHeader { padding: 16px 18px; }
  .procurementSettlementsPage .financeExpenseModalBody { padding: 14px; }
  .procurementSettlementsPage .financeExpenseAutoFillBanner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .procurementSettlementsPage .financeExpenseFormSection { padding: 14px; }
  .procurementSettlementsPage .financeExpenseFormGrid { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeExpenseFullField { grid-column: auto; }
  .procurementSettlementsPage .financeExpenseModalActions { align-items: stretch; flex-direction: column; }
  .procurementSettlementsPage .financeExpenseModalActions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .procurementSettlementsPage .financeRedemptionModal .financeExpenseModalBody { padding: 12px 14px 0; }
  .procurementSettlementsPage .financeRedemptionModal .modalHeader { min-height: auto; padding: 18px 20px; }
  .procurementSettlementsPage .financeRedemptionSummaryGrid { grid-template-columns: 1fr; gap: 10px; }
  .procurementSettlementsPage .financeRedemptionVehicleCard { grid-template-columns: auto minmax(0, 1fr) auto; }
  .procurementSettlementsPage .financeRedemptionVehicleDatum { grid-column: 2; }
  .procurementSettlementsPage .financeRedemptionVehicleCard > em { grid-column: 3; grid-row: 1; }
  .procurementSettlementsPage .financeRedemptionVehicleCard > small { grid-column: 2 / -1; }
  .procurementSettlementsPage .financeRedemptionPayeeHint { align-items: flex-start; flex-direction: column; gap: 6px; }
  .procurementSettlementsPage .financeRedemptionPayeeHint p { text-align: left; }
  .procurementSettlementsPage .financeRedemptionReadonlyFields { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeRedemptionWideField { grid-column: auto; }
  .procurementSettlementsPage .financeRedemptionRequestForm .financeExpenseModalActions { margin-inline: -14px; padding: 12px 14px; }
  .procurementSettlementsPage .financeRedemptionRequestForm .financeExpenseModalActions > p { max-width: none; }
}

@media (max-width: 520px) {
  .procurementSettlementsPage .financeExpenseToolbar, .procurementSettlementsPage .financeExpenseCard { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeExpenseSearch, .procurementSettlementsPage .financeExpenseCard > button { grid-column: auto; }
  .procurementSettlementsPage .financeExpenseDetailHeader > div:last-child > .financeExpenseStatusBadge { display: none; }
  .procurementSettlementsPage .financeExpenseWorkflow { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeExpenseActionBar > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .procurementSettlementsPage .financeShell .main { padding: 22px 20px 42px; }
  .procurementSettlementsPage .financeShell .customsPageHeader { align-items: flex-start; }
  .procurementSettlementsPage .financeRefundToolbar { grid-template-columns: minmax(220px, 1fr) 170px auto; }
  .procurementSettlementsPage .refundWorkflowGrid,
  .procurementSettlementsPage .refundDetailGrid { grid-template-columns: 1fr; }
  .procurementSettlementsPage .refundApplicationModalBackdrop { padding: 12px; }
  .procurementSettlementsPage .refundApplicationModalDialog { max-height: calc(100vh - 24px); }
  .procurementSettlementsPage .refundWorkflowGridInModal { grid-template-columns: 1fr; }
  .procurementSettlementsPage .refundSubmitCard { position: static; }
}

@media (max-width: 640px) {
  .procurementSettlementsPage .refundApplicationModalFooter { grid-template-columns: 1fr; align-items: stretch; gap: 9px; }
  .procurementSettlementsPage .refundApplicationModalFooter > div { justify-content: space-between; }
  .procurementSettlementsPage .refundApplicationModalFooter small { display: none; }
  .procurementSettlementsPage .refundApplicationModalFooter .refundSubmitButton { width: 100%; }
}

@media (max-width: 700px) {
  .procurementSettlementsPage .financeShell .main { padding: 18px 14px 34px; }
  .procurementSettlementsPage .financeShell .customsPageHeader { align-items: stretch; }
  .procurementSettlementsPage .financeShell .customsPageHeader .customsSecondaryButton { width: 100%; }
  .procurementSettlementsPage .financeRefundToolbar { grid-template-columns: 1fr; }
  .procurementSettlementsPage .financeRefundToolbar input,
  .procurementSettlementsPage .financeRefundToolbar select,
  .procurementSettlementsPage .financeRefundToolbar button { width: 100%; }
  .procurementSettlementsPage .financeRefundPagination { align-items: flex-start; flex-direction: column; }
  .procurementSettlementsPage .financeRefundPaginationActions { width: 100%; justify-content: space-between; }
  .procurementSettlementsPage .refundSummaryGrid,
  .procurementSettlementsPage .refundFormGrid { grid-template-columns: 1fr; }
  .procurementSettlementsPage .refundFullField { grid-column: auto; }
  .procurementSettlementsPage .refundMaterialHeader { flex-wrap: wrap; }
  .procurementSettlementsPage .refundMaterialTemplateLink { margin-left: 49px; }
  .procurementSettlementsPage .refundMaterialUploadAction { display: none; }
}

.procurementSettlementsPage .expenseBackfillPage, .procurementSettlementsPage.expenseBackfillPage { max-width: 1640px; }
.procurementSettlementsPage .expenseBackfillRemoveButton { color: #a92b32; background: #fff; border: 1px solid #e8b9bd; border-radius: 7px; padding: 7px 12px; cursor: pointer; }
.procurementSettlementsPage .expenseBackfillRemoveButton:disabled { opacity: .5; cursor: not-allowed; }
.procurementSettlementsPage .expenseBackfillRemoval { background: #fff7f7; border: 1px solid #efd5d7; border-radius: 8px; padding: 12px; margin-bottom: 12px; overflow-wrap: anywhere; }
.procurementSettlementsPage .expenseBackfillRemoval p { margin: 0 0 10px; }
.procurementSettlementsPage .expenseBackfillRemoval .expenseBackfillHeaderActions { margin-top: 10px; }
.procurementSettlementsPage .expenseBackfillHeaderActions, .procurementSettlementsPage .expenseBackfillPagination, .procurementSettlementsPage .expenseBackfillSectionTitle, .procurementSettlementsPage .expenseBackfillSaveRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.procurementSettlementsPage .expenseBackfillHeaderActions a { text-decoration: none; }
.procurementSettlementsPage .expenseBackfillFilters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; background: #fff; padding: 18px; border: 1px solid #dfe5ee; border-radius: 12px; margin: 20px 0; }
.procurementSettlementsPage .expenseBackfillPage label, .procurementSettlementsPage.expenseBackfillPage label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #526078; min-width: 0; }
.procurementSettlementsPage .expenseBackfillPage input:not([type=checkbox]):not([type=file]), .procurementSettlementsPage.expenseBackfillPage input:not([type=checkbox]):not([type=file]), .procurementSettlementsPage .expenseBackfillPage select, .procurementSettlementsPage.expenseBackfillPage select, .procurementSettlementsPage .expenseBackfillPage textarea, .procurementSettlementsPage.expenseBackfillPage textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #d4dce7; padding: 9px 10px; border-radius: 7px; color: #23334a; background: #fff; font: inherit; }
.procurementSettlementsPage .expenseBackfillFilters label:first-child { flex: 1 1 260px; }
.procurementSettlementsPage .expenseBackfillNotice { padding: 12px 16px; color: #116746; background: #eaf8f0; border-radius: 8px; }
.procurementSettlementsPage .expenseBackfillError { color: #ac2832; background: #fff1f2; padding: 12px; border-radius: 8px; }
.procurementSettlementsPage .expenseBackfillTableWrap { overflow-x: auto; border: 1px solid #e1e7ef; border-radius: 12px; background: white; }
.procurementSettlementsPage .expenseBackfillTable { width: 100%; min-width: 1020px; border-collapse: collapse; font-size: 13px; }
.procurementSettlementsPage .expenseBackfillTable th { padding: 14px 12px; background: #f7f9fc; color: #596980; font-weight: 500; text-align: left; }
.procurementSettlementsPage .expenseBackfillTable td { padding: 16px 12px; border-top: 1px solid #eef1f5; vertical-align: top; }
.procurementSettlementsPage .expenseBackfillTable small { display: block; color: #718096; margin-top: 6px; }
.procurementSettlementsPage .expenseBackfillAmount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.procurementSettlementsPage .expenseBackfillAssociations { max-width: 230px; overflow-wrap: anywhere; line-height: 1.6; }
.procurementSettlementsPage .expenseBackfillBadge { background: #f0f3f8; color: #5a687d; border-radius: 6px; padding: 4px 8px; display: inline-block; }
.procurementSettlementsPage .expenseBackfillBadge.paid { background: #e8f7ef; color: #147452; }
.procurementSettlementsPage .expenseBackfillEmpty { padding: 64px; text-align: center; color: #8b96a8; }
.procurementSettlementsPage .expenseBackfillPagination { justify-content: flex-end; margin-top: 16px; color: #6b7a90; }
.procurementSettlementsPage .expenseBackfillPagination button { border: 1px solid #d6deea; border-radius: 7px; padding: 7px 12px; background: #fff; }
.procurementSettlementsPage .expenseBackfillBackdrop { padding: 24px; z-index: 1000; }
.procurementSettlementsPage .expenseBackfillEditor { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; }
.procurementSettlementsPage .expenseBackfillEditorHeader { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.procurementSettlementsPage .expenseBackfillEditorHeader h2 { font-size: 21px; margin: 0; }
.procurementSettlementsPage .expenseBackfillEditorHeader p, .procurementSettlementsPage .expenseBackfillHint, .procurementSettlementsPage .expenseBackfillSaveRow span { color: #718096; font-size: 13px; line-height: 1.6; }
.procurementSettlementsPage .expenseBackfillEditorHeader > button { border: none; background: #f2f5f9; border-radius: 8px; font-size: 22px; width: 36px; height: 36px; }
.procurementSettlementsPage .expenseBackfillSection { border: 1px solid #e1e7ef; border-radius: 10px; padding: 18px; margin: 18px 0; min-width: 0; }
.procurementSettlementsPage .expenseBackfillSection legend { color: #34445b; font-weight: 600; font-size: 15px; padding: 0 6px; }
.procurementSettlementsPage .expenseBackfillSection h3 { font-size: 15px; margin: 0 0 14px; }
.procurementSettlementsPage .expenseBackfillSectionTitle { justify-content: space-between; margin-bottom: 12px; }
.procurementSettlementsPage .expenseBackfillSectionTitle h3 { margin: 0; }
.procurementSettlementsPage .expenseBackfillSectionTitle span { color: #6a7b94; font-size: 13px; }
.procurementSettlementsPage .expenseBackfillFormGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.procurementSettlementsPage .expenseBackfillItem { border: 1px solid #e6ebf2; border-radius: 8px; padding: 14px; margin: 14px 0; min-width: 0; }
.procurementSettlementsPage .expenseBackfillItemFields { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.procurementSettlementsPage .expenseBackfillItemFields label { flex: 1 1 160px; }
.procurementSettlementsPage .expenseBackfillLinkSearch { display: grid; grid-template-columns: 140px minmax(150px, 1fr) auto; gap: 10px; align-items: center; margin-top: 12px; }
.procurementSettlementsPage .expenseBackfillReferenceResults, .procurementSettlementsPage .expenseBackfillChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.procurementSettlementsPage .expenseBackfillReferenceResults button, .procurementSettlementsPage .expenseBackfillChips span { border: 1px solid #cddfec; background: #f2f8fe; color: #315c87; border-radius: 7px; padding: 7px 9px; font-size: 12px; overflow-wrap: anywhere; }
.procurementSettlementsPage .expenseBackfillChips button { border: none; background: none; color: #657791; padding: 0 0 0 8px; }
.procurementSettlementsPage .expenseBackfillLinkPicker small { color: #8a96a8; display: block; padding-top: 8px; }
.procurementSettlementsPage .expenseBackfillUpload { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.procurementSettlementsPage .expenseBackfillUpload .expenseBackfillFileButton { position: relative; cursor: pointer; color: #fff; }
.procurementSettlementsPage .expenseBackfillFileButton input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.procurementSettlementsPage .expenseBackfillFileButton.disabled { opacity: .55; cursor: not-allowed; }
.procurementSettlementsPage .expenseBackfillDocument { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #edf1f5; }
.procurementSettlementsPage .expenseBackfillDocument > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; overflow-wrap: anywhere; }
.procurementSettlementsPage .expenseBackfillDocument small { color: #77879c; }
.procurementSettlementsPage .expenseBackfillDocumentActions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.procurementSettlementsPage .expenseBackfillDocumentActions input { max-width: 140px; }
.procurementSettlementsPage .expenseBackfillWideLabel { margin-bottom: 12px; }
.procurementSettlementsPage .expenseBackfillAcknowledge { display: flex !important; flex-direction: row !important; align-items: start; margin: 14px 0; }
.procurementSettlementsPage .expenseBackfillAcknowledge input { margin-top: 2px; }
@media (max-width: 850px) { .procurementSettlementsPage .expenseBackfillFormGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .procurementSettlementsPage .expenseBackfillDocument { align-items: start; flex-direction: column; } }
@media (max-width: 540px) { .procurementSettlementsPage .expenseBackfillBackdrop { padding: 8px; } .procurementSettlementsPage .expenseBackfillEditor { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 14px; } .procurementSettlementsPage .expenseBackfillFormGrid { grid-template-columns: 1fr; } .procurementSettlementsPage .expenseBackfillLinkSearch { grid-template-columns: 1fr; } .procurementSettlementsPage .expenseBackfillSection { padding: 12px; } }
.procurementSettlementsPage .expenseBackfillTable { table-layout: auto; }
.procurementSettlementsPage .expenseBackfillTable td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }
.procurementSettlementsPage .expenseBackfillTable td.expenseBackfillAssociations { min-width: 180px; max-width: 230px; }
.procurementSettlementsPage .expenseBackfillTable td.expenseBackfillAmount { white-space: nowrap; }

.procurementSettlementsPage .expenseBackfillEmbedded { max-width: none; margin-top: 24px; }
.procurementSettlementsPage .expenseBackfillEmbedded .pageHeader { margin-bottom: 12px; }
.procurementSettlementsPage .expenseBackfillEmbedded .pageHeader h2 { margin: 0 0 8px; font-size: 21px; }
.procurementSettlementsPage .expenseBackfillEmbedded .pageHeader p { color: #64748b; font-size: 14px; line-height: 1.6; }
.procurementSettlementsPage .expenseBackfillWarehouseLink { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 12px 0; }
.procurementSettlementsPage .expenseBackfillWarehouseLink label { display: grid; gap: 6px; min-width: 180px; flex: 1; }

.procurementSettlementsPage .pageHeader { gap: 16px; }
.procurementSettlementsPage .expenseBackfillFilters label { flex: 0 1 160px; }
.procurementSettlementsPage .expenseBackfillFilters label:first-child { flex: 1 1 260px; }
.procurementSettlementsPage .procurementSettlementTable th,
.procurementSettlementsPage .procurementSettlementTable td {
  text-align: center;
  vertical-align: middle;
  line-height: 1.6;
}
.procurementSettlementsPage .procurementSettlementTable .procurementSettlementMoney {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.procurementSettlementsPage .procurementSettlementTable tbody tr:hover td { background: #f8fafc; }
.procurementSettlementsPage .procurementSettlementFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.procurementSettlementsPage .procurementSettlementFacts div { min-width: 0; overflow-wrap: anywhere; }
.procurementSettlementsPage .procurementSettlementFacts dt { color: #718096; font-size: 13px; margin-bottom: 6px; }
.procurementSettlementsPage .procurementSettlementFacts dd { margin: 0; }
.procurementSettlementsPage .procurementSettlementVins { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .procurementSettlementsPage .pageHeader { align-items: start; flex-direction: column; }
  .procurementSettlementsPage .procurementSettlementFacts { grid-template-columns: 1fr; }
  .procurementSettlementsPage .expenseBackfillFilters label { flex: 1 1 140px; }
}