.payment-trigger {
    border:0;
    background:transparent;
    cursor:pointer;
    padding:5px;
    color:#526578;
    font:600 12px/23px system-ui,sans-serif;
    min-width:33px;
    vertical-align:middle;
    border-radius:6px
}
.payment-trigger:hover {
    background:#edf2f5
}
.payment-trigger span {
    display:block;
    width:23px;
    height:23px;
    background:currentColor;
    mask:url('/public/payment-money.png') center/contain no-repeat;
    -webkit-mask:url('/public/payment-money.png') center/contain no-repeat
}
.payment-trigger.is-complete {
    color:#168548
}
/* Keep the completed icon green even on the dashboard's subdued finished rows. */
.payment-trigger.is-complete span {
    background:#168548
}
.payment-dialog {
    position:fixed;
    inset:0;
    margin:auto;
    width:min(560px,calc(100vw - 32px));
    max-height:85vh;
    overflow:auto;
    box-sizing:border-box;
    border:1px solid #e3e8ed;
    border-radius:18px;
    padding:28px;
    color:#243344;
    box-shadow:0 24px 80px #12233940;
    font:14px system-ui,sans-serif
}
.payment-dialog::backdrop {
    background:#14233580;
    backdrop-filter:blur(3px)
}
.payment-dialog header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px
}
.payment-dialog h2 {
    font-size:25px;
    margin:5px 0 8px
}
.payment-dialog p {
    line-height:1.5
}
.payment-eyebrow {
    font-size:10px;
    letter-spacing:1.6px;
    color:#627687;
    margin:0
}
.payment-dialog header p:last-child {
    margin:0;
    color:#627687;
    overflow-wrap:anywhere
}
.payment-dialog button {
    cursor:pointer;
    border:1px solid #dbe2e8;
    border-radius:8px;
    padding:9px 13px;
    background:#fff;
    color:#34495e;
    font:inherit
}
.payment-dialog button:disabled {
    opacity:.55;
    cursor:wait
}
.payment-help {
    color:#627687;
    margin:22px 0
}
.payment-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 140px;
    gap:20px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #edf0f3
}
.payment-head {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:#71808f;
    padding:8px 0
}
.payment-grid label {
    overflow-wrap:anywhere
}
.payment-grid small {
    display:block;
    color:#71808f;
    font-size:11px;
    margin-top:5px
}
.payment-amount {
    display:flex;
    align-items:center;
    border:1px solid #dbe2e8;
    border-radius:8px;
    padding:0 10px;
    gap:6px
}
.payment-amount input {
    min-width:0;
    width:100%;
    border:0;
    padding:11px 0;
    text-align:right;
    font:inherit;
    background:transparent;
    color:inherit
}
.payment-amount:focus-within {
    outline:2px solid #5595bc
}
.payment-amount input:focus {
    outline:none
}
.payment-summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:16px
}
.payment-summary strong {
    font-size:13px
}
.payment-dialog footer {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px
}
.payment-dialog .payment-save {
    background:#176f4b;
    border-color:#176f4b;
    color:white
}
.payment-dialog [data-status] {
    color:#825222;
    min-height:20px;
    font-size:13px
}
@media(max-width:480px) {
    .payment-dialog {
    padding:20px
}
.payment-grid {
    grid-template-columns:minmax(0,1fr) 110px;
    gap:12px
}
.payment-summary {
    align-items:flex-start;
    flex-direction:column
}

}
@media print {
    .payment-trigger,.payment-dialog {
    display:none!important
}

}