/* BLC payments operations page
   Desktop-first, built entirely on the existing BLC theme, layout and typography tokens. */

#payments.payments-page{
  max-width:1500px;
  margin-inline:auto;
  padding-bottom:72px;
}

#payments.payments-page.active-page{
  gap:14px!important;
}

#payments .payments-header{
  margin-bottom:0!important;
}

#payments .payments-overview{
  display:grid;
  grid-template-columns:minmax(190px,1.06fr) repeat(4,minmax(145px,1fr));
  gap:10px;
  align-items:stretch;
  margin:0!important;
}

#payments .payment-action-card,
#payments .payment-kpi-card{
  position:relative;
  min-width:0;
  min-height:116px;
  border:1px solid var(--line,var(--border));
  border-radius:var(--ui-card-radius,13px);
  background:var(--card-bg,var(--surface));
  color:var(--text-strong,var(--text));
  box-shadow:var(--ui-card-shadow,var(--shadow-sm));
  overflow:hidden;
}

#payments .payment-action-card{
  order:5;
  padding:18px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-areas:
    "icon copy"
    "button button";
  align-items:center;
  gap:10px 12px;
  text-align:right;
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line,var(--border)));
  background:linear-gradient(145deg,var(--card-bg,var(--surface)),var(--accent-panel,var(--accent-soft)));
}

#payments .payment-action-card::after{
  content:"";
  position:absolute;
  inset-inline-start:-36px;
  inset-block-end:-44px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  pointer-events:none;
}

#payments .payment-action-icon{
  grid-area:icon;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--accent-panel,var(--accent-soft));
  color:var(--accent-text,var(--accent));
  border:1px solid var(--accent-border,var(--line));
}

#payments .payment-action-icon svg,
#payments .payment-kpi-icon svg,
#payments .payments-search svg,
#payments .payment-method-icon svg,
#payments .payment-row-action svg,
#payments .payments-export-btn svg,
#payments .payment-empty-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#payments .payment-action-copy{
  grid-area:copy;
  min-width:0;
}

#payments .payment-action-copy strong,
#payments .payment-action-copy small{
  display:block;
}

#payments .payment-action-copy strong{
  color:var(--accent-text,var(--accent));
  font-size:var(--type-lg,16px);
  line-height:var(--leading-tight,1.2);
}

#payments .payment-action-copy small{
  margin-top:4px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px);
  line-height:var(--leading-body,1.55);
}

#payments .payment-action-button{
  grid-area:button;
  position:relative;
  z-index:1;
  width:100%;
  min-height:38px;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
}

#payments .payment-action-button svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

#payments .payment-kpi-card{
  padding:17px 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  grid-template-areas:
    "label icon"
    "value icon"
    "hint hint";
  align-content:center;
  column-gap:10px;
}

#payments .payment-kpi-card>span{
  grid-area:label;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-sm,12px);
  font-weight:750;
}

#payments .payment-kpi-card>strong{
  grid-area:value;
  display:block;
  margin-top:8px;
  color:var(--text-strong,var(--text));
  font-size:var(--type-metric,28px);
  line-height:1.05;
  letter-spacing:-.5px;
  white-space:nowrap;
}

#payments .payment-kpi-card>small{
  grid-area:hint;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  margin-top:12px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px);
  line-height:var(--leading-ui,1.4);
}

#payments .payment-kpi-card>small.positive{color:var(--green-text,var(--success))}
#payments .payment-kpi-card>small.warning{color:var(--amber-text,var(--warning))}
#payments .payment-kpi-card>small.danger{color:var(--red-text,var(--danger))}

#payments .payment-kpi-icon{
  grid-area:icon;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  align-self:center;
  border-radius:10px;
  background:var(--accent-panel,var(--accent-soft));
  color:var(--accent-text,var(--accent));
}

#payments .payment-kpi-card.received .payment-kpi-icon{background:var(--green-panel,var(--success-soft));color:var(--green-text,var(--success))}
#payments .payment-kpi-card.pending .payment-kpi-icon{background:var(--amber-panel,var(--warning-soft));color:var(--amber-text,var(--warning))}
#payments .payment-kpi-card.refunds .payment-kpi-icon{background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger))}

#payments .payments-workspace{
  min-width:0;
  border:1px solid var(--line,var(--border));
  border-radius:var(--ui-card-radius,13px);
  background:var(--card-bg,var(--surface));
  box-shadow:var(--ui-card-shadow,var(--shadow-sm));
  overflow:hidden;
}

#payments .payments-toolbar{
  padding:13px 14px;
  display:grid;
  grid-template-columns:minmax(240px,1.35fr) minmax(250px,1fr) repeat(3,minmax(126px,.62fr)) auto;
  gap:10px;
  align-items:end;
  border-bottom:1px solid var(--line,var(--border));
  background:color-mix(in srgb,var(--card-muted,var(--surface-soft)) 58%,var(--card-bg,var(--surface)));
}

#payments .payments-search{
  position:relative;
  display:block;
}

#payments .payments-search>span,
#payments .payments-date-range>span,
#payments .payments-filter-field>span{
  display:block;
  margin-bottom:6px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px);
  font-weight:750;
}

#payments .payments-search svg{
  position:absolute;
  inset-inline-end:12px;
  inset-block-end:11px;
  color:var(--text-muted,var(--muted));
  pointer-events:none;
}

#payments .payments-toolbar input,
#payments .payments-toolbar select{
  min-height:40px!important;
  margin:0!important;
  border-color:var(--line-strong,var(--border-strong))!important;
  background:var(--input-bg,var(--card-bg,var(--surface)))!important;
  color:var(--text-strong,var(--text))!important;
}

#payments .payments-search input{
  padding-inline-end:40px;
}

#payments .payments-date-range{
  min-width:0;
}

#payments .payments-date-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

#payments .payments-export-btn{
  min-height:40px;
  padding-inline:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
}

#payments .payments-table-shell{
  min-width:0;
  background:var(--card-bg,var(--surface));
}

#payments .payments-table-scroll{
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
}

#payments .payments-table{
  width:100%;
  min-width:1040px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  color:var(--text-strong,var(--text));
}

#payments .payments-table th,
#payments .payments-table td{
  text-align:right;
  vertical-align:middle;
  border-bottom:1px solid var(--line,var(--border));
}

#payments .payments-table th{
  height:43px;
  padding:10px 13px;
  background:var(--card-muted,var(--surface-soft));
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px)!important;
  font-weight:800;
  white-space:nowrap;
}

#payments .payments-table td{
  height:68px;
  padding:10px 13px;
  font-size:var(--type-sm,12px)!important;
}

#payments .payments-table tbody tr:last-child td{border-bottom:0}
#payments .payments-table tbody tr{transition:background-color .15s ease}
#payments .payments-table tbody tr:hover{background:var(--card-hover,var(--surface-soft))}

#payments .payments-table th:nth-child(1){width:126px}
#payments .payments-table th:nth-child(2){width:158px}
#payments .payments-table th:nth-child(3){width:190px}
#payments .payments-table th:nth-child(4){width:118px}
#payments .payments-table th:nth-child(5){width:158px}
#payments .payments-table th:nth-child(6){width:105px}
#payments .payments-table th:nth-child(7){width:92px}
#payments .payments-table th:nth-child(8){width:90px;text-align:center}

#payments .payment-id strong,
#payments .payment-id small,
#payments .payment-customer-copy strong,
#payments .payment-customer-copy small,
#payments .payment-context strong,
#payments .payment-context small,
#payments .payment-date strong,
#payments .payment-date small,
#payments .payment-method-copy strong,
#payments .payment-method-copy small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#payments .payment-id strong{
  direction:ltr;
  text-align:right;
  font-size:var(--type-sm,12px);
  letter-spacing:.15px;
}

#payments .payment-id small,
#payments .payment-customer-copy small,
#payments .payment-context small,
#payments .payment-date small,
#payments .payment-method-copy small{
  margin-top:3px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-2xs,10px);
}

#payments .payment-customer{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}

#payments .payment-customer-avatar{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-panel,var(--accent-soft));
  color:var(--accent-text,var(--accent));
  font-size:var(--type-xs,11px);
  font-weight:850;
}

#payments .payment-customer-copy,
#payments .payment-method-copy{min-width:0}

#payments .payment-date strong{
  direction:ltr;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#payments .payment-method{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}

#payments .payment-method-icon{
  flex:0 0 auto;
  width:32px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid var(--line,var(--border));
  background:var(--card-muted,var(--surface-soft));
  color:var(--accent-text,var(--accent));
}

#payments .payment-amount{
  direction:ltr;
  text-align:right;
  font-size:var(--type-base,14px)!important;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

#payments .payment-amount.refund{color:var(--red-text,var(--danger))}

#payments .payment-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:999px;
  font-size:var(--type-xs,11px);
  font-weight:800;
  white-space:nowrap;
}

#payments .payment-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

#payments .payment-status.paid{background:var(--green-panel,var(--success-soft));color:var(--green-text,var(--success))}
#payments .payment-status.pending{background:var(--amber-panel,var(--warning-soft));color:var(--amber-text,var(--warning))}
#payments .payment-status.failed{background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger))}

#payments .payment-row-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

#payments .payment-row-action{
  width:31px;
  height:31px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line,var(--border));
  border-radius:8px;
  background:var(--card-bg,var(--surface));
  color:var(--text-muted,var(--muted));
}

#payments .payment-row-action:hover{
  background:var(--card-hover,var(--surface-soft));
  color:var(--accent-text,var(--accent));
  border-color:var(--accent-border,var(--line));
}

#payments .payment-row-action svg{width:16px;height:16px}

#payments .payments-empty-state{
  min-height:286px;
  padding:48px 24px;
  display:grid;
  place-items:center;
  text-align:center;
}

#payments .payments-empty-inner{
  max-width:420px;
}

#payments .payment-empty-icon{
  width:50px;
  height:50px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--accent-panel,var(--accent-soft));
  color:var(--accent-text,var(--accent));
  border:1px solid var(--accent-border,var(--line));
}

#payments .payments-empty-state h3{
  margin:0;
  color:var(--text-strong,var(--text));
  font-size:var(--type-lg,16px)!important;
}

#payments .payments-empty-state p{
  margin:7px 0 0;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-sm,12px)!important;
}

#payments .payments-empty-state button{
  margin-top:17px;
}

#payments .payments-pagination{
  min-height:58px;
  padding:10px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line,var(--border));
  background:var(--card-bg,var(--surface));
}

#payments .payments-range-label{
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px);
}

#payments .payments-page-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}

#payments .payments-page-controls button{
  min-width:31px;
  height:31px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text-muted,var(--muted));
  font-weight:750;
}

#payments .payments-page-controls button:hover:not(:disabled){
  border-color:var(--line,var(--border));
  background:var(--card-hover,var(--surface-soft));
  color:var(--text-strong,var(--text));
}

#payments .payments-page-controls button.active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

#payments .payments-page-controls button:disabled{opacity:.42;cursor:not-allowed}

#payments .payments-page-size{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px)!important;
  font-weight:650;
}

#payments .payments-page-size select{
  width:72px;
  min-height:34px!important;
  margin:0!important;
  padding-block:5px!important;
  background:var(--input-bg,var(--card-bg,var(--surface)))!important;
  color:var(--text-strong,var(--text))!important;
}

#paymentModal .payment-modal-card{width:min(720px,calc(100vw - 48px))}
#paymentModal .payment-modal-intro{
  margin:-7px 0 2px;
  color:var(--text-muted,var(--muted));
  font-size:var(--type-sm,12px)!important;
}
#paymentModal .payment-modal-form{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
#paymentModal .payment-form-wide{grid-column:1/-1}
#paymentModal .payment-form-error{
  min-height:18px;
  margin:0;
  grid-column:1/-1;
  color:var(--red-text,var(--danger));
  font-size:var(--type-xs,11px)!important;
}
#paymentModal .payment-modal-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding-top:4px;
}
#paymentModal .payment-modal-actions .primary{min-width:150px}

#paymentDetailsModal .payment-details-card{width:min(600px,calc(100vw - 48px))}
#paymentDetailsModal .payment-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
#paymentDetailsModal .payment-detail-item{
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--line,var(--border));
  border-radius:11px;
  background:var(--card-muted,var(--surface-soft));
}
#paymentDetailsModal .payment-detail-item.wide{grid-column:1/-1}
#paymentDetailsModal .payment-detail-item span,
#paymentDetailsModal .payment-detail-item strong{display:block}
#paymentDetailsModal .payment-detail-item span{color:var(--text-muted,var(--muted));font-size:var(--type-xs,11px)}
#paymentDetailsModal .payment-detail-item strong{margin-top:5px;color:var(--text-strong,var(--text));font-size:var(--type-base,14px);overflow-wrap:anywhere}
#paymentDetailsModal .payment-details-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}

/* Stage 3: operational payment journal */
#payments .payments-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  align-self:end;
}
#payments .payments-reset-btn,
#payments .payments-export-btn{min-height:40px;white-space:nowrap}
#payments .payments-reset-btn{padding-inline:12px;color:var(--text-muted,var(--muted))}

#payments .payments-table{min-width:1060px}
#payments .payments-table th:nth-child(1){width:112px}
#payments .payments-table th:nth-child(2){width:140px}
#payments .payments-table th:nth-child(3){width:154px}
#payments .payments-table th:nth-child(4){width:108px}
#payments .payments-table th:nth-child(5){width:132px}
#payments .payments-table th:nth-child(6){width:122px}
#payments .payments-table th:nth-child(7){width:88px}
#payments .payments-table th:nth-child(8){width:82px}
#payments .payments-table th:nth-child(9){width:74px;text-align:center}

#payments .payment-sort-button{
  width:100%;
  min-height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  text-align:right;
}
#payments .payment-sort-button:hover{color:var(--text-strong,var(--text))}
#payments .payment-sort-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#payments .payment-sort-button i{
  min-width:12px;
  color:var(--text-faint,var(--subtle));
  font-size:10px;
  font-style:normal;
  line-height:1;
}
#payments .payment-sort-button.active{color:var(--accent-text,var(--accent))}
#payments .payment-sort-button.active i{color:currentColor}

#payments .payment-reference strong,
#payments .payment-reference small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#payments .payment-reference strong{font-size:var(--type-sm,12px);font-weight:750}
#payments .payment-reference small{margin-top:3px;color:var(--text-muted,var(--muted));font-size:var(--type-2xs,10px)}

@media(max-width:1280px){
  #payments .payments-toolbar{
    grid-template-columns:minmax(230px,1.25fr) minmax(230px,1fr) repeat(2,minmax(130px,.65fr));
  }
  #payments .payments-filter-field.status-filter{grid-column:auto}
  #payments .payments-export-btn{grid-column:auto}
}

@media(max-width:1000px){
  #payments .payments-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  #payments .payment-action-card{grid-column:1/-1}
  #payments .payments-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  #payments .payments-search{grid-column:1/-1}
  #payments .payments-export-btn{justify-self:stretch}
}

@media(max-width:700px){
  #payments .payments-overview{grid-template-columns:1fr 1fr}
  #payments .payment-action-card{min-height:112px}
  #payments .payment-kpi-card{min-height:100px;padding:13px}
  #payments .payment-kpi-card>strong{font-size:20px}
  #payments .payments-toolbar{grid-template-columns:1fr}
  #payments .payments-search,
  #payments .payments-date-range{grid-column:auto}
  #payments .payments-pagination{grid-template-columns:1fr;justify-items:center}
  #payments .payments-page-size{justify-self:center}
  #paymentModal .payment-modal-form,
  #paymentDetailsModal .payment-details-grid{grid-template-columns:1fr}
  #paymentModal .payment-form-wide,
  #paymentDetailsModal .payment-detail-item.wide{grid-column:auto}
}



/* Stage 4: payment registration workflow */
#paymentModal .payment-modal-card{
  width:min(920px,calc(100vw - 48px));
  max-height:calc(100vh - 40px);
  padding:20px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#paymentModal .modal-head{
  align-items:flex-start;
  padding-bottom:15px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line,var(--border));
}
#paymentModal .modal-head .eyebrow{margin-bottom:4px}
#paymentModal .modal-head h3{margin:0}
#paymentModal .payment-modal-intro{
  max-width:68ch;
  margin:0 0 14px;
  line-height:1.55;
}
#paymentModal .payment-modal-form{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  margin:0;
}
#paymentModal .payment-form-scroll{
  min-height:0;
  flex:1 1 auto;
  display:grid;
  gap:13px;
  overflow-y:auto;
  padding-inline-end:4px;
  scrollbar-gutter:stable;
}
#paymentModal .payment-modal-section{
  min-width:0;
  padding:16px;
  border:1px solid var(--line,var(--border));
  border-radius:13px;
  background:var(--card-muted,var(--surface-soft));
}
#paymentModal .payment-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}
#paymentModal .payment-section-heading>div{
  display:flex;
  align-items:center;
  gap:9px;
}
#paymentModal .payment-section-heading>div>span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--accent-panel,var(--accent-soft));
  color:var(--accent-text,var(--accent));
  border:1px solid var(--accent-border,var(--line));
  font-size:var(--type-xs,11px);
  font-weight:850;
}
#paymentModal .payment-section-heading strong{
  color:var(--text-strong,var(--text));
  font-size:var(--type-base,14px);
}
#paymentModal .payment-section-heading small{
  color:var(--text-muted,var(--muted));
  font-size:var(--type-xs,11px);
}
#paymentModal .payment-linkage-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
#paymentModal .payment-fields-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
#paymentModal .payment-form-field{
  min-width:0;
  color:var(--text-normal,var(--text));
}
#paymentModal .payment-form-field>span:first-child{
  display:block;
  margin-bottom:6px;
  font-size:var(--type-xs,11px);
  font-weight:800;
}
#paymentModal .payment-form-field input,
#paymentModal .payment-form-field select,
#paymentModal .payment-form-field textarea{
  margin:0!important;
  background:var(--input-bg,var(--card-bg,var(--surface)))!important;
  color:var(--text-strong,var(--text))!important;
  border-color:var(--line-strong,var(--border-strong))!important;
}
#paymentModal .payment-form-field textarea{
  min-height:66px;
  resize:vertical;
}
#paymentModal .payment-field-help,
#paymentModal .payment-field-error{
  display:block;
  min-height:16px;
  margin-top:5px;
  font-size:var(--type-2xs,10px);
  line-height:1.4;
}
#paymentModal .payment-field-help{color:var(--text-muted,var(--muted))}
#paymentModal .payment-field-error{color:var(--red-text,var(--danger))}
#paymentModal .payment-form-field.has-error input,
#paymentModal .payment-form-field.has-error select,
#paymentModal .payment-form-field.has-error textarea{
  border-color:var(--red-text,var(--danger))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red-text,var(--danger)) 13%,transparent)!important;
}
#paymentModal .payment-association-summary{
  min-height:54px;
  margin-top:4px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--accent-border,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--accent-panel,var(--accent-soft)) 72%,var(--card-bg,var(--surface)));
  color:var(--text-strong,var(--text));
}
#paymentModal .payment-association-summary.invalid{
  border-color:color-mix(in srgb,var(--red-text,var(--danger)) 55%,var(--line));
  background:var(--red-panel,var(--danger-soft));
}
#paymentModal .payment-association-icon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--card-bg,var(--surface));
  color:var(--accent-text,var(--accent));
  border:1px solid var(--line,var(--border));
  font-weight:900;
}
#paymentModal .payment-association-summary strong,
#paymentModal .payment-association-summary small{display:block}
#paymentModal .payment-association-summary strong{font-size:var(--type-sm,12px)}
#paymentModal .payment-association-summary small{margin-top:2px;color:var(--text-muted,var(--muted));font-size:var(--type-xs,11px)}
#paymentModal .payment-association-error{
  min-height:17px;
  margin:5px 0 0;
  color:var(--red-text,var(--danger));
  font-size:var(--type-xs,11px);
}
#paymentModal .payment-form-wide{grid-column:1/-1}
#paymentModal .payment-form-error{
  min-height:18px;
  margin:0;
  color:var(--red-text,var(--danger));
  font-size:var(--type-xs,11px);
}
#paymentModal .payment-modal-actions{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line,var(--border));
  background:var(--card-bg,var(--surface));
}
#paymentModal .payment-modal-actions .primary{min-width:154px}
#paymentModal .payment-modal-actions button:disabled{opacity:.58;cursor:wait}
#paymentModal #paymentForm[aria-busy="true"] .payment-modal-section{pointer-events:none;opacity:.76}

@media(max-width:760px){
  #paymentModal .payment-modal-card{width:min(100%,calc(100vw - 24px));padding:16px}
  #paymentModal .payment-linkage-grid,
  #paymentModal .payment-fields-grid{grid-template-columns:1fr}
  #paymentModal .payment-form-wide{grid-column:auto}
  #paymentModal .payment-section-heading{align-items:flex-start;flex-direction:column;gap:5px}
}

/* Stage 5: states and payment micro-UX */
#payments .payment-status.refunded{background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger))}
#payments .payment-status.partial-refund{background:var(--blue-panel,#eff6ff);color:var(--blue-text,#2563eb)}
#payments .payment-status.pending-refund{background:var(--amber-panel,var(--warning-soft));color:var(--amber-text,var(--warning))}
#payments .payment-row-failed{background:color-mix(in srgb,var(--red-panel,var(--danger-soft)) 34%,transparent)}
#payments .payment-row-pending,
#payments .payment-row-pending-refund{background:color-mix(in srgb,var(--amber-panel,var(--warning-soft)) 24%,transparent)}
#payments .payment-row-refunded{background:color-mix(in srgb,var(--red-panel,var(--danger-soft)) 18%,transparent)}
#payments .payment-row-partial-refund{background:color-mix(in srgb,var(--blue-panel,#eff6ff) 22%,transparent)}
#payments .payment-row-failed td:first-child{box-shadow:inset -3px 0 var(--red-text,var(--danger))}
#payments .payment-row-pending td:first-child,
#payments .payment-row-pending-refund td:first-child{box-shadow:inset -3px 0 var(--amber-text,var(--warning))}
#payments .payment-row-refunded td:first-child{box-shadow:inset -3px 0 var(--red-text,var(--danger))}
#payments .payment-row-partial-refund td:first-child{box-shadow:inset -3px 0 var(--blue-text,#2563eb)}
#payments .payment-refund-action{color:var(--red-text,var(--danger));border-color:color-mix(in srgb,var(--red-text,var(--danger)) 22%,var(--line,var(--border)))}
#payments .payment-refund-action:hover{background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger));border-color:color-mix(in srgb,var(--red-text,var(--danger)) 42%,var(--line,var(--border)))}
#payments .payment-empty-icon.search{background:var(--blue-panel,#eff6ff);color:var(--blue-text,#2563eb);border-color:color-mix(in srgb,var(--blue-text,#2563eb) 22%,var(--line,var(--border)))}
#payments .payment-empty-icon.error{background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger));border-color:color-mix(in srgb,var(--red-text,var(--danger)) 24%,var(--line,var(--border)))}
#payments .payment-error-state p{max-width:390px}
#payments .payment-skeleton-row{pointer-events:none}
#payments .payment-skeleton-row td{height:68px}
#payments .payment-skeleton-block,
#payments .payment-skeleton-line{display:block;border-radius:999px;background:linear-gradient(90deg,var(--card-muted,var(--surface-soft)) 25%,var(--card-hover,var(--surface-soft)) 50%,var(--card-muted,var(--surface-soft)) 75%);background-size:220% 100%;animation:paymentSkeletonShimmer 1.35s ease-in-out infinite}
#payments .payment-skeleton-block{width:62%;height:11px}
#payments .payment-skeleton-block.wide{width:82%}
#payments .payment-skeleton-line{width:44%;height:8px;margin-top:8px;opacity:.78}
@keyframes paymentSkeletonShimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){#payments .payment-skeleton-block,#payments .payment-skeleton-line{animation:none}}
@media(min-width:1001px){
 #payments .payments-table{min-width:1090px}
 #payments .payments-table th:nth-child(9){width:104px}
}
#paymentModal .payment-refund-context{margin:0 0 12px;padding:12px 14px;display:flex;align-items:center;gap:11px;border:1px solid color-mix(in srgb,var(--red-text,var(--danger)) 28%,var(--line,var(--border)));border-radius:12px;background:color-mix(in srgb,var(--red-panel,var(--danger-soft)) 62%,var(--card-bg,var(--surface)));color:var(--text-strong,var(--text))}
#paymentModal .payment-refund-context.hidden{display:none!important}
#paymentModal .payment-refund-context-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--red-panel,var(--danger-soft));color:var(--red-text,var(--danger));font-size:18px;font-weight:800}
#paymentModal .payment-refund-context strong,
#paymentModal .payment-refund-context small{display:block}
#paymentModal .payment-refund-context small{margin-top:3px;color:var(--text-muted,var(--muted));font-size:var(--type-xs,11px)}
#paymentModal select:disabled{opacity:1;cursor:not-allowed;background:var(--card-muted,var(--surface-soft))!important;color:var(--text-muted,var(--muted))!important}

@media(min-width:1001px){#payments .payments-table{min-width:1104px}#payments .payments-table th:nth-child(8){width:96px}}
/* Stage 6: final desktop QA refinements */
#payments .payment-kpi-card>strong{
  max-width:100%;
  overflow:hidden;
  font-size:clamp(18px,1.45vw,28px);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.65px;
}

@media(min-width:1001px) and (max-width:1450px){
  #payments .payments-table{min-width:1038px}
  #payments .payments-table th,
  #payments .payments-table td{padding-inline:10px}
  #payments .payments-table th:nth-child(1){width:105px}
  #payments .payments-table th:nth-child(2){width:128px}
  #payments .payments-table th:nth-child(3){width:140px}
  #payments .payments-table th:nth-child(4){width:100px}
  #payments .payments-table th:nth-child(5){width:120px}
  #payments .payments-table th:nth-child(6){width:108px}
  #payments .payments-table th:nth-child(7){width:92px}
  #payments .payments-table th:nth-child(8){width:92px}
  #payments .payments-table th:nth-child(9){width:96px}
  #payments .payment-row-actions{gap:4px}
  #payments .payment-row-action{width:28px;height:28px}
  #payments .payment-row-action svg{width:15px;height:15px}
}


/* Stage 7: full mobile payments adaptation */
#payments .payments-mobile-filter-toggle,
#payments .payments-mobile-sort{display:none}
#payments .payments-filter-panel{display:contents}

@media(max-width:700px){
  #payments.payments-page{padding-bottom:18px}
  #payments .payments-header{margin-bottom:14px}
  #payments .payments-header>div{width:100%}
  #payments .payments-header h2{font-size:32px!important;line-height:1.08}
  #payments .payments-header p{max-width:32ch;margin-top:6px;font-size:12px!important;line-height:1.5}
  #payments .payments-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
  #payments .payment-action-card{order:-1;grid-column:1/-1;min-height:108px;padding:14px 15px;border-radius:15px}
  #payments .payment-action-copy strong{font-size:16px!important}
  #payments .payment-action-copy small{max-width:27ch;font-size:11px!important;line-height:1.45}
  #payments .payment-action-button{min-height:40px;margin-top:10px;border-radius:9px}
  #payments .payment-kpi-card{min-height:108px;padding:13px 12px;border-radius:15px}
  #payments .payment-kpi-card>span{padding-inline-end:35px;font-size:11px!important;line-height:1.35}
  #payments .payment-kpi-card>strong{margin-top:9px;font-size:clamp(16px,4.8vw,21px)!important;line-height:1.08;letter-spacing:-.45px}
  #payments .payment-kpi-card>small{margin-top:8px;font-size:10px!important;line-height:1.35}
  #payments .payment-kpi-icon{width:34px;height:34px;inset:13px auto auto 12px}
  #payments .payments-toolbar{grid-template-columns:1fr;gap:10px;padding:12px;border-radius:15px 15px 0 0}
  #payments .payments-search{grid-column:1/-1}
  #payments .payments-search>span,
  #payments .payments-date-range>span:first-child,
  #payments .payments-filter-field>span:first-child{font-size:10px!important}
  #payments .payments-search input,
  #payments .payments-date-inputs input,
  #payments .payments-filter-field select{min-height:46px!important;margin-top:5px!important}
  #payments .payments-mobile-filter-toggle{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;border-color:var(--line,var(--border));background:var(--card-muted,var(--surface-soft));color:var(--text-strong,var(--text))}
  #payments .payments-mobile-filter-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  #payments .payments-mobile-filter-toggle b{min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px}
  #payments .payments-toolbar.has-active-filters .payments-mobile-filter-toggle{border-color:var(--accent-border,var(--accent));color:var(--accent-text,var(--accent))}
  #payments .payments-filter-panel{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:2px}
  #payments .payments-toolbar.mobile-expanded .payments-filter-panel{display:grid}
  #payments .payments-date-range{grid-column:1/-1}
  #payments .payments-date-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #payments .payments-mobile-sort{display:block}
  #payments .payments-toolbar-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #payments .payments-toolbar-actions button{width:100%;min-height:43px;justify-content:center}
  #payments .payments-toolbar-actions .payments-reset-btn.hidden{display:none!important}
  #payments .payments-toolbar-actions .payments-reset-btn.hidden+.payments-export-btn{grid-column:1/-1}
  #payments .payments-table-shell{border-radius:0 0 15px 15px;overflow:visible}
  #payments .payments-table-scroll{overflow:visible;padding:0;background:transparent}
  #payments .payments-table{display:block;width:100%;min-width:0!important;border:0}
  #payments .payments-table thead{display:none}
  #payments .payments-table tbody{display:grid;gap:10px;padding:10px;background:var(--card-muted,var(--surface-soft))}
  #payments .payments-table tr{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,.72fr);grid-template-areas:"id status" "customer customer" "context context" "date method" "reference amount" "actions actions";column-gap:12px;row-gap:11px;padding:14px;border:1px solid var(--line,var(--border));border-radius:15px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-sm)}
  #payments .payments-table td{width:auto!important;min-width:0;height:auto!important;display:block;padding:0!important;border:0!important;background:transparent!important;text-align:right}
  #payments .payments-table td:nth-child(1){grid-area:id}
  #payments .payments-table td:nth-child(2){grid-area:customer;padding-top:10px!important;border-top:1px solid var(--line,var(--border))!important}
  #payments .payments-table td:nth-child(3){grid-area:context}
  #payments .payments-table td:nth-child(4){grid-area:date}
  #payments .payments-table td:nth-child(5){grid-area:method}
  #payments .payments-table td:nth-child(6){grid-area:reference}
  #payments .payments-table td:nth-child(7){grid-area:amount;align-self:end;text-align:left}
  #payments .payments-table td:nth-child(8){grid-area:status;justify-self:end;align-self:start}
  #payments .payments-table td:nth-child(9){grid-area:actions;padding-top:11px!important;border-top:1px solid var(--line,var(--border))!important}
  #payments .payments-table td:nth-child(3)::before,
  #payments .payments-table td:nth-child(4)::before,
  #payments .payments-table td:nth-child(5)::before,
  #payments .payments-table td:nth-child(6)::before,
  #payments .payments-table td:nth-child(7)::before{display:block;margin-bottom:4px;color:var(--text-muted,var(--muted));font-size:9px;font-weight:750}
  #payments .payments-table td:nth-child(3)::before{content:"שיוך"}
  #payments .payments-table td:nth-child(4)::before{content:"תאריך"}
  #payments .payments-table td:nth-child(5)::before{content:"אמצעי תשלום"}
  #payments .payments-table td:nth-child(6)::before{content:"אסמכתא"}
  #payments .payments-table td:nth-child(7)::before{content:"סכום";text-align:left}
  #payments .payment-id strong{font-size:12px!important;direction:ltr;text-align:right}
  #payments .payment-id small{margin-top:3px;font-size:10px!important;white-space:normal}
  #payments .payment-customer{align-items:flex-start}
  #payments .payment-customer-avatar{width:34px;height:34px;flex-basis:34px}
  #payments .payment-customer-copy strong,
  #payments .payment-customer-copy small,
  #payments .payment-context strong,
  #payments .payment-context small,
  #payments .payment-reference strong,
  #payments .payment-reference small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #payments .payment-customer-copy strong,
  #payments .payment-context small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  #payments .payment-customer-copy small,
  #payments .payment-context strong,
  #payments .payment-reference strong,
  #payments .payment-reference small{white-space:nowrap}
  #payments .payment-date strong,
  #payments .payment-method-copy strong,
  #payments .payment-reference strong{font-size:11px!important}
  #payments .payment-date small,
  #payments .payment-method-copy small,
  #payments .payment-reference small{font-size:9px!important}
  #payments .payment-method{gap:7px}
  #payments .payment-method-icon{width:30px;height:30px;flex-basis:30px}
  #payments .payment-amount{font-size:17px!important;font-weight:850;direction:ltr;white-space:nowrap}
  #payments .payment-status{padding:5px 8px;font-size:10px;max-width:116px;white-space:normal;text-align:center;justify-content:center}
  #payments .payment-row-actions{justify-content:flex-end;gap:8px}
  #payments .payment-row-action{width:42px!important;height:42px!important;border-radius:10px}
  #payments .payment-row-action svg{width:18px!important;height:18px!important}
  #payments .payment-row-failed,
  #payments .payment-row-pending,
  #payments .payment-row-pending-refund,
  #payments .payment-row-refunded,
  #payments .payment-row-partial-refund{background:var(--card-bg,var(--surface))}
  #payments .payment-row-failed{border-inline-start:3px solid var(--red-text,var(--danger))}
  #payments .payment-row-pending,
  #payments .payment-row-pending-refund{border-inline-start:3px solid var(--amber-text,var(--warning))}
  #payments .payment-row-refunded{border-inline-start:3px solid var(--red-text,var(--danger))}
  #payments .payment-row-partial-refund{border-inline-start:3px solid var(--blue-text,#2563eb)}
  #payments .payment-row-failed td:first-child,
  #payments .payment-row-pending td:first-child,
  #payments .payment-row-pending-refund td:first-child,
  #payments .payment-row-refunded td:first-child,
  #payments .payment-row-partial-refund td:first-child{box-shadow:none}
  #payments .payment-skeleton-row{grid-template-areas:"id status" "customer customer" "context context" "date method" "reference amount" "actions actions"}
  #payments .payment-skeleton-row td{min-height:30px}
  #payments .payments-empty-state{min-height:250px;padding:34px 18px;background:var(--card-bg,var(--surface))}
  #payments .payments-empty-inner{max-width:300px}
  #payments .payments-pagination{grid-template-columns:1fr;gap:11px;padding:12px;border-radius:0 0 15px 15px}
  #payments .payments-range-label{order:1;text-align:center}
  #payments .payments-page-controls{order:2;max-width:100%;overflow-x:auto;padding:2px}
  #payments .payments-page-size{order:3;justify-self:center}
  #payments .payments-page-controls button{min-width:36px;height:36px}
  #paymentModal,
  #paymentDetailsModal{padding:0!important;place-items:end stretch!important;align-items:end!important}
  #paymentModal .payment-modal-card,
  #paymentDetailsModal .payment-details-card{width:100%!important;max-width:none!important;max-height:94dvh!important;margin:0!important;padding:16px!important;border-radius:22px 22px 0 0!important;border-bottom:0!important}
  #paymentModal .modal-head,
  #paymentDetailsModal .modal-head{padding-bottom:12px!important;margin-bottom:10px!important}
  #paymentModal .payment-modal-intro{margin-bottom:11px;font-size:11px!important;line-height:1.45}
  #paymentModal .payment-form-scroll{gap:10px;padding-inline-end:0;scrollbar-gutter:auto}
  #paymentModal .payment-modal-section{padding:13px;border-radius:12px}
  #paymentModal .payment-section-heading{margin-bottom:11px}
  #paymentModal .payment-section-heading small{font-size:9px!important}
  #paymentModal .payment-linkage-grid,
  #paymentModal .payment-fields-grid{grid-template-columns:1fr;gap:10px}
  #paymentModal .payment-form-wide{grid-column:auto}
  #paymentModal .payment-form-field input,
  #paymentModal .payment-form-field select,
  #paymentModal .payment-form-field textarea{min-height:48px!important}
  #paymentModal .payment-form-field textarea{min-height:84px!important}
  #paymentModal .payment-association-summary{padding:11px;margin-top:11px}
  #paymentModal .payment-modal-actions{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px;margin-top:10px;padding:11px 0 max(0px,env(safe-area-inset-bottom))}
  #paymentModal .payment-modal-actions button{width:100%;min-width:0!important;min-height:46px}
  #paymentDetailsModal .payment-details-grid{grid-template-columns:1fr;gap:8px}
  #paymentDetailsModal .payment-detail-item.wide{grid-column:auto}
  #paymentDetailsModal .payment-details-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;padding-bottom:max(0px,env(safe-area-inset-bottom))}
  #paymentDetailsModal .payment-details-actions button{width:100%;min-width:0;min-height:44px}
  #paymentDetailsModal .payment-details-refund{grid-column:1/-1}
}

@media(max-width:380px){
  #payments .payments-filter-panel{grid-template-columns:1fr}
  #payments .payments-date-range,
  #payments .payments-toolbar-actions{grid-column:auto}
  #payments .payments-toolbar-actions{grid-template-columns:1fr}
  #payments .payments-toolbar-actions .payments-export-btn{grid-column:auto!important}
  #payments .payments-table tr{grid-template-columns:minmax(0,1fr) minmax(100px,.68fr);padding:12px}
  #payments .payment-kpi-card>strong{font-size:16px!important}
}


@media(max-width:700px){
  #paymentDetailsModal .payment-details-card{display:flex;flex-direction:column;overflow:hidden!important}
  #paymentDetailsModal #paymentDetailsBody{min-height:0;display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}
  #paymentDetailsModal .payment-details-grid{min-height:0;flex:1 1 auto;overflow-y:auto;padding-inline-end:2px}
  #paymentDetailsModal .payment-details-actions{flex:0 0 auto;padding-top:11px;border-top:1px solid var(--line,var(--border));background:var(--card-bg,var(--surface))}
}