/**
 * NautiSphere - Logo Display System (Neutral)
 *
 * PRINCIPE : Le conteneur est transparent et n'impose AUCUNE forme.
 * C'est le fichier PNG/image qui détermine si le logo est rond ou carré.
 * - Logo rond PNG avec transparence → s'affiche rond naturellement
 * - Logo carré PNG → s'affiche carré naturellement
 * - Pas de logo → fallback lettre dans un cercle (seul cas avec border-radius)
 *
 * RÈGLE D'OR : JAMAIS de border-radius sur les <img> de logos !
 */

/* ═══════════════════════════════════════════════════════════════
   SYSTÈME GLOBAL - Conteneurs de logos (fond transparent, forme neutre)
   ═══════════════════════════════════════════════════════════════ */

/* Tous les conteneurs de logos quand une image est présente */
.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    /* PAS de border-radius ici - forme neutre */
    /* PAS de overflow: hidden avec border-radius - évite le crop */
}

/* Toutes les images de logos - AUCUNE déformation */
.has-logo-image img,
.logo-container img,
.navbar-logo img,
.sidebar-logo img,
.sidebar-logo-icon img,
[class*="logo-wrapper"] img,
[class*="brand-logo"] img,
[class*="logo-display"] img,
.welcome-modal-logo img,
.welcome-modal-logo-img,
.welcome-skipper-icon img,
.welcome-skipper-logo-img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;      /* CRUCIAL : pas de border-radius sur l'image */
    clip-path: none !important;        /* CRUCIAL : pas de clip-path */
    object-fit: contain !important;    /* Contenir sans déformer */
    max-width: 100%;
    max-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT INTERFACE - Navbar Logo
   ═══════════════════════════════════════════════════════════════ */

#navbarLogo.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Pas de border-radius - forme neutre */
}

#navbarLogo.has-logo-image #navbarLogoImage {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR - Reseller & Business dashboards
   ═══════════════════════════════════════════════════════════════ */

.sidebar-logo-icon.has-logo-image,
#sidebar-logo-container.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Pas de border-radius - forme neutre */
}

.sidebar-logo-icon.has-logo-image img,
#sidebar-logo-container.has-logo-image img,
#sidebar-logo-img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Business Sidebar Logo */
.business-sidebar-logo.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MARKETPLACE DASHBOARD - Header & Sidebar Logo
   ═══════════════════════════════════════════════════════════════ */

#marketplace-logo-container.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#marketplace-logo-container.has-logo-image img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

.header-logo .logo-icon.has-logo-image,
.mp-header-logo .logo-icon.has-logo-image,
.sidebar-logo .logo-icon.has-logo-image,
.mp-sidebar-header .logo-icon.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME MODAL - Modale d'accueil
   ═══════════════════════════════════════════════════════════════ */

/* Logo principal de la modale */
.welcome-modal-logo.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    /* Pas de border-radius - forme neutre */
}

.welcome-modal-logo.has-logo-image img,
.welcome-modal-logo-img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Icône Skipper dans la modale */
.welcome-skipper-icon.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.welcome-skipper-icon.has-logo-image img,
.welcome-skipper-logo-img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD - Aperçus de logos
   ═══════════════════════════════════════════════════════════════ */

/* Aperçus généraux */
[id*="logo-preview"].has-logo-image,
[id*="logoPreview"].has-logo-image,
[id*="preview-logo"].has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

[id*="logo-preview"] img,
[id*="logoPreview"] img,
[id*="preview-logo"] img {
    background: transparent !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Aperçu section Accueil */
#welcome-preview-logo-container.has-logo-image,
#welcome-preview-skipper-icon-container.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#welcome-preview-logo-img,
#welcome-preview-skipper-logo-img {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

/* Aperçus spécifiques admin */
#reseller-preview-logo.has-logo-image,
#business-preview-logo-container.has-logo-image,
#marketplace-preview-logo.has-logo-image,
#navbar-preview-logo.has-logo-image,
#bubble-logo-preview.has-logo-image {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES - Classes helper
   ═══════════════════════════════════════════════════════════════ */

/* Classe utilitaire pour conteneur de logo neutre */
.logo-display,
.logo-transparent {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-display img,
.logo-transparent img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
    object-fit: contain !important;
    max-width: 100%;
    max-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   NOTE SUR LES FALLBACKS
   ═══════════════════════════════════════════════════════════════

   Le fallback (lettre dans un cercle) quand il n'y a pas de logo
   est géré directement dans le HTML/JS avec des styles inline.
   Ce fichier CSS ne s'applique qu'aux conteneurs avec la classe
   .has-logo-image, donc le fallback garde son border-radius: 50%
   défini dans le HTML.

   ═══════════════════════════════════════════════════════════════ */