.payment-page-header{margin-bottom:var(--space-6)}

.payment-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);overflow:hidden;padding:1.5rem 2rem;margin-bottom:var(--space-4);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:1.25rem;box-shadow:var(--shadow-ambient)}
.payment-hero__content{display:grid;min-width:0;gap:.3rem}.payment-hero small{color:var(--color-primary);font-size:.6875rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.payment-hero strong{font:700 clamp(1.5rem,3vw,1.875rem) var(--font-editorial);letter-spacing:-.02em}.payment-hero span{color:var(--color-text-muted);font-size:.8125rem}.payment-hero p{margin:.2rem 0 0;color:var(--color-text-muted);font-size:.75rem}.payment-hero .app-button{position:relative;z-index:1;flex:0 0 auto}
.payment-hero__decoration{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:clamp(4.5rem,12%,5.75rem)}
.payment-hero__flower{width:100%;height:auto}
@media(max-width:899px){.payment-hero__decoration{display:none}}

.payment-warning{padding:.75rem 1rem;margin:0 0 var(--space-4);color:var(--color-on-error-container);background:var(--color-error-container);border-radius:var(--radius-control);font-size:.8125rem}

.payment-panel{overflow:hidden;background:var(--color-surface-lowest);border:1px solid #e8e9f1;border-radius:1.125rem;box-shadow:0 8px 24px rgba(31,34,71,.035)}
.payment-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4)}
.payment-tabs{display:flex;gap:.35rem;min-width:0;overflow:auto;scrollbar-width:none}.payment-tabs button{min-height:2.25rem;flex:0 0 auto;padding:.45rem .8rem;color:#595c70;background:#f7f7fb;border:0;border-radius:.625rem;font-size:.75rem;font-weight:700;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.payment-tabs button:hover{background:var(--color-primary-subtle)}.payment-tabs button.is-active{color:white;background:var(--color-primary)}
.payment-sort{flex:0 0 auto}.payment-sort .app-select{width:12.5rem;min-height:2.375rem;padding-block:.4rem;font-size:.75rem}

.payment-filters{display:grid;grid-template-columns:minmax(14rem,1.35fr) minmax(0,2.65fr);align-items:end;gap:var(--space-3);padding:0 var(--space-4) var(--space-4)}.payment-filter-fields{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(8rem,.8fr) minmax(17rem,1.4fr);align-items:end;gap:var(--space-3)}.payment-filters .app-label{margin-bottom:.375rem;font-size:.6875rem}.payment-filters .app-input,.payment-filters .app-select{width:100%;min-height:2.5rem;padding:.5rem .7rem;background:white;border-color:#e8e9f1;font-size:.75rem}.payment-date-range{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.35rem}.payment-date-range span{color:var(--color-text-muted)}.payment-filter-mobile-trigger{display:none}

.payment-table{display:grid;grid-template-columns:1.55fr 1.2fr .9fr .9fr .75fr .65fr;align-items:center;gap:var(--space-4);padding:.875rem 1.125rem}.payment-table--head{min-height:2.625rem;color:#85889a;background:#fafafe;border-top:1px solid #e8e9f1;font-size:.625rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.payment-table--head>span:last-child{text-align:right}.payment-card{min-height:4.375rem;color:inherit;background:white;border-top:1px solid #e8e9f1;text-decoration:none;transition:background var(--transition-fast)}.payment-card:hover{background:#fbfbff}.payment-card:focus-visible{position:relative;z-index:1;outline:2px solid var(--color-primary);outline-offset:-2px}.payment-name,.payment-vendor{display:grid;gap:.2rem;min-width:0}.payment-card strong{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap}.payment-card small{overflow:hidden;color:var(--color-text-muted);font-size:.6875rem;text-overflow:ellipsis;white-space:nowrap}.payment-date{font-size:.75rem}.payment-date>small{display:none}.payment-amount{font-size:.8125rem}.payment-row-action{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;color:var(--color-text-muted);font-size:.6875rem;font-weight:700;text-align:right}.payment-row-action span{font-size:1rem}
.payment-status{display:inline-flex;width:max-content;align-items:center;justify-content:center;padding:.3rem .55rem;color:#575b6c;background:#f0f1f5;border-radius:999px;font-size:.65rem;font-weight:750}.payment-status--paid{color:#5145c7;background:#f0eeff}.payment-status--duesoon{color:#78581e;background:#fff8e7}.payment-status--overdue{color:var(--color-on-error-container);background:var(--color-error-container)}.payment-status--cancelled{color:#686b78;background:#ededf1}
.payment-empty{padding:var(--space-8);border-top:1px solid #e8e9f1}

.dialog-shell.payment-create-dialog{width:min(100%,40rem)}.payment-create-dialog .dialog-shell__header{background:white;border-bottom:1px solid #e8e9f1}.payment-create-dialog .dialog-shell__footer{background:white;border-top:1px solid #e8e9f1}.payment-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.payment-form-grid .full{grid-column:1/-1}.payment-form-grid .app-label small{color:var(--color-text-muted);font-weight:500}.payment-form-grid .app-textarea{min-height:5.5rem}.payment-filter-dialog__body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.form-error{margin:var(--space-3) 0 0;color:var(--color-error);font-size:.8125rem}

.payment-detail-grid{display:grid;grid-template-columns:minmax(21.25rem,23.75rem) minmax(0,1fr);align-items:start;gap:var(--space-4);max-width:var(--container-medium);margin-inline:auto}.payment-detail-card,.payment-edit-card{background:white;border:1px solid #e8e9f1;border-radius:1.125rem;box-shadow:0 8px 24px rgba(31,34,71,.035)}.payment-detail-card{padding:1.375rem}.payment-detail-amount{display:grid;gap:.4rem;padding-bottom:1.25rem;border-bottom:1px solid #e8e9f1}.payment-detail-amount small{color:var(--color-text-muted);font-size:.6875rem}.payment-detail-amount strong{font:700 clamp(1.75rem,3vw,2.125rem) var(--font-editorial);letter-spacing:-.025em}.payment-detail-list{margin:var(--space-3) 0 0}.payment-detail-list>div{display:flex;justify-content:space-between;gap:var(--space-4);padding:.7rem 0;border-bottom:1px solid #eff0f5;font-size:.75rem}.payment-detail-list dt{flex:0 0 auto;color:var(--color-text-muted)}.payment-detail-list dd{margin:0;font-weight:650;text-align:right}.payment-detail-actions{display:grid;gap:.5rem;padding-top:var(--space-4)}.payment-upload-button{position:relative;width:100%;overflow:hidden}.payment-upload-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.payment-file-name,.payment-receipt-link{text-align:center;font-size:.6875rem}.payment-file-name{color:var(--color-text-muted)}.payment-receipt-link{color:var(--color-primary);font-weight:650;text-decoration:none}
.payment-edit-card{overflow:hidden}.payment-edit-card>header{padding:1.375rem 1.375rem 0}.payment-edit-card>header h2{margin:0 0 .25rem;font-size:1.125rem}.payment-edit-card>header p{margin:0;color:var(--color-text-muted);font-size:.75rem}.payment-edit-card form{padding:1.25rem 1.375rem 0}.payment-detail-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.payment-detail-form .full{grid-column:1/-1}.payment-detail-form .app-textarea{min-height:6rem}.payment-file-field{position:relative;display:grid;gap:.2rem;min-height:4.75rem;place-content:center;padding:var(--space-3);text-align:center;background:#fafafe;border:1px dashed #d9d9e5;border-radius:var(--radius-control);cursor:pointer}.payment-file-field input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.payment-file-field strong{font-size:.75rem}.payment-file-field span{color:var(--color-text-muted);font-size:.65rem}.payment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0 1.375rem;margin-top:1.25rem;border-top:1px solid #e8e9f1}.payment-form-footer>div{display:flex;gap:var(--space-2)}.payment-delete-button{color:var(--color-error);border-color:#efcfcb}.payment-delete-button:hover{color:var(--color-error);background:var(--color-error-container)}

@media(max-width:1080px){.payment-filters{grid-template-columns:1fr}.payment-filter-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-table{grid-template-columns:1.45fr 1fr .85fr .85fr .7fr 1.5rem}.payment-row-action{font-size:0}.payment-detail-grid{grid-template-columns:21.25rem minmax(0,1fr)}}
@media(max-width:900px){.payment-detail-grid{grid-template-columns:1fr}.payment-detail-card{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-5)}.payment-detail-amount{border-bottom:0}.payment-detail-list{margin-top:0}.payment-detail-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.payment-detail-actions small,.payment-detail-actions a{grid-column:1/-1}}
@media(max-width:767px){.payment-page-header .page-header__actions,.payment-page-header .app-button{width:100%}.payment-hero{align-items:flex-start;flex-direction:column;padding:1.75rem}.payment-hero .app-button{width:100%}.payment-panel{margin-inline:calc(var(--space-4) * -1);border-right:0;border-left:0;border-radius:0}.payment-toolbar{align-items:stretch;flex-direction:column}.payment-sort,.payment-sort .app-select{width:100%}.payment-filters{grid-template-columns:minmax(0,1fr) auto;padding-top:0}.payment-filter-search .app-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.payment-filter-fields{display:none}.payment-filter-mobile-trigger{position:relative;display:flex;min-height:2.5rem;align-items:center;gap:.35rem;padding:.45rem .75rem;color:var(--color-text);background:white;border:1px solid #e8e9f1;border-radius:var(--radius-control);font-size:.75rem;font-weight:700}.payment-filter-mobile-trigger b{position:absolute;top:-.35rem;right:-.35rem;display:grid;min-width:1.1rem;height:1.1rem;place-items:center;color:white;background:var(--color-primary);border-radius:999px;font-size:.625rem}.payment-table--head{display:none}.payment-table.payment-card{grid-template-columns:minmax(0,1fr) auto;gap:.45rem .75rem;min-height:0;padding:var(--space-4);border-top:1px solid #e8e9f1}.payment-name{grid-column:1}.payment-vendor{grid-column:1;grid-row:2}.payment-date{display:grid;grid-column:1;grid-row:3;grid-template-columns:auto 1fr;gap:.35rem}.payment-date>small{display:block}.payment-amount{grid-column:2;grid-row:1;text-align:right}.payment-status{grid-column:2;grid-row:2;justify-self:end}.payment-row-action{grid-column:2;grid-row:3}.payment-detail-card{display:block}.payment-detail-actions{display:grid}.payment-detail-form,.payment-form-grid{grid-template-columns:1fr}.payment-detail-form .full,.payment-form-grid .full{grid-column:auto}.payment-form-footer{align-items:stretch;flex-direction:column-reverse}.payment-form-footer>div{display:grid;grid-template-columns:1fr 1fr}.payment-form-footer .app-button{width:100%}.payment-filter-dialog__body{grid-template-columns:1fr}}
@media(max-width:420px){.payment-table.payment-card{grid-template-columns:minmax(0,1fr)}.payment-name,.payment-vendor,.payment-date,.payment-amount,.payment-status,.payment-row-action{grid-column:1;grid-row:auto}.payment-amount{text-align:left}.payment-status{justify-self:start}.payment-row-action{justify-content:flex-start}.payment-form-footer>div{grid-template-columns:1fr}}

/* Keep nested button labels legible and allow native date controls to shrink. */
.payment-hero .app-button span{color:var(--color-on-primary)}
.payment-date-range{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.payment-date-range input{min-width:0}
.payment-page-header h1:focus{outline:none}
.payment-delete-confirmation{margin:0;color:var(--color-text-muted);font-size:.8125rem;line-height:1.6}.payment-delete-confirmation strong{color:var(--color-text)}