/* ============================================================
   broker-payouts.css — صفحهٔ پرداخت گروهی (Navy / Teal)
   ============================================================ */

.payouts-live{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;margin-inline-start:auto;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--s2);color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex:none;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.payouts-live:hover{filter:brightness(.97)}
.payouts-live:active{transform:scale(.97)}
.payouts-live .dot{
  width:8px;height:8px;border-radius:50%;background:#94A3B8;flex:0 0 auto;
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.payouts-live[data-state="connecting"]{
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);color:#92400E;border-color:#F2DFA0;
}
.payouts-live[data-state="connecting"] .dot{background:#D97706;animation:payoutsDotBlink 1.2s ease-in-out infinite}

.payouts-live[data-state="live"]{
  background:linear-gradient(135deg,#F0FDFA,#CCFBF1);color:var(--teal-700);border-color:#99F6E4;
}
.payouts-live[data-state="live"] .dot{
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(20,184,166,.6);
  animation:payoutsDotPulse 2s ease-out infinite;
}

.payouts-live[data-state="offline"]{
  background:linear-gradient(135deg,#FEF2F2,#FEE2E2);color:#991B1B;border-color:#FECACA;
}
.payouts-live[data-state="offline"] .dot{background:#DC2626}
.payouts-live[data-state="offline"]:hover{background:linear-gradient(135deg,#FEE2E2,#FECACA)}

@keyframes payoutsDotPulse{
  0%{box-shadow:0 0 0 0 rgba(20,184,166,.55)}
  70%{box-shadow:0 0 0 9px rgba(20,184,166,0)}
  100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}
}
@keyframes payoutsDotBlink{0%,100%{opacity:1}50%{opacity:.35}}

@media(max-width:700px){
  .payouts-live{padding:9px 11px;gap:0}
  .payouts-live #payoutsLiveText{display:none}
}

.payout-output{
  margin-top:14px;
  background:linear-gradient(180deg, #0A2540, #050F21);
  color:#E2E8F0;border-radius:var(--r-md);
  padding:15px 17px;
  font-family:'SF Mono','Consolas','Menlo',monospace;
  font-size:11.5px;line-height:1.9;
  max-height:320px;overflow:auto;
  white-space:pre-wrap;direction:ltr;text-align:left;
  box-shadow:var(--sh-md);
  border:1px solid rgba(255,255,255,.05);
}
.payout-output.err{background:linear-gradient(180deg,#450A0A,#7F1D1D);color:#FECACA}
.payout-output.ok{background:linear-gradient(180deg,#052E16,#064E3B);color:#BBF7D0}

.payout-inline-download{
  display:flex;align-items:center;gap:12px;
  padding:15px 17px;border-radius:var(--r-md);
  background:linear-gradient(135deg,#F0FDFA,#F0FEFB);
  border:1.5px solid #99F6E4;
  flex-wrap:wrap;box-shadow:var(--sh-xs);
}
.payout-inline-download .msg{
  flex:1;min-width:180px;font-size:12.5px;
  color:var(--teal-700);font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.payout-inline-download .msg .material-symbols-rounded{font-size:22px}
.payout-inline-download .btn{flex:none}

.payout-files-list{display:flex;flex-direction:column;gap:8px}

.payout-file-row{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-md);background:#fff;
  box-shadow:var(--sh-xs);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.payout-file-row:hover{border-color:var(--teal);background:#FDFFFE;box-shadow:var(--sh-sm)}

.payout-file-info{display:flex;align-items:center;gap:10px;min-width:0}
.payout-file-info .material-symbols-rounded{
  font-size:26px;color:var(--teal-700);flex:none;
  background:linear-gradient(135deg, var(--tealc), #99F6E4);
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
}
.payout-file-info > div{min-width:0}
.payout-file-info b{
  display:block;font-size:12.5px;font-weight:700;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.payout-file-info small{
  display:block;font-size:10.5px;color:var(--muted);
  margin-top:3px;font-variant-numeric:tabular-nums;
}
.payout-file-row .btn{flex:none;min-height:42px;padding:0 15px;font-size:12px}

.paya-account-card{
  display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  padding:18px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#F0FDFA,#F0FEFB);
  border:1.5px solid #99F6E4;
  box-shadow:var(--sh-xs);
}
.paya-account-card .pa-icon{
  width:56px;height:56px;border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--teal-600), var(--teal));
  color:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 10px 22px -8px rgba(20,184,166,.7);
}
.paya-account-card .pa-icon .material-symbols-rounded{font-size:28px}
.paya-account-card .pa-info{min-width:0}
.paya-account-card .pa-info b{
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:800;color:var(--teal-700);
}
.paya-account-card .pa-info .pa-rows{margin-top:6px;display:grid;gap:3px}
.paya-account-card .pa-info .pa-row{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--teal-700);font-variant-numeric:tabular-nums;
}
.paya-account-card .pa-info .pa-row .material-symbols-rounded{font-size:15px;opacity:.8;flex:none}
.paya-account-card .pa-info .pa-row span{opacity:.75;flex:none}
.paya-account-card .pa-info .pa-row b{color:var(--teal-700);font-weight:700;letter-spacing:1.2px}

.paya-account-card .pa-actions{display:flex;flex-direction:column;gap:6px}
.paya-account-card .pa-actions .btn{min-height:40px;padding:0 15px;font-size:12px;white-space:nowrap}

.paya-form{display:grid;gap:12px}
.paya-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paya-form .field-label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px;font-weight:600}
.paya-form input[type=text]{
  width:100%;height:48px;border-radius:13px;
  border:1.5px solid var(--line-strong);
  background:#fff;padding:0 15px;font-size:14px;color:var(--txt);
  outline:none;font-family:inherit;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.paya-form input[type=text]:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.15)}
.paya-form input.mono{
  direction:ltr;text-align:left;letter-spacing:1.5px;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.paya-form .field-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.7}
.paya-form .field-hint.err{color:var(--err);font-weight:700}
.paya-form .field-hint.ok{color:var(--teal-700);font-weight:700}

.paya-form .paya-form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.paya-form .paya-form-actions .btn{flex:1 1 auto;min-width:120px}

.payout-card{position:relative}
.payout-card::before{
  content:'';position:absolute;top:0;bottom:0;inset-inline-end:0;width:4px;
  border-start-end-radius:var(--r-lg);border-end-end-radius:var(--r-lg);
  background:linear-gradient(180deg,#7DD3FC,#0284C7);
}
.payout-card.confirmed::before{background:linear-gradient(180deg,#5EEAD4,var(--teal))}
.payout-card[data-empty="1"]::before{background:linear-gradient(180deg,#CBD5E1,#94A3B8)}

.payout-meta{
  display:grid;gap:4px;
  background:linear-gradient(180deg,#FAFCFF,#fff);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin:4px 0;
}
.payout-meta-row{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.payout-meta-row .material-symbols-rounded{font-size:17px;color:var(--p);flex:0 0 auto}
.payout-meta-row .muted{color:var(--muted);font-size:11.5px}
.payout-meta-row b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.payout-amount{
  background:linear-gradient(135deg,#F0F7FD 0%, #F0FDFA 100%);
  border:1.5px solid #BAE0F7;
  border-radius:var(--r-md);padding:13px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:var(--sh-xs);
}
.payout-amount .lbl{font-size:11px;color:#075985;font-weight:700}
.payout-amount .amt{
  font-size:19px;font-weight:800;color:var(--p);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}

.payout-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.payout-actions .btn{flex:1 1 auto;min-width:0}

@media(max-width:700px){
  .payout-actions{flex-direction:column}
  .payout-actions .btn{width:100%;flex:1 1 100%}
  .payout-file-row{grid-template-columns:1fr}
  .payout-file-row .btn{width:100%}
  .paya-account-card{grid-template-columns:48px 1fr;gap:12px}
  .paya-account-card .pa-icon{width:48px;height:48px}
  .paya-account-card .pa-actions{grid-column:1/-1;flex-direction:row;margin-top:8px}
  .paya-account-card .pa-actions .btn{flex:1}
  .paya-form .field-row{grid-template-columns:1fr}
}