/* =========================================================
   PAYMENTS MODULE — PREMIUM SCOPED UI
   File: assets/css/payments.css
   All rules are scoped to .payments-page
   ========================================================= */
.payments-page{--pay-blue:#2563eb;--pay-blue-700:#1d4ed8;--pay-green:#16a34a;--pay-green-bg:#ebfaf1;--pay-red:#ef4444;--pay-red-bg:#fff1f2;--pay-purple:#7c3aed;--pay-purple-bg:#f5f3ff;--pay-orange:#f97316;--pay-amber:#f59e0b;--pay-ink:#0f174a;--pay-text:#172554;--pay-muted:#53668f;--pay-line:#e4eaf4;--pay-soft:#f7faff;--pay-shadow:0 8px 26px rgba(25,47,88,.055);display:grid;gap:16px;color:var(--pay-text);font-size:13px;min-width:0;padding:2px 0 16px}
.payments-page *{box-sizing:border-box}.payments-page h1,.payments-page h2,.payments-page h3,.payments-page p{margin:0}.payments-page button,.payments-page input,.payments-page select,.payments-page textarea{font:inherit}.payments-page button{cursor:pointer}.payments-page input:focus,.payments-page select:focus,.payments-page textarea:focus{outline:none;border-color:var(--pay-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.11)}
.payments-page .pay-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:0 8px 10px}.payments-page .pay-head h1{font-size:28px;line-height:1.15;color:var(--pay-ink);font-weight:800;letter-spacing:-.03em}.payments-page .pay-head p{font-size:14px;color:var(--pay-muted);margin-top:7px;font-weight:500}.payments-page .pay-head nav{display:flex;gap:13px;align-items:center;color:#344879;font-weight:700;margin-top:12px}.payments-page .pay-head nav i{font-size:10px;color:#a2aec8}.payments-page .pay-head-actions{display:flex;gap:12px;align-items:center}.payments-page .pay-btn{height:44px;border:1px solid #d9e2f0;background:#fff;border-radius:8px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:var(--pay-text);font-weight:700;transition:.16s ease;white-space:nowrap}.payments-page .pay-btn:hover{box-shadow:0 8px 18px rgba(22,37,74,.08);transform:translateY(-1px)}.payments-page .pay-btn.primary{color:white;border-color:var(--pay-blue);background:linear-gradient(135deg,#2563eb,#075bf2);box-shadow:0 10px 18px rgba(37,99,235,.16)}.payments-page .pay-btn.small{height:38px;padding:0 14px;font-size:12px}.payments-page .pay-close{height:44px;width:44px;border:1px solid #d9e2f0;border-radius:8px;background:#fff;color:var(--pay-ink);font-size:18px}
.payments-page .pay-dropdown{position:relative}.payments-page .pay-menu{position:absolute;top:50px;right:0;z-index:20;min-width:192px;padding:7px;background:#fff;border:1px solid var(--pay-line);border-radius:12px;box-shadow:0 16px 36px rgba(15,23,42,.14);display:none}.payments-page .pay-menu.open{display:grid}.payments-page .pay-menu button{background:none;border:0;border-radius:8px;padding:12px;text-align:left;display:flex;align-items:center;gap:10px;color:var(--pay-text);font-weight:700}.payments-page .pay-menu button:hover{background:#eff6ff;color:var(--pay-blue)}
.payments-page .pay-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.payments-page .pay-kpi{height:111px;border:1px solid var(--pay-line);border-radius:10px;background:#fff;padding:19px;display:flex;align-items:flex-start;gap:17px;box-shadow:var(--pay-shadow)}.payments-page .pay-kpi-icon{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;font-size:20px;flex:none}.payments-page .pay-kpi p{font-size:11px;font-weight:700;color:#566890;margin:2px 0 10px}.payments-page .pay-kpi strong{display:block;font-size:19px;color:var(--pay-ink);letter-spacing:-.02em;white-space:nowrap}.payments-page .pay-kpi small{display:block;margin-top:10px;font-size:10px;font-weight:700}.payments-page .pay-kpi.receipt .pay-kpi-icon{background:#e6f9ee;color:var(--pay-green)}.payments-page .pay-kpi.receipt small{color:var(--pay-green)}.payments-page .pay-kpi.payment .pay-kpi-icon{background:#eaf1ff;color:var(--pay-blue)}.payments-page .pay-kpi.payment small{color:var(--pay-green)}.payments-page .pay-kpi.unallocated .pay-kpi-icon{background:#f0eafe;color:var(--pay-purple)}.payments-page .pay-kpi.unallocated small{color:var(--pay-orange)}.payments-page .pay-kpi.pending .pay-kpi-icon{background:#fff3e0;color:var(--pay-amber)}.payments-page .pay-kpi.pending small{color:var(--pay-orange)}.payments-page .pay-kpi.danger .pay-kpi-icon{background:#ffebee;color:var(--pay-red)}.payments-page .pay-kpi.danger small{color:var(--pay-red)}
.payments-page .pay-filter-card,.payments-page .pay-table-card,.payments-page .pay-side-card,.payments-page .pay-form-card,.payments-page .pay-bottom-sections{background:#fff;border:1px solid var(--pay-line);border-radius:10px;box-shadow:var(--pay-shadow)}.payments-page .pay-filter-card{padding:18px 18px 13px}.payments-page .pay-filter-grid{display:grid;grid-template-columns:1.35fr .94fr .84fr 1fr 1.08fr 1.22fr;gap:12px}.payments-page label span{display:block;font-size:11px;font-weight:750;color:#273b70;margin:0 0 9px}.payments-page label b{color:var(--pay-red)}.payments-page input,.payments-page select,.payments-page textarea{width:100%;border:1px solid #d9e2ef;border-radius:7px;color:#142658;background:#fff}.payments-page .pay-filter-grid input,.payments-page .pay-filter-grid select{height:40px;padding:0 12px}.payments-page .pay-input-icon{position:relative}.payments-page .pay-input-icon i{position:absolute;left:13px;top:13px;color:#687ba6}.payments-page .pay-input-icon input{padding-left:37px}.payments-page .pay-range{display:grid;grid-template-columns:1fr 1fr;gap:6px}.payments-page .pay-filter-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #f0f3f9;margin-top:15px;padding-top:13px}.payments-page .pay-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.payments-page .pay-chips span{font-size:11px;font-weight:800;color:#334878;margin-right:6px}.payments-page .pay-chips button{border:1px solid #dce5f2;border-radius:6px;height:29px;padding:0 12px;background:#fff;font-size:11px;font-weight:700;color:#435781}.payments-page .pay-chips button.active{color:var(--pay-blue);border-color:#cfe0ff;background:#eff6ff}.payments-page .pay-filter-buttons{display:flex;gap:8px}.payments-page .pay-filter-buttons .pay-btn{height:38px;border-radius:7px;font-size:12px}
.payments-page .pay-content{display:block}.payments-page .pay-content-full main{min-width:0;width:100%}.payments-page .pay-table-card{overflow:hidden}.payments-page .pay-table-header{height:63px;padding:14px 17px;display:flex;justify-content:space-between;align-items:center}.payments-page .pay-table-header h2{font-size:16px;color:var(--pay-ink);font-weight:800}.payments-page .pay-table-header p{font-size:10px;color:#61749c;margin-top:5px;font-weight:600}.payments-page .pay-table-tools{display:flex;gap:6px}.payments-page .pay-table-tools button{width:36px;height:36px;border:1px solid #dce4f3;background:white;border-radius:7px;color:#172c61}.payments-page .pay-table-tools button.active{background:#eef5ff;color:var(--pay-blue);border-color:#9cc4ff}.payments-page .pay-table-scroll{overflow-x:auto;border-top:1px solid #edf1f8;border-bottom:1px solid #edf1f8}.payments-page .pay-table-scroll table{width:100%;border-collapse:collapse;min-width:1080px}.payments-page th{height:39px;background:#fbfcff;text-align:left;font-size:10px;font-weight:750;color:#526691;padding:0 10px;white-space:nowrap}.payments-page td{height:48px;padding:7px 10px;border-top:1px solid #f0f3f8;font-size:11px;font-weight:600;color:#192e62;white-space:nowrap}.payments-page tbody tr:hover td{background:#fbfdff}.payments-page .pay-link{background:none;border:0;padding:0;color:#075bf2;font-weight:800}.payments-page .pay-for{display:inline-flex;flex-direction:column;gap:1px;border-radius:6px;padding:4px 6px;font-size:10px;font-weight:750}.payments-page .pay-for small{font-size:9px;font-weight:650}.payments-page .pay-for.customer{background:#e8f8ee;color:#09843a}.payments-page .pay-for.supplier{background:#fff0f0;color:#ee3030}.payments-page .pay-method{display:inline-flex;align-items:center;gap:6px;font-weight:700}.payments-page .pay-method.bank i{color:var(--pay-blue)}.payments-page .pay-method.cash i{color:var(--pay-green)}.payments-page .pay-amount{font-weight:800}.payments-page .pay-amount.in{color:#069544}.payments-page .pay-amount.out{color:#ef3838}.payments-page .pay-status{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800;text-transform:capitalize}.payments-page .pay-status.applied,.payments-page .pay-status.posted{background:#e8f8ee;color:#07833c}.payments-page .pay-status.partial{background:#fff3e7;color:#eb6b14}.payments-page .pay-status.unallocated{background:#f2eafe;color:#7838d3}.payments-page .pay-status.cancelled{background:#f3f4f6;color:#657089}.payments-page .pay-action{height:29px;width:28px;background:#fff;border:1px solid #dbe4f1;border-radius:6px;color:#162b61}.payments-page .pay-empty{text-align:center!important;color:#64748b!important;padding:28px!important}.payments-page .pay-table-footer{height:59px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:11px;font-weight:700;color:#415681}.payments-page .pay-table-footer select{height:32px;width:56px;margin:0 8px;padding:0 8px}.payments-page .pay-pagination{display:flex;gap:8px}.payments-page .pay-pagination button{height:36px;min-width:36px;border:1px solid #dce5f1;border-radius:7px;background:white;color:#193269;font-weight:750}.payments-page .pay-pagination button.active{background:var(--pay-blue);border-color:var(--pay-blue);color:white}
.payments-page .pay-side{display:grid;gap:12px}.payments-page .pay-side-card{padding:16px 15px}.payments-page .pay-side-card h3{font-size:15px;font-weight:800;color:var(--pay-ink);margin-bottom:16px}.payments-page .pay-side-title{display:flex;justify-content:space-between;align-items:center}.payments-page .pay-side-title select{width:92px;height:34px;padding:0 8px;font-size:11px}.payments-page .pay-summary{display:grid;gap:14px}.payments-page .pay-summary div,.payments-page .pay-breakdown div{display:flex;justify-content:space-between;gap:8px;align-items:center}.payments-page dt{font-size:11px;font-weight:700;color:#50638d}.payments-page dd{margin:0;font-size:11px;font-weight:800;color:#122456}.payments-page dd.green{color:var(--pay-green)}.payments-page dd.red{color:var(--pay-red)}.payments-page dd.purple{color:var(--pay-purple)}.payments-page .pay-summary div:last-child{border-top:1px dashed #e4e9f2;padding-top:14px}.payments-page .pay-method-chart{display:flex;align-items:center;gap:17px}.payments-page .pay-donut{height:106px;width:106px;border-radius:50%;flex:none;background:conic-gradient(var(--pay-blue) 0 var(--bank),var(--pay-green) var(--bank) calc(var(--bank) + var(--cash)),#94a3b8 calc(var(--bank) + var(--cash)) 100%);position:relative;display:grid;place-items:center;text-align:center}.payments-page .pay-donut:after{content:"";position:absolute;inset:23px;background:white;border-radius:50%}.payments-page .pay-donut strong,.payments-page .pay-donut span{z-index:1;position:absolute}.payments-page .pay-donut strong{font-size:11px;top:42px}.payments-page .pay-donut span{font-size:9px;top:57px;color:#65769c}.payments-page .pay-method-chart ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:10px;color:#43567f;flex:1}.payments-page .pay-method-chart li{display:flex;align-items:center;gap:6px}.payments-page .pay-method-chart li strong{margin-left:auto}.payments-page .pay-method-chart li i{height:8px;width:8px;border-radius:50%}.payments-page i.blue{background:var(--pay-blue);color:var(--pay-blue)}.payments-page i.green{background:var(--pay-green);color:var(--pay-green)}.payments-page i.gray{background:#94a3b8}.payments-page .pay-unallocated{display:grid}.payments-page .pay-unallocated>div{padding:10px 0;border-bottom:1px solid #edf2f7;display:flex;justify-content:space-between;align-items:center}.payments-page .pay-unallocated strong{display:block;color:#14285d;font-size:11px}.payments-page .pay-unallocated span{display:block;font-size:10px;color:#5d7097;margin-top:3px}.payments-page .pay-unallocated b{color:var(--pay-purple);font-size:10px;border-radius:5px;background:#f1e8ff;padding:5px}.payments-page .pay-unallocated p{font-size:11px;color:#687ba4}.payments-page .pay-shortcuts button{width:100%;height:49px;border:1px solid #e0e8f4;border-radius:7px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 10px;margin-top:7px;color:#10255d}.payments-page .pay-shortcuts button>i:first-child{height:33px;width:33px;display:grid;place-items:center;border-radius:7px;background:#eff6ff}.payments-page .pay-shortcuts button .green{background:#eafaf0}.payments-page .pay-shortcuts button .red{background:#fff1f2;color:var(--pay-red)}.payments-page .pay-shortcuts button span{display:grid;text-align:left;gap:3px;font-size:11px;font-weight:800}.payments-page .pay-shortcuts button small{font-size:10px;color:#60739a;font-weight:650}.payments-page .pay-shortcuts button>i:last-child{margin-left:auto;font-size:10px}
/* Form screens */
.payments-page.payment-form-page{gap:14px}.payments-page .pay-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 337px;gap:15px;align-items:start}.payments-page .pay-form-grid main{display:grid;gap:12px;min-width:0}.payments-page .pay-form-card{padding:18px 20px}.payments-page .pay-form-card h2{font-size:16px;font-weight:800;color:var(--pay-blue);display:flex;align-items:center;gap:10px;margin-bottom:18px}.payments-page .pay-toggle>span{font-size:11px;font-weight:750;margin-bottom:10px;display:block}.payments-page .pay-toggle>div{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d6e0ef;border-radius:7px;overflow:hidden;max-width:540px}.payments-page .pay-toggle button{height:43px;border:0;background:#fff;color:#162a61;font-weight:750}.payments-page .pay-toggle button.active{color:#fff;background:var(--pay-blue)}.payments-page .pay-form-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 14px;margin-top:18px}.payments-page .pay-form-fields label:first-child{grid-column:span 2}.payments-page .pay-form-fields .bank-field{grid-column:span 2}.payments-page .pay-form-fields .bank-field.hidden{display:none}.payments-page .pay-form-fields .grow{grid-column:span 2}.payments-page .pay-form-fields input,.payments-page .pay-form-fields select{height:44px;padding:0 13px}.payments-page .pay-section-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.payments-page .pay-section-head h2{margin-bottom:5px}.payments-page .pay-section-head p{font-size:12px;color:#5c7099}.payments-page .pay-section-head>div:last-child{display:flex;gap:6px}.payments-page .pay-allocate-tabs{display:flex;gap:8px;margin:18px 0 8px}.payments-page .pay-allocate-tabs button{height:30px;border:1px solid #dde6f2;border-radius:6px;background:#fff;color:#394f7f;font-size:11px;font-weight:700;padding:0 13px}.payments-page .pay-allocate-tabs .active{border-color:#cddfff;background:#edf5ff;color:var(--pay-blue)}.payments-page .pay-allocation-scroll{overflow:auto;border:1px solid #e2eaf5;border-radius:7px}.payments-page .pay-allocation-scroll table{width:100%;min-width:760px;border-collapse:collapse}.payments-page .pay-allocation-scroll td,.payments-page .pay-allocation-scroll th{padding:7px 11px;height:42px}.payments-page .pay-allocation-scroll tfoot td{background:#fbfcff;font-weight:800;border-top:1px solid #e7edf6}.payments-page .pay-allocate-input{height:32px;width:112px;padding:0 9px!important;text-align:right}.payments-page .pay-overdue{color:#e83b3b;font-weight:800}.payments-page .pay-selected{display:flex;align-items:center;gap:10px;color:#138d47;margin-top:15px;font-size:11px}.payments-page .pay-selected span{color:#5b6f98}.payments-page .pay-bottom-sections{display:grid;grid-template-columns:1fr 1fr;padding:17px 20px;gap:16px}.payments-page .pay-bottom-sections textarea{height:67px;padding:12px;resize:none}.payments-page .pay-upload>div{height:67px;border:1px dashed #cad7e9;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:15px;color:#354a78}.payments-page .pay-upload i{font-size:27px;color:#6075a6}.payments-page .pay-upload strong{display:block;font-size:11px}.payments-page .pay-upload small{display:block;font-size:10px;color:#66799c;margin-top:4px}.payments-page .pay-form-side{display:grid;gap:14px;position:sticky;top:20px}.payments-page .receipt-summary h3{display:flex;align-items:center;gap:12px;color:var(--pay-blue)}.payments-page .receipt-summary dl{display:grid;gap:19px;padding:2px 0 15px;border-bottom:1px dashed #e4eaf2}.payments-page .receipt-summary dl div{display:flex;justify-content:space-between}.payments-page .receipt-summary .strong{padding-top:12px;border-top:1px dashed #e4eaf2}.payments-page .receipt-summary .strong dd{font-size:17px;color:var(--pay-blue)}.payments-page .pay-remaining{border:1px solid #daf0df;background:#f0fbf3;border-radius:7px;padding:18px 16px;margin-top:18px}.payments-page .pay-remaining span{font-size:12px;font-weight:700;display:block;margin-bottom:11px}.payments-page .pay-remaining strong{font-size:20px;color:#11873e}.payments-page .pay-breakdown{display:grid;gap:18px;padding-bottom:17px;border-bottom:1px dashed #e2e8f2}.payments-page .pay-allocation-state{border-radius:8px;margin-top:18px;padding:15px;display:flex;gap:13px;align-items:flex-start}.payments-page .pay-allocation-state.success{color:#11853d;background:#f0fbf4;border:1px solid #d6f0df}.payments-page .pay-allocation-state.warning{color:#bc5a00;background:#fff7ed;border:1px solid #fed7aa}.payments-page .pay-allocation-state i{font-size:18px}.payments-page .pay-allocation-state strong{font-size:13px}.payments-page .pay-allocation-state p{font-size:11px;margin-top:6px}.payments-page .pay-form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:0}.payments-page .pay-form-actions .pay-btn{height:50px;min-width:125px}.payments-page .pay-form-actions .primary{min-width:210px}
@media(max-width:1320px){.payments-page .pay-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.payments-page .pay-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.payments-page .pay-content{grid-template-columns:1fr}.payments-page .pay-side{grid-template-columns:repeat(2,minmax(0,1fr))}.payments-page .pay-form-grid{grid-template-columns:1fr}.payments-page .pay-form-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.payments-page .pay-head{flex-direction:column}.payments-page .pay-kpis,.payments-page .pay-filter-grid,.payments-page .pay-side,.payments-page .pay-form-side,.payments-page .pay-bottom-sections{grid-template-columns:1fr}.payments-page .pay-filter-foot{align-items:flex-start;flex-direction:column}.payments-page .pay-form-fields{grid-template-columns:1fr}.payments-page .pay-form-fields label:first-child,.payments-page .pay-form-fields .bank-field,.payments-page .pay-form-fields .grow{grid-column:auto}.payments-page .pay-section-head{flex-direction:column}}
@media(max-width:600px){.payments-page .pay-kpis{grid-template-columns:1fr}.payments-page .pay-head-actions{flex-wrap:wrap}.payments-page .pay-btn{padding:0 12px}.payments-page .pay-form-card{padding:15px}.payments-page .pay-content{display:block}.payments-page .pay-side{margin-top:14px}}