/* 
 * PRIORITÉ ABSOLUE - Fond d'écran SuperAdmin
 * Ce fichier doit être chargé EN DERNIER pour override tous les autres
 * Seule l'image uploadée dans SuperAdmin fait foi - PAS DE FOND BLANC
 */

/* PAS DE FOND BLANC - Supprimé à la demande du client */
/* L'image uploadée est directement visible sur fond transparent */

/* iter 159 (JF) — NEUTRALISÉ : le background cosmique est désormais géré
   uniquement par App.js (`[data-testid="cosmic-background-root"]`). Les
   anciennes règles ci-dessous sont conservées en commentaire pour traçabilité. */

/* Image de fond uploadée via SuperAdmin — DÉSACTIVÉ iter 159 */
#sf-bg-image {
  display: none !important;
}

/* Fallback ::after — DÉSACTIVÉ iter 159 */
body:not(:has(#sf-bg-image))::after {
  content: none !important;
}

/* OVERRIDE FORCÉ - iter 159 (JF) — html/body retirés de la purge :
   le background-image cosmique riviere1.jpeg.jpg est désormais peint
   directement sur html/body via /css/global-background.css.
   On garde la purge sur #root/.App/main pour qu'aucun wrapper ne masque
   l'image. */
#root,
.App,
main {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* Annuler spécifiquement les fonds forcés par d'autres CSS */
body::before:not(:has(#sf-bg-plate)),
body::after:not(:has(#sf-bg-image)) {
  /* Ces pseudo-éléments sont gérés ci-dessus pour le fallback */
}

/* Desktop : Largeur fixe 1280px, contenu défile */
@media (min-width: 1024px) {
  #sf-bg-image {
    width: 1280px;
    max-width: 1280px;
  }
  
  body:not(:has(#sf-bg-image))::after {
    width: 1280px;
    max-width: 1280px;
  }
}

/* Mobile : Responsive avec max 1280px */
@media (max-width: 1023px) {
  #sf-bg-image,
  body:not(:has(#sf-bg-image))::after {
    width: 100%;
    max-width: 1280px;
  }
}

/* ============================================================
   WISHLIST MODEL — Workspace transparent + bulles flottantes
   ============================================================
   Mission "Wishlist Model" (07 mai 2026) : sur tous les espaces
   d'administration / gestion (Dashboard, Vendor Dashboard, SuperAdmin,
   Profile, Orders, Offers, Notifications, MyItems, Purchases, Wishes),
   le fond de page devient TRANSPARENT pour laisser apparaitre l'image
   d'arriere-plan du site. Seules les bulles `bg-white` (cartes,
   containers de contenu) restent 100 % opaques.

   La classe `.sf-superadmin-active` est ajoutee via useEffect dans
   SuperAdminPage.js et retiree au demontage.

   La classe `.sf-workspace-active` (geree par WorkspaceBodyClass.js)
   applique le meme traitement aux Seller / Customer / Vendor Dashboards. */
html.sf-superadmin-active,
body.sf-superadmin-active,
body.sf-superadmin-active #root,
body.sf-superadmin-active .App,
body.sf-superadmin-active main,
html.sf-workspace-active,
body.sf-workspace-active,
body.sf-workspace-active #root,
body.sf-workspace-active .App,
body.sf-workspace-active main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* AFFICHE l'image cosmique uploadee (au lieu de la cacher) sur les
   espaces de gestion : la "Wishlist Model" demande le meme rendu que
   le marketplace public. */
body.sf-superadmin-active #sf-bg-image,
body.sf-workspace-active #sf-bg-image {
  display: block !important;
  opacity: 1 !important;
  z-index: -1 !important;
}

/* Neutralise les fonds gris/blancs de wrapper de page (Tailwind) sur
   tous les wrappers root commun : les pages d'admin/dashboard/vendor
   utilisent souvent `min-h-screen bg-gray-50/100/slate-50/white` comme
   container principal. On force transparent sur ces wrappers UNIQUEMENT
   sous classes workspace, ce qui n'affecte JAMAIS le marketplace. */
body.sf-workspace-active .min-h-screen,
body.sf-superadmin-active .min-h-screen {
  background-color: transparent !important;
  background-image: none !important;
}

body.sf-workspace-active .min-h-screen.bg-gradient-to-br,
body.sf-superadmin-active .min-h-screen.bg-gradient-to-br,
body.sf-workspace-active .min-h-screen.bg-gradient-to-b,
body.sf-superadmin-active .min-h-screen.bg-gradient-to-b,
body.sf-workspace-active .min-h-screen.bg-gradient-to-r,
body.sf-superadmin-active .min-h-screen.bg-gradient-to-r {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Wrappers main/section avec backgrounds inline-style ou Tailwind
   appliques en SECOND niveau (pas root mais conteneur d'onglet). */
body.sf-workspace-active main.bg-gray-50,
body.sf-workspace-active main.bg-gray-100,
body.sf-workspace-active main.bg-white,
body.sf-superadmin-active main.bg-gray-50,
body.sf-superadmin-active main.bg-gray-100,
body.sf-superadmin-active main.bg-white {
  background-color: transparent !important;
  background-image: none !important;
}

/* Inline `style="background:#fff/#f3f4f6"` sur le wrapper root :
   on annule via attribut. Pas de :not pour rester simple. */
body.sf-superadmin-active [data-page="superadmin"][style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* INTEGRITE DES BULLES : les bulles internes restent OPAQUES.
   On RAFFERMIT les `bg-white` qui sont des "bulles" (cartes,
   sections, headers) en s'assurant qu'aucune regle plus haut ne
   les rend transparentes. */
body.sf-workspace-active .bg-white,
body.sf-superadmin-active .bg-white {
  background-color: #ffffff !important;
}

/* Exception : les wrappers root marques `min-h-screen bg-white`
   doivent rester TRANSPARENTS (sinon on couvre l'image cosmique). */
body.sf-workspace-active .min-h-screen.bg-white,
body.sf-superadmin-active .min-h-screen.bg-white {
  background-color: transparent !important;
}