

/* =========================================================
   MONEY PROGRAMMABLE — PRODUCTION UI PATCH
   Ajout chirurgical: création, reverse, reset, panel développeur
========================================================= */
.money-programmable-control {
  width: min(1180px, calc(100% - 48px));
  margin: 28px auto 48px;
  padding: 22px;
  border: 1px solid rgba(0, 240, 255, .35);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(2, 8, 24, .82), rgba(6, 18, 46, .72));
  box-shadow: 0 0 28px rgba(0, 200, 255, .22), inset 0 0 22px rgba(0, 200, 255, .08);
  color: #eaffff;
}
.money-programmable-control__head {display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px;}
.money-programmable-control__kicker {display:block;color:#7ff;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;}
.money-programmable-control h2 {margin:0;color:#f4ffff;font-size:24px;}
.money-programmable-control p {margin:8px 0 0;opacity:.82;line-height:1.55;max-width:820px;}
.money-programmable-control__grid {display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;}
.money-programmable-action {min-height:104px;border:1px solid rgba(0,240,255,.38);border-radius:18px;background:rgba(2,8,24,.78);color:#eaffff;text-align:left;padding:16px;cursor:pointer;transition:.18s ease;}
.money-programmable-action:hover {transform:translateY(-2px);box-shadow:0 0 20px rgba(0,240,255,.32);border-color:rgba(127,255,255,.78);}
.money-programmable-action strong {display:block;color:#7ff;margin-bottom:6px;}
.money-programmable-action span {display:block;font-size:12px;opacity:.78;line-height:1.35;}
.money-programmable-overlay {position:fixed;inset:0;z-index:2147483647;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(1,5,18,.78);backdrop-filter:blur(12px);}
.money-programmable-overlay.is-open {display:flex;}
.money-programmable-modal {width:min(760px,96vw);max-height:92vh;overflow:auto;border-radius:24px;background:linear-gradient(145deg,#06122c,#020617);border:1px solid rgba(0,240,255,.42);box-shadow:0 0 45px rgba(0,220,255,.38);color:#eaffff;}
.money-programmable-modal.money-programmable-modal--wide {width:min(1120px,96vw);}
.money-programmable-modal__head {position:sticky;top:0;z-index:2;padding:18px 20px;background:rgba(2,8,24,.96);border-bottom:1px solid rgba(0,240,255,.25);display:flex;justify-content:space-between;gap:18px;align-items:flex-start;}
.money-programmable-modal__head h3 {margin:0;color:#7ff;font-size:20px;}
.money-programmable-modal__head p {margin:6px 0 0;font-size:13px;opacity:.82;line-height:1.45;}
.money-programmable-close {border:1px solid rgba(255,92,92,.55);background:transparent;color:#ff9090;border-radius:12px;padding:8px 12px;cursor:pointer;}
.money-programmable-form {padding:20px;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;max-height:none;overflow:visible;}
.money-programmable-form label {display:flex;flex-direction:column;gap:6px;font-size:13px;color:#dff;}
.money-programmable-form input,.money-programmable-form select,.money-programmable-form textarea {width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(0,240,255,.4);background:#020818;color:#fff;padding:10px 12px;}
.money-programmable-form textarea {min-height:74px;resize:vertical;}
.money-programmable-form .full {grid-column:1/-1;}
.money-programmable-form__actions {grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px;}
.money-programmable-note {grid-column:1/-1;padding:12px;border:1px solid rgba(255,215,0,.32);border-radius:14px;background:rgba(255,215,0,.07);font-size:12px;line-height:1.45;color:#fff8d6;}
.money-programmable-status {grid-column:1/-1;display:none;padding:12px;border-radius:14px;background:rgba(0,240,255,.09);border:1px solid rgba(0,240,255,.28);font-size:13px;line-height:1.45;}
.money-programmable-status.is-visible {display:block;}
.money-programmable-status.is-error {background:rgba(255,70,70,.09);border-color:rgba(255,92,92,.42);color:#ffdede;}
.money-programmable-table-wrap {padding:20px;overflow:auto;}
.money-programmable-table {width:100%;border-collapse:collapse;font-size:13px;}
.money-programmable-table th,.money-programmable-table td {padding:10px;border-bottom:1px solid rgba(0,240,255,.16);text-align:left;vertical-align:top;}
.money-programmable-table th {color:#7ff;background:rgba(0,240,255,.07);position:sticky;top:66px;}
.money-programmable-badge {display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;border:1px solid rgba(0,240,255,.34);font-size:11px;color:#dff;}
@media(max-width:880px){.money-programmable-control__grid,.money-programmable-form{grid-template-columns:1fr}.money-programmable-control{width:calc(100% - 24px);padding:16px}}

/* =========================================================
   UNIPAY PAYMENT MODALS — PRIORITY + SCROLL STABILIZER
   Objectif: garder le design existant, stabiliser la priorité CSS,
   respecter la barre supérieure, inférieure et latérale, et rendre
   les contenus de modales scrollables sans écraser les styles visuels.
========================================================= */
:root{
  --upi-topbar-reserved: var(--fut-menu-height, 72px);
  --upi-bottombar-reserved: 76px;
  --upi-sidebar-reserved: 76px;
  --upi-modal-safe-gap: 18px;
  --upi-modal-z: 2147482500;
  --upi-panel-max-width: 620px;
  --upi-panel-wide-width: 1120px;
}

/* Les menus gardent leur place visuelle: on ne les neutralise pas. */
.top-bar,.fut-topbar,.topbar,.header,.navbar{z-index:2147481800;}
.fut-sidebar{z-index:2147481700;}
.fut-bottombar,.bottom-bar,.bottombar{z-index:2147481600;}

/* Le contenu de page ne doit jamais passer au-dessus des overlays. */
.page-scope,.page,.payment-css,#payment-overlay-root,.variables-wrapper,.payment-overlay-card{
  position:relative;
  z-index:auto;
}

/* Rétablit les valeurs invalides sans toucher au design. */
.variables-wrapper{box-sizing:border-box;}
.payment-css input,
.payment-css select,
.payment-css textarea,
.money-programmable-control input,
.money-programmable-control select,
.money-programmable-control textarea,
.futuristic-panel input,
.futuristic-panel select,
.futuristic-panel textarea,
.money-programmable-modal input,
.money-programmable-modal select,
.money-programmable-modal textarea{
  width:100%;
  box-sizing:border-box;
}

/* Overlay général: priorité propre + espace réservé aux barres. */
.futuristic-overlay,
.balance-modal-overlay,
.money-programmable-overlay{
  position:fixed;
  top:calc(var(--upi-topbar-reserved) + var(--upi-modal-safe-gap));
  right:var(--upi-modal-safe-gap);
  bottom:calc(var(--upi-bottombar-reserved) + var(--upi-modal-safe-gap));
  left:calc(var(--upi-sidebar-reserved) + var(--upi-modal-safe-gap));
  z-index:var(--upi-modal-z);
  align-items:flex-start;
  justify-content:center;
  padding:0;
  overflow-y:auto;
  overflow-x:hidden;
  pointer-events:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Par défaut les overlays restent fermés; les fonctions JS ouvrent via style.display='flex'. */
.futuristic-overlay,
.money-programmable-overlay{display:none;}
.futuristic-overlay.hidden,
.money-programmable-overlay.hidden,
.balance-modal-overlay.hidden{display:none !important;}
.money-programmable-overlay.is-open{display:flex;}

/* On conserve l'ambiance visuelle: fond blur + panneau néon, mais avec scroll interne stable. */
.futuristic-panel{
  width:min(var(--upi-panel-max-width), calc(100vw - var(--upi-sidebar-reserved) - 42px));
  max-width:100%;
  max-height:calc(100vh - var(--upi-topbar-reserved) - var(--upi-bottombar-reserved) - 52px);
  margin:auto 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:18px;
}

.futuristic-header{
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:2;
}

.futuristic-panel > form,
.futuristic-panel .modal-body,
.futuristic-panel .upi-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  overscroll-behavior:contain;
}

.futuristic-panel form .form-group{
  max-height:none;
  overflow:visible;
}

/* Annule uniquement les anciennes règles qui empêchaient le scroll. */
.deposit-form,
.withdraw-form,
.convertDU-form,
.convertUD-form,
.programmableD-form,
.programmableU-form,
.transfererU-form,
.boitedereception-form,
.futuristic-panel form{
  max-height:none;
}

/* Money programmable: même design, meilleure hiérarchie, scroll du contenu seulement. */
.money-programmable-control{
  position:relative;
  z-index:1;
  margin-left:max(28px, var(--upi-sidebar-reserved));
  margin-bottom:calc(var(--upi-bottombar-reserved) + 36px);
}

.money-programmable-modal{
  max-height:calc(100vh - var(--upi-topbar-reserved) - var(--upi-bottombar-reserved) - 52px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.money-programmable-modal__head{
  flex:0 0 auto;
  position:sticky;
  top:0;
  z-index:3;
}

.money-programmable-form,
.money-programmable-table-wrap{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:none;
  overscroll-behavior:contain;
}

.money-programmable-modal--wide{
  width:min(var(--upi-panel-wide-width), calc(100vw - var(--upi-sidebar-reserved) - 42px));
}

/* Scrollbar futuriste conservée / renforcée. */
.futuristic-overlay::-webkit-scrollbar,
.futuristic-panel > form::-webkit-scrollbar,
.futuristic-panel .modal-body::-webkit-scrollbar,
.money-programmable-form::-webkit-scrollbar,
.money-programmable-table-wrap::-webkit-scrollbar{
  width:12px;
}
.futuristic-overlay::-webkit-scrollbar-track,
.futuristic-panel > form::-webkit-scrollbar-track,
.futuristic-panel .modal-body::-webkit-scrollbar-track,
.money-programmable-form::-webkit-scrollbar-track,
.money-programmable-table-wrap::-webkit-scrollbar-track{
  background:rgba(2,8,24,.88);
  border-radius:20px;
}
.futuristic-overlay::-webkit-scrollbar-thumb,
.futuristic-panel > form::-webkit-scrollbar-thumb,
.futuristic-panel .modal-body::-webkit-scrollbar-thumb,
.money-programmable-form::-webkit-scrollbar-thumb,
.money-programmable-table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#00f0ff,#0077ff);
  border-radius:20px;
  box-shadow:0 0 8px rgba(0,255,255,.7);
}

body.modal-open,
body.deposit-overlay-open,
body.withdraw-overlay-open,
body.convert-overlay-open,
body.money-programmable-open{
  overflow:hidden;
}

@media(max-width:900px){
  :root{
    --upi-sidebar-reserved: 0px;
    --upi-bottombar-reserved: 84px;
    --upi-modal-safe-gap: 10px;
  }
  .futuristic-overlay,
  .balance-modal-overlay,
  .money-programmable-overlay{
    left:var(--upi-modal-safe-gap);
    right:var(--upi-modal-safe-gap);
  }
  .futuristic-panel,
  .money-programmable-modal,
  .money-programmable-modal--wide{
    width:100%;
  }
  .money-programmable-control{
    margin-left:12px;
    margin-right:12px;
  }
}

@media(max-height:720px){
  :root{--upi-topbar-reserved:56px;--upi-bottombar-reserved:58px;}
  .futuristic-panel,.money-programmable-modal{
    max-height:calc(100vh - 132px);
  }
}

/* =========================================================
   HARD REMOVE — FOND DERRIÈRE MODALE PROGRAMMABLE
========================================================= */

/* Supprime totalement le fond parasite */
.money-programmable-overlay{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Neutralise toutes les couches derrière */
.money-programmable-overlay::before,
.money-programmable-overlay::after,
.money-programmable-modal::before,
.money-programmable-modal::after{
    display: none !important;
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Force la modale seule à être visible */
.money-programmable-modal{
    position: relative !important;
    z-index: 999999 !important;

    overflow: hidden !important;

    background:
      linear-gradient(
        145deg,
        rgba(6,18,44,0.98),
        rgba(2,6,23,0.98)
      ) !important;
}

/* Cache tout débordement derrière */
.money-programmable-control,
.money-programmable-form,
.money-programmable-table-wrap{
    overflow: hidden !important;
}

/* Empêche tout fond global de réapparaitre */
body.money-programmable-open::before,
body.money-programmable-open::after{
    display:none !important;
}

/* =========================================================
   MONEY PROGRAMMABLE — INTERNAL SCROLL FIX
   Force le scroll à rester à l'intérieur de la modale
========================================================= */

/* Overlay fixe sans scroll externe */
.money-programmable-overlay{
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modale scrollable uniquement en interne */
.money-programmable-modal{
    position: relative !important;

    width: min(760px, 96vw) !important;
    max-width: 96vw !important;

    height: auto !important;
    max-height: 92vh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    box-sizing: border-box !important;
}

/* Formulaire interne */
.money-programmable-form{
    overflow: visible !important;
    max-height: none !important;
}

/* Scrollbar futuriste interne */
.money-programmable-modal::-webkit-scrollbar{
    width: 14px;
}

.money-programmable-modal::-webkit-scrollbar-track{
    background: rgba(2,8,24,0.9);
    border-radius: 20px;
}

.money-programmable-modal::-webkit-scrollbar-thumb{
    background: linear-gradient(
        180deg,
        #00f0ff,
        #0077ff
    );

    border-radius: 20px;

    box-shadow:
        0 0 10px rgba(0,240,255,0.7);
}

/* Empêche le body de scroller derrière */
body.money-programmable-open{
    overflow: hidden !important;
    height: 100vh !important;
}

/* =========================================================
   MONEY PROGRAMMABLE — CLIENT LEDGER + PRIVACY PATCH
========================================================= */
.money-programmable-client-ledger,
.money-programmable-dev-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:16px;
}
.money-programmable-ledger-card,
.money-programmable-dev-summary > div{
  border:1px solid rgba(0,240,255,.28);
  border-radius:16px;
  padding:14px;
  background:rgba(2,8,24,.72);
  box-shadow:inset 0 0 12px rgba(0,240,255,.06);
}
.money-programmable-ledger-card span,
.money-programmable-dev-summary span{
  display:block;
  font-size:12px;
  opacity:.78;
  margin-bottom:6px;
}
.money-programmable-ledger-card strong,
.money-programmable-dev-summary strong{
  color:#7ff;
  font-family:Consolas,monospace;
  font-size:18px;
}
.money-programmable-privacy-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:16px 20px 0;
}
.money-programmable-privacy-row label{
  display:flex;
  gap:8px;
  align-items:center;
  color:#eaffff;
}
.money-programmable-small-btn{
  border:1px solid rgba(0,240,255,.35);
  border-radius:12px;
  padding:9px 12px;
  background:rgba(0,240,255,.08);
  color:#eaffff;
  cursor:pointer;
}
.money-programmable-small-btn:hover{
  border-color:rgba(127,255,255,.78);
  box-shadow:0 0 14px rgba(0,240,255,.24);
}
