.payments-page{display:grid;gap:16px}
.payments-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-color:#cbd6f1;background:radial-gradient(circle at 88% 12%,rgba(145,99,223,.16),transparent 31%),linear-gradient(135deg,#fff 0%,#f8f5ff 55%,#f0ebff 100%)}
.payments-hero:after{content:'₴';position:absolute;right:210px;top:-32px;color:rgba(91,55,158,.07);font-size:160px;font-weight:900;line-height:1;pointer-events:none}
.payments-hero>div{position:relative;z-index:1}
.payments-eyebrow{display:inline-flex;padding:5px 9px;border:1px solid #d9caf8;border-radius:99px;background:#fff;color:#7042bd;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.payments-hero h2{margin:10px 0 5px;font-size:24px;color:#17233b}
.payments-hero p{max-width:780px;margin:0;color:#52657d;font-size:13px;line-height:1.55}
.payments-hero-actions{display:flex;gap:9px;flex:0 0 auto}
.payments-hero-actions .primary{background:#7042bd;border-color:#7042bd}
.payments-mode{padding:10px 13px;border:1px solid #d9e3ef;border-radius:10px;background:#f8fafc;color:#52657d;font-size:12px}
.payments-mode.is-persistent{border-color:#b8dfd3;background:#ecf8f4;color:#15664e}
.payments-mode.is-readonly{border-color:#efd59f;background:#fff8e8;color:#86520e}
.payments-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.payment-kpi{position:relative;overflow:hidden;padding:16px 17px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow)}
.payment-kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--payment-tone,#7042bd)}
.payment-kpi span{display:block;color:#65758b;font-size:11px;font-weight:700}
.payment-kpi b{display:block;margin-top:5px;color:#142033;font-size:23px;line-height:1.15}
.payment-kpi small{display:block;margin-top:5px;color:#74849a;font-size:10px}
.payment-kpi.paid{--payment-tone:#15917e}.payment-kpi.due{--payment-tone:#d97922}.payment-kpi.suppliers{--payment-tone:#3979e8}
.payments-toolbar{padding:13px;display:grid;gap:12px}
.payments-tabs{display:flex;gap:5px;padding:4px;border-radius:10px;background:#edf1f7;width:max-content}
.payments-tab{border:0;border-radius:8px;background:transparent;padding:8px 13px;color:#5d6e85;font-weight:750}
.payments-tab.active{background:#fff;color:#5f35a7;box-shadow:0 3px 12px rgba(31,55,87,.11)}
.payments-filters{display:grid;grid-template-columns:minmax(230px,1.5fr) minmax(180px,1fr) 150px 150px auto;gap:9px}
.payments-filters .filter-active{border-color:#9b7bd2;background:#f7f3ff;color:#4f2c88;box-shadow:0 0 0 2px rgba(112,66,189,.09)}
.payments-register{overflow:hidden}
.payments-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 19px;border-bottom:1px solid var(--line)}
.payments-section-head h2{margin:0 0 3px;font-size:16px}.payments-section-head .sub{font-size:11px}
.payments-section-total{text-align:right}.payments-section-total span{display:block;color:#6b7c92;font-size:10px}.payments-section-total b{display:block;color:#4f2c88;font-size:19px}
.payments-table-wrap{overflow:auto}
.payments-table{min-width:980px}
.payments-table tbody tr{cursor:default}
.payments-table td{vertical-align:middle}
.payments-table .payment-supplier b,.payments-table .payment-document b{display:block;color:#17233b}
.payments-table .payment-supplier small,.payments-table .payment-document small{display:block;margin-top:3px;color:#6b7c92;font-size:10px}
.payment-amount{white-space:nowrap;text-align:right}.payment-amount b{font-size:14px}.payment-amount small{display:block;color:#6b7c92;font-size:10px}
.payment-balance{color:#a5530c}.payment-paid{color:#0f7a55}
.payment-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:99px;background:#fff2de;color:#9b530f;font-size:10px;font-weight:800;white-space:nowrap}
.payment-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.payment-status.partial{background:#eef4ff;color:#225ebd}.payment-status.paid{background:#e8f7f0;color:#0f7a55}.payment-status.cancelled{background:#f0f2f5;color:#6b7280}
.payment-row-cancelled{opacity:.66;background:#fafafa}.payment-row-cancelled .payment-amount{text-decoration:line-through}
.payment-actions{display:flex;justify-content:flex-end;gap:6px}.payment-actions .btn{padding:7px 9px;font-size:11px;white-space:nowrap}.payment-actions .payment-register-action{border-color:#cab8eb;background:#f8f5ff;color:#5e36a4;font-weight:700}
.payment-order-links{display:flex;flex-wrap:wrap;gap:5px;max-width:320px}.payment-order-link{padding:4px 7px;border:1px solid #dce4ee;border-radius:7px;background:#f8fafc;color:#40546f;font-size:10px}.payment-cancel-note{max-width:280px;margin-top:5px;color:#a23b49;font-size:10px}
.payments-state{min-height:250px;display:grid;place-items:center;align-content:center;gap:8px;padding:34px;text-align:center;color:#52657d}.payments-state b{color:#17233b;font-size:16px}.payments-state p{margin:0;max-width:520px;font-size:12px}.payments-spinner{width:34px;height:34px;border:4px solid #e4dcf3;border-top-color:#7042bd;border-radius:50%;animation:payments-spin .8s linear infinite}
.payments-empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#f0ebff;color:#7042bd;font-size:23px;font-weight:800}
.payments-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:rgba(10,20,38,.54);backdrop-filter:blur(2px)}
.payments-modal-box{width:min(820px,100%);max-height:calc(100vh - 36px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:16px;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,.27)}
.payments-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:19px 21px;border-bottom:1px solid var(--line)}
.payments-modal-head h2{margin:0 0 3px;font-size:19px}.payments-modal-head .sub{font-size:11px}
.payments-modal-close{display:grid;place-items:center;width:35px;height:35px;padding:0;border-color:#e3aeb5!important;background:#fff5f6!important;color:#b52f40!important;font-size:20px!important;font-weight:800}
.payments-modal-body{overflow:auto;padding:19px 21px}
.payments-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.payments-form-grid label{display:grid;gap:5px;color:#53657c;font-size:11px;font-weight:700}.payments-form-grid .span-2{grid-column:1/-1}
.payments-contract-summary{display:grid;grid-template-columns:1fr auto;gap:10px;margin:12px 0;padding:12px;border:1px solid #d9e3ef;border-radius:11px;background:#f8fafc}.payments-contract-summary span{display:block;color:#64748b;font-size:10px}.payments-contract-summary b{display:block;margin-top:3px}.payments-contract-summary strong{align-self:center;color:#a5530c;font-size:18px;white-space:nowrap}
.payments-order-picker{margin-top:15px;border:1px solid #dce4ee;border-radius:12px;overflow:hidden}.payments-order-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#f4f7fb}.payments-order-picker-head b{font-size:12px}.payments-order-picker-head button{padding:6px 8px;font-size:10px}
.payments-order-options{max-height:245px;overflow:auto}.payments-order-option{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 12px;border-top:1px solid #e7edf4;cursor:pointer}.payments-order-option:first-child{border-top:0}.payments-order-option:hover,.payments-order-option.selected{background:#f8f5ff}.payments-order-option input{width:17px;height:17px;accent-color:#7042bd}.payments-order-option b{display:block;font-size:12px}.payments-order-option small{display:block;margin-top:2px;color:#6b7c92;font-size:10px}.payments-order-option strong{color:#4f2c88;white-space:nowrap}
.payments-selection-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:11px 12px;border-radius:10px;background:#f0ebff;color:#4f2c88}.payments-selection-total span{font-size:11px}.payments-selection-total b{font-size:17px}
.payments-form-message{min-height:18px;margin-top:10px;color:#b72f3e;font-size:11px;font-weight:650}
.payments-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 21px;border-top:1px solid var(--line);background:#fbfcfe}.payments-modal-actions .primary{background:#7042bd;border-color:#7042bd}
.payments-cancel-copy{padding:3px 0 10px;color:#52657d;line-height:1.55}.payments-cancel-copy b{color:#17233b}
@keyframes payments-spin{to{transform:rotate(360deg)}}

@media(max-width:1000px){.payments-kpis{grid-template-columns:repeat(2,1fr)}.payments-filters{grid-template-columns:1fr 1fr 1fr}.payments-filters #paymentSearch{grid-column:1/-1}.payments-filters button{width:100%}}
@media(max-width:700px){
  .payments-page{gap:12px}.payments-hero{display:grid;padding:18px 14px}.payments-hero:after{right:-5px;top:-14px;font-size:115px}.payments-hero h2{font-size:20px}.payments-hero p{font-size:12px}.payments-hero-actions{display:grid;grid-template-columns:1fr 1.3fr}.payments-hero-actions .btn{width:100%;padding:10px 8px}
  .payments-kpis{grid-template-columns:1fr 1fr;gap:9px}.payment-kpi{padding:13px 12px}.payment-kpi b{font-size:18px}.payment-kpi small{font-size:9px}
  .payments-toolbar{padding:10px}.payments-tabs{width:100%}.payments-tab{flex:1}.payments-filters{grid-template-columns:1fr 1fr}.payments-filters #paymentSearch,.payments-filters #paymentSupplier,.payments-filters button{grid-column:1/-1}.payments-filters .field{font-size:16px}
  .payments-section-head{padding:14px;align-items:center}.payments-section-total b{font-size:16px}
  .payments-table-wrap{overflow:visible}.payments-table{display:block;min-width:0}.payments-table thead{display:none}.payments-table tbody{display:grid;gap:10px;padding:10px;background:#f2f5f9}.payments-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:12px;border:1px solid #dce4ee;border-left:5px solid #7042bd;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(31,55,87,.06)}.payments-table tbody tr.payment-row-cancelled{border-left-color:#9ca3af}.payments-table td{display:block;padding:6px 5px;border:0;min-width:0;overflow-wrap:anywhere}.payments-table td:before{content:attr(data-label);display:block;margin-bottom:3px;color:#78879a;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.payments-table td.payment-supplier,.payments-table td.payment-document,.payments-table td.payment-order-cell,.payments-table td.payment-actions{grid-column:1/-1}.payments-table td.payment-supplier:before,.payments-table td.payment-document:before{display:none}.payments-table .payment-amount{text-align:left}.payment-actions{justify-content:stretch}.payment-actions .btn{flex:1}
  .payments-modal{padding:0;align-items:stretch}.payments-modal-box{width:100%;max-height:100vh;height:100%;border-radius:0}.payments-modal-head{padding:14px}.payments-modal-body{padding:14px}.payments-form-grid{grid-template-columns:1fr}.payments-form-grid .span-2{grid-column:auto}.payments-form-grid .field{font-size:16px}.payments-contract-summary{grid-template-columns:1fr}.payments-contract-summary strong{font-size:16px}.payments-order-option{grid-template-columns:22px minmax(0,1fr)}.payments-order-option strong{grid-column:2}.payments-modal-actions{display:grid;grid-template-columns:1fr 1.3fr;padding:12px 14px}.payments-modal-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.payments-spinner{animation:none}}