/* esq-ui.css — Payouts shared UI helpers (added in 3.3.5.5)
   Loaded on every full page. Purely additive: nothing here changes existing
   layout unless a page opts into the helper classes / JS. Scoped under .esq-*
   prefixes to avoid clashing with Bootstrap or page styles. */

/* ---------- Toasts ---------- */
#esq-toast-wrap{
  position:fixed; z-index:2147483000; top:16px; right:16px;
  display:flex; flex-direction:column; gap:10px; max-width:min(92vw,380px);
  pointer-events:none;
}
.esq-toast{
  pointer-events:auto;
  font:500 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff; background:#323844; border-radius:10px; padding:12px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  display:flex; align-items:flex-start; gap:10px;
  transform:translateY(-8px); opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  word-break:break-word;
}
.esq-toast.esq-show{ transform:translateY(0); opacity:1; }
.esq-toast.esq-success{ background:#15803d; }
.esq-toast.esq-error{ background:#b91c1c; }
.esq-toast.esq-info{ background:#1d4ed8; }
.esq-toast .esq-toast-x{
  margin-left:auto; cursor:pointer; opacity:.8; font-size:18px; line-height:1;
  background:none; border:0; color:inherit; padding:0 2px;
}
.esq-toast .esq-toast-x:hover{ opacity:1; }

/* ---------- Confirm modal ---------- */
.esq-modal-backdrop{
  position:fixed; inset:0; z-index:2147483600;
  background:rgba(17,20,26,.55); display:flex; align-items:center;
  justify-content:center; padding:18px;
  opacity:0; transition:opacity .15s ease;
}
.esq-modal-backdrop.esq-show{ opacity:1; }
.esq-modal{
  background:#fff; color:#1f2530; border-radius:14px; width:100%;
  max-width:440px; box-shadow:0 18px 60px rgba(0,0,0,.32);
  transform:translateY(6px) scale(.98); transition:transform .15s ease;
  font:400 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;
}
.esq-modal-backdrop.esq-show .esq-modal{ transform:none; }
.esq-modal-body{ padding:22px 22px 8px; }
.esq-modal-title{ font-weight:700; font-size:17px; margin:0 0 6px; }
.esq-modal-msg{ margin:0; color:#48505e; }
.esq-modal-actions{
  display:flex; gap:10px; justify-content:flex-end; padding:16px 22px 20px;
}
.esq-btn{
  font:600 14px/1 system-ui,sans-serif; border-radius:9px; padding:11px 16px;
  border:1px solid transparent; cursor:pointer; min-width:96px; min-height:44px;
}
.esq-btn-cancel{ background:#eef0f3; color:#333b48; }
.esq-btn-cancel:hover{ background:#e2e6ea; }
.esq-btn-confirm{ background:#b91c1c; color:#fff; }
.esq-btn-confirm:hover{ filter:brightness(.94); }
.esq-btn-confirm.esq-safe{ background:#1d4ed8; }

/* ---------- Responsive table wrapper (added by JS) ---------- */
.esq-table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.esq-table-scroll > table{ min-width:max-content; }

/* ---------- Button busy / double-submit guard ---------- */
.esq-busy{ position:relative; pointer-events:none; opacity:.75; }
.esq-busy .esq-spin,
button.esq-busy::after, input.esq-busy::after{
  content:""; display:inline-block; width:14px; height:14px; margin-left:8px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  vertical-align:-2px; animation:esq-spin .6s linear infinite;
}
@keyframes esq-spin{ to{ transform:rotate(360deg); } }

/* ---------- Mobile niceties ---------- */
@media (max-width:600px){
  /* Stop iOS from zooming when focusing small inputs */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea{ font-size:16px; }
}
html, body{ max-width:100%; overflow-x:hidden; }