/* ════════════════════════════════════════════════════════════════════
 * marble-bubbles-lock.css — ZERO TOLERANCE TRANSPARENCE (07/05/2026)
 * ════════════════════════════════════════════════════════════════════
 * Mission DEFINITIVE : toute bulle d'information ou popup DOIT etre un
 * bloc de marbre BLANC OPAQUE 100 %. Aucune transparence acceptee, peu
 * importe ou la cascade CSS reside.
 *
 * Charge en TOUT DERNIER dans index.html, apres dark-on-dark-ban.css.
 * Aucune classe Tailwind ne peut casser ces regles.
 * ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. POPOVER ANCRE (AnchoredPopover) → MARBRE BLANC OPAQUE
   Specificite renforcee (body div[data-testid=...]) pour battre
   le `div:not(.card):not(.bg-white)... { background: transparent !important }`
   present dans styles.theme.css ligne 40.
   ────────────────────────────────────────────────────────────── */
html body div[data-testid="anchored-popover"],
html body div[data-testid="currency-popover"],
html body div[data-testid$="-popover"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18),
              0 4px 10px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
}

/* Tous les enfants directs / textes du popover = lisibles */
html body div[data-testid="anchored-popover"] *,
html body div[data-testid="currency-popover"] *,
html body div[data-testid$="-popover"] * {
  color: inherit;
}

/* Cartes d'option a l'interieur du popover (CHF / EUR / USD / GBP) */
html body button[data-testid^="currency-option-"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────
   2. BANDEAU AWARENESS (VendorHandoverBanner) → MARBRE BLANC OPAQUE
   ────────────────────────────────────────────────────────────── */
html body div[data-testid="vendor-handover-banner"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #7c3aed !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10) !important;
  backdrop-filter: none !important;
}

html body div[data-testid="vendor-handover-banner"] *:not(button):not(a):not(svg):not(path) {
  color: #0f172a !important;
}

/* Le bouton "X" de fermeture reste lisible */
html body button[data-testid="vendor-handover-dismiss"] {
  color: #64748b !important;
  background: transparent !important;
}
html body button[data-testid="vendor-handover-dismiss"]:hover {
  color: #0f172a !important;
}

/* Le bouton "Voir l'awareness" en mode reduit (pill noire) reste lisible */
html body button[data-testid="vendor-handover-collapsed"] {
  background: #0f172a !important;
  color: #facc15 !important;
}
html body button[data-testid="vendor-handover-collapsed"] * {
  color: #facc15 !important;
}

/* ──────────────────────────────────────────────────────────────
   3. CONSEIL DES AGENTS (VendorCouncilStrip) → MARBRE BLANC OPAQUE
   ────────────────────────────────────────────────────────────── */
html body div[data-testid="vendor-council-strip"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

/* ──────────────────────────────────────────────────────────────
   3b. TITRE DE PAGE (PageTitleBubble) → MARBRE BLANC OPAQUE
   Wishlist Model : aucun titre ne doit jamais apparaitre directement
   sur l'image cosmique. Toujours dans une bulle blanche.
   ────────────────────────────────────────────────────────────── */
html body div.sf-title-bubble,
html body div[data-testid="page-title-bubble"],
html body div[data-testid$="-title-bubble"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html body div.sf-title-bubble h1,
html body div.sf-title-bubble h2,
html body div[data-testid$="-title-bubble"] h1,
html body div[data-testid$="-title-bubble"] h2 {
  color: #0f172a !important;
}

html body div.sf-title-bubble p,
html body div[data-testid$="-title-bubble"] p {
  color: #475569 !important;
}

/* ──────────────────────────────────────────────────────────────
   3d. AVATARS DES 7 AGENTS — visibilite garantie
   Les conteneurs et leurs <img> doivent rester opaques et visibles
   meme dans un workspace ou la regle "div transparent" s'applique.
   ────────────────────────────────────────────────────────────── */
html body [data-testid^="agent-avatar-"] {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}
html body [data-testid^="agent-avatar-"] img {
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: transparent !important;
  z-index: 1 !important;
}

/* ──────────────────────────────────────────────────────────────
   3c. LICENCES HOVER (Pokemon, One Piece, etc.) — glow + scale
   ────────────────────────────────────────────────────────────── */
.sf-license-bubble {
  background-color: #ffffff !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
  will-change: transform, box-shadow, filter;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.sf-license-bubble:hover,
.sf-license-bubble:focus-visible {
  transform: scale(1.05);
  box-shadow:
    0 12px 28px rgba(124, 58, 237, 0.22),
    0 4px 10px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(124, 58, 237, 0.18) inset;
  filter: brightness(1.08) saturate(1.12);
  z-index: 2;
}
.sf-license-bubble:active {
  transform: scale(1.03);
  filter: brightness(1.04);
}

/* Reduce motion : on respecte la preference utilisateur */
@media (prefers-reduced-motion: reduce) {
  .sf-license-bubble {
    transition: box-shadow 0.2s ease !important;
  }
  .sf-license-bubble:hover,
  .sf-license-bubble:focus-visible {
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. ANTI-GLASSMORPHISM GLOBAL — sur les espaces de gestion :
      toute bulle (.bg-white, .card, [data-card], [data-testid$="-bubble"])
      est interdite en transparence ou en backdrop-filter.
   ────────────────────────────────────────────────────────────── */
body.sf-workspace-active .bg-white,
body.sf-workspace-active [class*="bg-card"],
body.sf-workspace-active .bg-card,
body.sf-workspace-active [class*="card"]:not([class*="card-icon"]):not([class*="card-img"]),
body.sf-workspace-active [data-testid$="-bubble"],
body.sf-workspace-active [data-testid$="-card"],
body.sf-superadmin-active .bg-white,
body.sf-superadmin-active [class*="bg-card"],
body.sf-superadmin-active .bg-card,
body.sf-superadmin-active [class*="card"]:not([class*="card-icon"]):not([class*="card-img"]),
body.sf-superadmin-active [data-testid$="-bubble"],
body.sf-superadmin-active [data-testid$="-card"] {
  background-color: #ffffff !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────────────────────────
   4b. SLEDGEHAMMER : tout element dans un workspace qui ressemble
   a une carte (rounded OU border) est forcement opaque blanc.
   Specificite max. Couvre <main>, [data-sf-page], [data-page].
   ────────────────────────────────────────────────────────────── */
html body.sf-superadmin-active main div[class*="rounded"],
html body.sf-superadmin-active main section[class*="rounded"],
html body.sf-superadmin-active main article,
html body.sf-superadmin-active main div[class*="border"]:not(button):not([class*="border-b-"]),
html body.sf-superadmin-active [data-sf-page] div[class*="rounded"],
html body.sf-superadmin-active [data-sf-page] section[class*="rounded"],
html body.sf-superadmin-active [data-sf-page] div[class*="border"]:not(button):not([class*="border-b-"]),
html body.sf-superadmin-active [data-page] div[class*="rounded"],
html body.sf-superadmin-active [data-page] section[class*="rounded"],
html body.sf-superadmin-active [data-page] div[class*="border"]:not(button):not([class*="border-b-"]),
html body.sf-workspace-active main div[class*="rounded"],
html body.sf-workspace-active main section[class*="rounded"],
html body.sf-workspace-active main article,
html body.sf-workspace-active main div[class*="border"]:not(button):not([class*="border-b-"]),
html body.sf-workspace-active [data-sf-page] div[class*="rounded"],
html body.sf-workspace-active [data-sf-page] section[class*="rounded"],
html body.sf-workspace-active [data-sf-page] div[class*="border"]:not(button):not([class*="border-b-"]),
html body.sf-workspace-active [data-page] div[class*="rounded"],
html body.sf-workspace-active [data-page] section[class*="rounded"],
html body.sf-workspace-active [data-page] div[class*="border"]:not(button):not([class*="border-b-"]) {
  background-color: #ffffff !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Texte automatiquement sombre dans ces blocs (lisibilite 10/10) */
html body.sf-superadmin-active main div[class*="rounded"]:not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-violet"]):not([class*="text-indigo"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-pink"]),
html body.sf-superadmin-active [data-sf-page] div[class*="rounded"]:not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-violet"]):not([class*="text-indigo"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-pink"]),
html body.sf-workspace-active main div[class*="rounded"]:not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-violet"]):not([class*="text-indigo"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-pink"]),
html body.sf-workspace-active [data-sf-page] div[class*="rounded"]:not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-blue"]):not([class*="text-purple"]):not([class*="text-violet"]):not([class*="text-indigo"]):not([class*="text-amber"]):not([class*="text-orange"]):not([class*="text-pink"]) {
  color: #0f172a;
}

/* Exception : conteneurs tres larges (max-w-7xl, container) NE doivent
   PAS devenir blancs car ils servent juste de wrapper layout. */
html body.sf-superadmin-active main div.max-w-7xl,
html body.sf-superadmin-active main div.container,
html body.sf-superadmin-active main div.max-w-screen-xl,
html body.sf-superadmin-active main div.max-w-screen-2xl,
html body.sf-superadmin-active [data-sf-page] div.max-w-7xl,
html body.sf-superadmin-active [data-sf-page] div.container,
html body.sf-superadmin-active [data-page] div.max-w-7xl,
html body.sf-workspace-active main div.max-w-7xl,
html body.sf-workspace-active main div.container,
html body.sf-workspace-active main div.max-w-screen-xl,
html body.sf-workspace-active main div.max-w-screen-2xl,
html body.sf-workspace-active [data-sf-page] div.max-w-7xl,
html body.sf-workspace-active [data-sf-page] div.container,
html body.sf-workspace-active [data-page] div.max-w-7xl {
  background-color: transparent !important;
}

/* Exception : grilles flex/grid wrappers utilises uniquement comme layout. */
html body.sf-superadmin-active main div.grid:not([class*="rounded"]):not([class*="border"]),
html body.sf-superadmin-active main div.flex:not([class*="rounded"]):not([class*="border"]),
html body.sf-superadmin-active [data-sf-page] div.grid:not([class*="rounded"]):not([class*="border"]),
html body.sf-superadmin-active [data-sf-page] div.flex:not([class*="rounded"]):not([class*="border"]),
html body.sf-workspace-active main div.grid:not([class*="rounded"]):not([class*="border"]),
html body.sf-workspace-active main div.flex:not([class*="rounded"]):not([class*="border"]),
html body.sf-workspace-active [data-sf-page] div.grid:not([class*="rounded"]):not([class*="border"]),
html body.sf-workspace-active [data-sf-page] div.flex:not([class*="rounded"]):not([class*="border"]) {
  background-color: transparent !important;
}

/* ──────────────────────────────────────────────────────────────
   4c. NEUTRALISATION DES THEMES SOMBRES — Neural Deck / Cockpit
   Toute zone d'admin avec un gradient sombre (#0f172a, #1e293b,
   #020617, #1e1b4b, #312e81, #064e3b) doit redevenir blanche opaque
   sur le SuperAdmin. On cible les inline styles via [style*="..."].
   ────────────────────────────────────────────────────────────── */
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #0f172a"],
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #1e293b"],
html body.sf-superadmin-active [style*="background: linear-gradient(135deg, #0f172a"],
html body.sf-superadmin-active [style*="background: linear-gradient(135deg, #1e1b4b"],
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #1e1b4b"],
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #064e3b"],
html body.sf-superadmin-active [style*="background: radial-gradient(circle at 50% 0%, #1e1b4b"],
html body.sf-superadmin-active [style*="background: #0f172a"],
html body.sf-superadmin-active [style*="background: #1e293b"],
html body.sf-superadmin-active [style*="background:#0f172a"],
html body.sf-superadmin-active [style*="background:#1e293b"],
html body.sf-superadmin-active [style*="background-color: #0f172a"],
html body.sf-superadmin-active [style*="background-color: #1e293b"],
html body.sf-superadmin-active [style*="background-color:#0f172a"],
html body.sf-superadmin-active [style*="background-color:#1e293b"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* Dans une zone neutralisee, on force aussi les enfants textuels en sombre */
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #0f172a"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]),
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #1e293b"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]),
html body.sf-superadmin-active [style*="background: linear-gradient(135deg, #0f172a"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]),
html body.sf-superadmin-active [style*="background: linear-gradient(135deg, #1e1b4b"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]),
html body.sf-superadmin-active [style*="background: linear-gradient(145deg, #1e1b4b"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]),
html body.sf-superadmin-active [style*="radial-gradient(circle at 50% 0%, #1e1b4b"] *:not(button):not(svg):not(path):not([class*="text-white"]):not([class*="text-yellow"]):not([class*="text-violet"]):not([class*="text-emerald"]) {
  color: #0f172a !important;
}

/* Boutons sombres a l'interieur de ces zones : on les force en blanc opaque
   sauf s'ils sont explicitement primary (gradient violet/blue) */
html body.sf-superadmin-active [style*="background: #1e293b"]:not(button),
html body.sf-superadmin-active [style*="background:#1e293b"]:not(button) {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Force tous les contours pointilles sombres (border: 1px dashed #334155)
   en pointilles slate clair */
html body.sf-superadmin-active [style*="dashed #334155"] {
  border-color: #cbd5e1 !important;
}

/* Exception : les wrappers root .min-h-screen.bg-white restent
   transparents (Wishlist Model). */
body.sf-workspace-active .min-h-screen.bg-white,
body.sf-superadmin-active .min-h-screen.bg-white {
  background-color: transparent !important;
}

/* ──────────────────────────────────────────────────────────────
   5. INTERDIT : tout `rgba(255, 255, 255, 0.x)` ou `opacity: 0.x`
      applique a une bulle d'information sur workspace.
   ────────────────────────────────────────────────────────────── */
body.sf-workspace-active [style*="rgba(255, 255, 255, 0.95)"],
body.sf-workspace-active [style*="rgba(255,255,255,0.95)"],
body.sf-workspace-active [style*="rgba(255, 255, 255, 0.9)"],
body.sf-workspace-active [style*="rgba(255,255,255,0.9)"],
body.sf-workspace-active [style*="rgba(255, 255, 255, 0.85)"],
body.sf-workspace-active [style*="rgba(255,255,255,0.85)"],
body.sf-superadmin-active [style*="rgba(255, 255, 255, 0.95)"],
body.sf-superadmin-active [style*="rgba(255,255,255,0.95)"] {
  background-color: #ffffff !important;
}