/* Recimetal · visual refresh for every payment screen (Demo) */
.h2hWorkflow,
.manualPaymentRequest {
  --pay-ink: #184632;
  --pay-ink-soft: #315f4b;
  --pay-muted: #70857a;
  --pay-line: #dcebe2;
  --pay-surface: #ffffff;
  --pay-surface-soft: #f4faf6;
  --pay-green: #079447;
  --pay-green-dark: #075f35;
  background:
    radial-gradient(circle at 92% 3%, rgba(105, 211, 153, .16), transparent 27rem),
    linear-gradient(180deg, #f8fcf9 0, #f4f8f5 100%);
  color: var(--pay-ink-soft);
}

/* Page headers */
.h2hWorkflow .h2hWorkflowHero,
.manualPaymentRequest .manualPaymentHero {
  background: linear-gradient(118deg, #0a3829 0%, #0b5c39 62%, #0b7040 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 22px;
  margin: 0 0 18px;
  min-height: 126px !important;
  padding: 24px 28px !important;
  box-shadow: 0 18px 42px rgba(8, 56, 39, .18);
}

.h2hWorkflow .h2hWorkflowHero p,
.manualPaymentRequest .manualPaymentHero p {
  color: #83e7ac;
  font-weight: 800;
}

.h2hWorkflow .h2hWorkflowHero h1,
.manualPaymentRequest .manualPaymentHero h1 {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.025em;
}

.h2hWorkflow .h2hWorkflowHero > div:first-child > span,
.manualPaymentRequest .manualPaymentHero > div:first-child > span {
  color: #c8dfd3;
}

.h2hWorkflow .h2hWorkflowEnvironment,
.manualPaymentRequest .h2hEnvironmentBadge {
  color: #704508;
  background: #fff8e9;
  border-color: #f1d08e;
  border-radius: 14px;
  padding: 12px 17px;
  box-shadow: 0 8px 20px rgba(27, 48, 38, .11);
}

/* Shared surfaces and softer typography */
.h2hWorkflow .h2hPanel,
.h2hWorkflow .h2hDashboardGrid > article,
.h2hWorkflow .h2hKpis article,
.h2hWorkflow .h2hApprovalCards article,
.h2hWorkflow .h2hBatchCards article,
.h2hWorkflow .h2hReconciliationCards article,
.manualPaymentRequest .manualPaymentForm,
.manualPaymentRequest .manualRequestList {
  border-color: var(--pay-line);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(17, 70, 46, .08);
}

.h2hWorkflow .h2hPanel > header,
.manualPaymentRequest .manualPaymentForm > header,
.manualPaymentRequest .manualRequestList > header {
  background: linear-gradient(90deg, #f0f9f4, #fbfdfc);
  border-color: var(--pay-line);
  padding: 16px 18px;
}

.h2hWorkflow b,
.h2hWorkflow strong,
.manualPaymentRequest b,
.manualPaymentRequest strong {
  color: var(--pay-ink);
  font-weight: 600;
}

.h2hWorkflow small,
.h2hWorkflow em,
.manualPaymentRequest small,
.manualPaymentRequest em {
  color: var(--pay-muted);
}

.h2hWorkflow .h2hPanel > header b,
.manualPaymentRequest .manualPaymentForm > header strong,
.manualPaymentRequest .manualRequestList > header b {
  color: var(--pay-green-dark);
  font-weight: 600;
}

/* Search, filters and fields */
.h2hWorkflow input,
.h2hWorkflow select,
.h2hWorkflow textarea,
.manualPaymentRequest input,
.manualPaymentRequest select,
.manualPaymentRequest textarea {
  color: #214f3a;
  border-color: #c5ded0;
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.h2hWorkflow input:focus,
.h2hWorkflow select:focus,
.h2hWorkflow textarea:focus,
.manualPaymentRequest input:focus,
.manualPaymentRequest select:focus,
.manualPaymentRequest textarea:focus {
  border-color: #38ad6e;
  outline: none;
  box-shadow: 0 0 0 4px rgba(56, 173, 110, .14);
}

/* Request lists and bank monitor tables */
.h2hWorkflow .h2hRequestTable > div,
.h2hWorkflow .h2hMonitorTable > div,
.manualPaymentRequest .manualRequestTable > div {
  color: #416b57;
  background: linear-gradient(90deg, #e9f5ee, #f1f8f4);
  border-color: #d6e8de;
  padding-top: 13px;
  padding-bottom: 13px;
  font-weight: 650;
  letter-spacing: .035em;
}

.h2hWorkflow .h2hRequestTable article,
.h2hWorkflow .h2hMonitorTable article,
.manualPaymentRequest .manualRequestTable article {
  background: rgba(255, 255, 255, .96);
  border-color: #e5eee9;
  padding-top: 15px;
  padding-bottom: 15px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.h2hWorkflow .h2hRequestTable article:nth-of-type(even),
.h2hWorkflow .h2hMonitorTable article:nth-of-type(even),
.manualPaymentRequest .manualRequestTable article:nth-of-type(even) {
  background: #fbfdfc;
}

.h2hWorkflow .h2hRequestTable article:hover,
.h2hWorkflow .h2hMonitorTable article:hover,
.manualPaymentRequest .manualRequestTable article:hover {
  position: relative;
  z-index: 1;
  background: #f0faf4;
  box-shadow: inset 4px 0 #19a75a, 0 8px 22px rgba(15, 89, 51, .08);
}

.h2hWorkflow .h2hRequestTable article > span:first-child b,
.manualPaymentRequest .manualRequestTable article > span:first-child b {
  color: #087343;
  font-weight: 650;
}

.h2hWorkflow .h2hRequestTable article > span:nth-child(2) b {
  color: #315e49;
  font-weight: 560;
}

.h2hWorkflow .h2hRequestTable article > span:nth-child(4) b,
.h2hWorkflow .h2hRequestTable article > span:nth-child(4) strong {
  color: #075f35;
  font-size: 17px;
  font-weight: 650;
}

/* Actions and state pills */
.h2hWorkflow .h2hPanel button,
.manualPaymentRequest button {
  border-radius: 11px;
}

.h2hWorkflow .h2hRowActions button,
.h2hWorkflow .h2hApprovalRequestList > article > button {
  color: #fff;
  background: linear-gradient(135deg, #0a9948, #08753d);
  border-color: #087b40;
  box-shadow: 0 5px 13px rgba(7, 117, 61, .16);
}

.h2hWorkflow .h2hStatus,
.manualPaymentRequest .statusReview {
  border: 1px solid #d9e6df;
  padding: 5px 10px;
  font-weight: 600;
}

.h2hWorkflow .h2hStatus.awaiting_auth,
.h2hWorkflow .h2hStatus.in_review,
.h2hWorkflow .h2hStatus.pending_bank,
.h2hWorkflow .h2hStatus.pending_bank_approval {
  color: #805408;
  background: #fff4d6;
  border-color: #f4d99a;
}

.h2hWorkflow .h2hStatus.approved,
.h2hWorkflow .h2hStatus.matched,
.h2hWorkflow .h2hStatus.paid,
.h2hWorkflow .h2hStatus.ready {
  color: #08703a;
  background: #e3f8eb;
  border-color: #b9e4c9;
}

/* New payment wizard */
.manualPaymentRequest .manualWizardSteps {
  background: rgba(247, 252, 249, .94);
  border-color: #d9e9df;
  border-radius: 17px;
  padding: 9px;
  box-shadow: 0 10px 28px rgba(17, 70, 46, .08);
}

.manualPaymentRequest .manualWizardSteps button {
  color: #668075;
  font-weight: 560;
}

.manualPaymentRequest .manualWizardSteps button.active {
  color: #07683a;
  border-color: #8bd0a6;
  box-shadow: 0 7px 18px rgba(14, 105, 57, .11);
}

.manualPaymentRequest .manualFormGrid label > span,
.manualPaymentRequest .supplierLookup label > span,
.manualPaymentRequest .weighingLookup label > span,
.manualPaymentRequest .bankLookup label > span {
  color: #47705d;
  font-weight: 600;
}

.manualPaymentRequest .manualDocuments label {
  color: var(--pay-ink-soft);
  background: #f9fcfa;
  border-color: #9dc8ae;
  border-radius: 15px;
}

.manualPaymentRequest .manualPaymentSubmit {
  border-color: #dce9e1 !important;
}

.manualPaymentRequest .manualPaymentSubmit button:not(.secondary) {
  background: linear-gradient(135deg, #0baa50, #08793f);
  box-shadow: 0 7px 18px rgba(7, 121, 63, .18);
  font-weight: 650;
}

/* Approval, batch and H2H screens */
.h2hWorkflow .h2hWorkflowTabs {
  background: rgba(241, 248, 244, .9);
  border-color: var(--pay-line);
  border-radius: 16px;
}

.h2hWorkflow .h2hWorkflowTabs button {
  color: #557164;
  font-weight: 560;
}

.h2hWorkflow .h2hWorkflowTabs button.active {
  color: #07683a;
  border-color: #85cba0;
  box-shadow: 0 6px 16px rgba(14, 105, 57, .1);
}

.h2hWorkflow .h2hKpis article {
  background: linear-gradient(145deg, #fff, #f7fbf8);
}

.h2hWorkflow .h2hKpis article > b {
  color: #0c6c3e;
  font-weight: 600;
}

.h2hWorkflow .h2hApprovalRequestList > article,
.h2hWorkflow .h2hApprovalDetail,
.h2hWorkflow .h2hBatchStepBody {
  color: var(--pay-ink-soft);
}

/* Payment file/detail */
.h2hWorkflow .h2hRequestFile {
  background: linear-gradient(180deg, #f3f8f5, #f7f5f1);
}

.h2hWorkflow .h2hFileHero {
  background: linear-gradient(118deg, #092f23, #0b6040 70%, #11754a);
}

.h2hWorkflow .h2hFileHero h1 {
  color: #fff;
  font-weight: 520;
}

.h2hWorkflow .h2hFileHero small {
  color: #9ce4b7;
  font-weight: 650;
}

.h2hWorkflow .h2hFileHeroTitle > span,
.h2hWorkflow .h2hFileHeroAmount > span {
  color: #c8ddd2;
  font-weight: 400;
}

.h2hWorkflow .h2hFileHeroAmount strong {
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}

.h2hWorkflow .h2hFileHeroActions button {
  font-weight: 600;
}

.h2hWorkflow .h2hFileCard,
.h2hWorkflow .h2hFileRoute {
  border-color: #dce7e0;
  box-shadow: 0 13px 34px rgba(20, 57, 40, .08);
}

.h2hWorkflow .h2hFileCard h2,
.h2hWorkflow .h2hFileRoute h2,
.h2hWorkflow .h2hFileFinanceGrid b,
.h2hWorkflow .h2hFileInfoGrid b {
  color: #23513b;
  font-weight: 550;
}

/* Keep emphasis intentional: titles and amounts stand out, body copy stays calm. */
.h2hWorkflow .h2hRequestTable article b,
.h2hWorkflow .h2hApprovalRequestList article b,
.h2hWorkflow .h2hApprovalRequestList article strong,
.h2hWorkflow .h2hApprovalCards article b,
.h2hWorkflow .h2hBatchCards article b,
.h2hWorkflow .h2hMonitorTable article b,
.h2hWorkflow .h2hLiquidityTable article b,
.manualPaymentRequest .manualRequestTable article b {
  font-weight: 560;
}

.h2hWorkflow button,
.manualPaymentRequest button {
  font-weight: 600 !important;
}

.h2hWorkflow label,
.manualPaymentRequest label {
  font-weight: 500;
}

/* Approval inbox: balanced filters and a real table hierarchy. */
.h2hWorkflow .h2hApprovalScopeNotice {
  color: #315f4b;
  background: linear-gradient(90deg, #eaf8ef, #f4fbf7);
  border-left-color: #10a251;
  border-radius: 10px;
  margin: 12px 16px;
  padding: 12px 15px;
}

.h2hWorkflow .h2hApprovalScopeNotice b {
  color: #08683b;
  font-weight: 600;
}

.h2hWorkflow .h2hApprovalFilters {
  background: #fbfdfc;
  border-top: 1px solid #e7efe9;
  border-bottom-color: #dce9e1;
  gap: 11px;
  padding: 16px;
}

.h2hWorkflow .h2hApprovalFilters label {
  color: #557267;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 11px;
  font-weight: 560;
}

.h2hWorkflow .h2hApprovalFilters label > span,
.h2hWorkflow .h2hApprovalFilters label.search > span {
  color: #557267;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 560;
  line-height: 1.3 !important;
}

.h2hWorkflow .h2hApprovalFilters input,
.h2hWorkflow .h2hApprovalFilters select,
.h2hWorkflow .h2hApprovalFilters label.search input {
  height: 42px;
  min-height: 42px;
  padding: 0 11px;
  font-size: 12px;
}

.h2hWorkflow .h2hApprovalFilters button.clear {
  color: #087040;
  background: #f2faf5;
  border-color: #abd2ba;
  height: 42px;
  padding: 0 15px;
  box-shadow: none;
}

.h2hWorkflow .h2hApprovalResults {
  color: #617a6e;
  background: linear-gradient(90deg, #f1f7f3, #fafcfb);
  border-bottom: 1px solid #dfeae3;
  padding: 11px 16px;
}

.h2hWorkflow .h2hApprovalResults b {
  color: #215a3d;
  font-weight: 600;
}

.paymentApprovalTableHead,
.h2hWorkflow .h2hApprovalRequestList > article {
  grid-template-columns: 1.05fr 1.25fr 1.05fr 1.15fr .75fr 115px 126px;
  align-items: center;
  gap: 14px;
}

.paymentApprovalTableHead {
  color: #466a59;
  background: linear-gradient(90deg, #e9f4ed, #f1f8f4);
  border-bottom: 1px solid #d8e7de;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: grid;
}

.paymentApprovalTableHead span:nth-last-child(-n+2) {
  text-align: right;
}

.h2hWorkflow .h2hApprovalRequestList > article {
  min-height: 80px;
  padding: 13px 16px;
}

.h2hWorkflow .h2hApprovalRequestList > article > span {
  gap: 3px;
}

.h2hWorkflow .h2hApprovalRequestList > article b {
  color: #315845;
  font-weight: 500;
  line-height: 1.35;
}

.h2hWorkflow .h2hApprovalRequestList > article > span:first-child b {
  color: #087043;
  font-weight: 600;
}

.h2hWorkflow .h2hApprovalRequestList > article > strong {
  color: #075f35;
  text-align: right;
  font-size: 16px;
  font-weight: 620;
}

.h2hWorkflow .h2hApprovalRequestList > article > button {
  justify-self: end;
  min-width: 118px;
  min-height: 40px;
  padding: 8px 13px;
}

@media (min-width: 1001px) {
  .h2hWorkflow .h2hApprovalRequestList > article > span:nth-child(n + 2) > small:first-child {
    display: none;
  }
}

@media (max-width: 1250px) {
  .paymentApprovalTableHead {
    display: none;
  }

  .h2hWorkflow .h2hApprovalRequestList > article {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .h2hWorkflow .h2hApprovalRequestList > article > strong {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .h2hWorkflow .h2hWorkflowHero,
  .manualPaymentRequest .manualPaymentHero {
    border-radius: 16px;
    min-height: 0 !important;
    padding: 20px !important;
  }

  .h2hWorkflow .h2hWorkflowHero h1,
  .manualPaymentRequest .manualPaymentHero h1 {
    font-size: 28px;
  }

  .h2hWorkflow .h2hPanel,
  .manualPaymentRequest .manualPaymentForm,
  .manualPaymentRequest .manualRequestList {
    border-radius: 15px;
  }
}