.side{overflow:hidden}.side nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}.side nav::-webkit-scrollbar{width:5px}.side nav::-webkit-scrollbar-thumb{background:#376264;border-radius:9px}.side .profile{flex:0 0 auto}.payment-page{width:100%;max-width:none}.payment-title{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.payment-title small{color:var(--teal);font-weight:bold;letter-spacing:1.8px}.payment-title h1{font-size:30px;margin:7px 0}.payment-title p{color:var(--muted);font-size:12px}.payment-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.payment-summary article{background:#fff;border:1px solid var(--line);border-radius:9px;padding:18px}.payment-summary span,.payment-summary strong{display:block}.payment-summary span{font-size:10px;color:var(--muted)}.payment-summary strong{font-size:25px;margin-top:9px}.payment-list{display:grid;gap:14px}.payment-card{padding:25px}.payment-card-top{display:flex;justify-content:space-between;gap:28px}.payment-card-top h2{font-size:19px;margin:7px 0}.payment-card-top p{font-size:12px;color:var(--muted);margin:0;max-width:720px}.payment-id{font-size:9px;color:var(--teal);font-weight:bold;letter-spacing:1px}.payment-amount{text-align:right}.payment-amount strong,.payment-amount span{display:block}.payment-amount strong{font-size:24px}.payment-state{font-size:10px;margin-top:8px;padding:5px 8px;border-radius:99px;background:#edf3f1;color:#58706a}.state-approved_pending_payment{background:#e4f4ff;color:#176f9e}.state-paid{background:#e1f5ec;color:#167448}.state-rejected{background:#fdebea;color:#a84e44}.approval-track{display:grid;grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto minmax(20px,1fr) auto;align-items:center;margin-top:27px;padding-top:24px;border-top:1px solid var(--line)}.approval-step{display:flex;align-items:center;gap:10px;min-width:145px}.approval-step i{width:31px;height:31px;border-radius:50%;background:#eef2f0;color:#82908c;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:bold}.approval-step.done i{background:var(--teal);color:#fff}.approval-step.current i{background:#dff3ee;color:var(--teal);box-shadow:0 0 0 5px #eff9f6}.approval-step small,.approval-step b,.approval-step span{display:block}.approval-step small{font-size:8px;color:var(--muted);letter-spacing:.8px}.approval-step b{font-size:11px;margin:3px 0}.approval-step span{font-size:9px;color:var(--muted)}.approval-line{height:2px;background:#e7ecea}.approval-line.done{background:var(--teal)}.payment-actions{display:flex;justify-content:flex-end;margin-top:20px}.payment-actions button{width:auto;min-width:160px}.payment-form{width:min(760px,100%);max-height:calc(100vh - 40px);overflow-y:auto}.payment-form .head small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.payment-rule{background:#edf7f4;border-left:3px solid var(--teal);padding:11px;font-size:10px;color:#4d6963}.payment-modal-bg{overflow-y:auto}.payment-modal-bg .modal{margin:auto}@media(max-width:1050px){.approval-track{grid-template-columns:1fr;gap:10px}.approval-line{width:2px;height:18px;margin-left:15px}.payment-summary{grid-template-columns:1fr 1fr}}@media(max-width:600px){.payment-title,.payment-card-top{align-items:stretch;flex-direction:column}.payment-amount{text-align:left}.payment-summary{grid-template-columns:1fr 1fr}.payment-summary article{padding:14px}.payment-card{padding:18px}.payment-actions button{width:100%}}