/**
 * GESTLOC - Gestion responsive des logos
 * Version optimisée pour desktop, tablet et mobile
 */

/* ========================================
   VARIABLES CSS - Couleurs officielles GESTLOC
   ======================================== */
:root {
    --gestloc-blue: #1A3B5D;
    --gestloc-green: #7BC043;
    --gestloc-white: #ffffff;
    --gestloc-gray: #f8f9fa;
}

/* ========================================
   LOGO PRINCIPAL - Header Desktop
   ======================================== */
.logo-header {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-header:hover {
    transform: scale(1.05);
}

/* Version mobile du logo (icône seule) */
.logo-header-mobile {
    display: none;
    height: 40px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
}

/* ========================================
   LOGO FOOTER
   ======================================== */
.logo-footer {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.9;
}

.logo-footer:hover {
    opacity: 1;
}

/* ========================================
   LOGO SIDEBAR (Dashboard)
   ======================================== */
.logo-sidebar-expanded {
    height: 44px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.logo-sidebar-collapsed {
    display: none;
    height: 36px;
    width: 36px;
    object-fit: contain;
}

/* Sidebar réduite */
.sidebar.collapsed .logo-sidebar-expanded {
    display: none;
}

.sidebar.collapsed .logo-sidebar-collapsed {
    display: block;
}

/* ========================================
   LOGO AUTH PAGES (Login, Register)
   ======================================== */
.logo-auth {
    height: 60px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    margin: 0 auto 30px;
    display: block;
}

/* ========================================
   FAVICON & PETITS LOGOS
   ======================================== */
.logo-favicon {
    height: 80px;
    width: 80px;
    object-fit: contain;
}

/* ========================================
   SUPPORT WEBP avec fallback PNG
   ======================================== */
.logo-webp {
    /* Les navigateurs modernes chargeront la version WebP */
    content: url('/public/assets/img/logo.webp');
}

/* Fallback pour navigateurs sans support WebP */
.no-webp .logo-webp {
    content: url('/public/assets/img/logo.png');
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablettes (768px et moins) */
@media (max-width: 768px) {
    .logo-header {
        height: 42px;
        max-width: 160px;
    }

    .logo-auth {
        height: 50px;
        max-width: 200px;
    }

    .logo-footer {
        height: 36px;
        max-width: 150px;
    }
}

/* Mobiles (576px et moins) */
@media (max-width: 576px) {
    /* Afficher la version mobile (icône) du logo */
    .logo-header {
        display: none;
    }

    .logo-header-mobile {
        display: block;
    }

    .logo-auth {
        height: 45px;
        max-width: 160px;
    }

    .logo-footer {
        height: 32px;
        max-width: 120px;
    }
}

/* Très petits écrans (400px et moins) */
@media (max-width: 400px) {
    .logo-header-mobile {
        height: 36px;
    }

    .logo-auth {
        height: 40px;
    }
}

/* ========================================
   DARK MODE Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    .logo-header,
    .logo-footer,
    .logo-sidebar-expanded,
    .logo-sidebar-collapsed,
    .logo-auth {
        /* Utiliser le logo blanc pour le mode sombre */
        filter: brightness(0) invert(1);
    }

    /* Alternative: remplacer directement l'image */
    .logo-dark-mode {
        content: url('/public/assets/img/logo-white.png');
    }
}

/* Force dark mode via classe CSS */
.dark-theme .logo-header,
.dark-theme .logo-footer,
.dark-theme .logo-sidebar-expanded,
.dark-theme .logo-sidebar-collapsed,
.dark-theme .logo-auth {
    filter: brightness(0) invert(1);
}

/* ========================================
   LOADING & PERFORMANCE
   ======================================== */

/* Lazy loading placeholder */
.logo-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Désactiver le drag des logos */
.logo-header,
.logo-header-mobile,
.logo-footer,
.logo-sidebar-expanded,
.logo-sidebar-collapsed,
.logo-auth,
.logo-favicon {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto; /* Garder les clics pour les liens */
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .logo-header,
    .logo-footer {
        height: 30px;
        filter: grayscale(100%);
    }

    .logo-header-mobile {
        display: none;
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

/* Focus visible pour navigation au clavier */
a:focus .logo-header,
a:focus .logo-footer,
a:focus .logo-auth {
    outline: 2px solid var(--gestloc-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .logo-header,
    .logo-footer,
    .logo-auth {
        transition: none;
    }

    .logo-header:hover {
        transform: none;
    }
}