/* ============================================
   Logo Display Styles - Precise Sizing & Visibility
   ============================================ */

/* Sidebar Logo - Admin Dashboard */
.dash-sidebar .main-logo a img,
.dash-sidebar .b-brand img,
.logo.logo-lg {
    max-width: 180px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
}

/* Auth Pages Logo - Login/Register */
.layouts-auth .navbar-brand img,
.auth-layout .logo,
.auth-page .logo {
    max-width: 200px !important;
    max-height: 70px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 20px !important;
    padding: 10px !important;
}

/* Override header-left constraint for custom pages */
.header-left {
    max-width: 280px !important;
    width: auto !important;
    min-width: 220px !important;
}

/* Landing Page Navbar Logo */
.navbar-brand img[src*="logo"],
.landing-page .navbar-brand img,
.header-left img[src*="logo"],
.custompage .navbar-brand img,
.header-left .navbar-brand img {
    max-width: 280px !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    min-width: 220px !important;
    object-fit: contain !important;
    transform: scale(1.5) !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3)) !important;
    transition: transform 0.3s ease !important;
    z-index: 10 !important;
    position: relative !important;
}

.navbar-brand img[src*="logo"]:hover,
.landing-page .navbar-brand img:hover,
.header-left img[src*="logo"]:hover,
.header-left .navbar-brand img:hover {
    transform: scale(1.6) !important;
}

/* Landing Page Footer Logo */
.footer img[src*="logo"],
section.footer img[src*="logo"] {
    max-width: 150px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s ease !important;
}

.footer img[src*="logo"]:hover {
    opacity: 1 !important;
}

/* PDF/Invoice Logo - Document Headers */
.invoice img[src*="logo"],
.payslip img[src*="logo"],
.bill img[src*="logo"],
.proposal img[src*="logo"],
.invoice-logo,
.bill-logo,
.proposal-logo,
img[class*="invoice-logo"],
img[class*="bill-logo"],
img[class*="proposal-logo"] {
    max-width: 170px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin-bottom: 15px !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* Settings Page Logo Previews */
.setting-logo-box img,
.logo-content img,
.setting-card img[src*="logo"] {
    max-width: 100% !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
}

/* Job Pages Logo */
.job-wrapper .navbar-brand img,
.job-content .navbar-brand img {
    max-width: 120px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    padding: 8px !important;
}

/* Landing Page Feature Logos */
.mobile-widget img[src*="logo"],
.features-section img[src*="logo"] {
    max-width: 100% !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 10px !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1)) !important;
}

/* Form Builder Logo */
.form-view .navbar-brand img,
.form-builder .logo {
    max-width: 150px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* POS Page Logo */
.pos-page .logo,
.pos-layout .logo {
    max-width: 140px !important;
    max-height: 55px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* General Logo Enhancements */
img[src*="logo"],
.custom-page-logo {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Override generic img styles for logos in custom pages */
.header-left img,
.header-left .navbar-brand img,
.custom-page-logo {
    width: auto !important;
    max-width: 280px !important;
}

/* Responsive Logo Sizing */
@media (max-width: 768px) {
    /* Mobile Sidebar */
    .dash-sidebar .main-logo a img {
        max-width: 140px !important;
        max-height: 50px !important;
        padding: 6px 8px !important;
    }
    
    /* Mobile Auth */
    .auth-layout .logo {
        max-width: 160px !important;
        max-height: 60px !important;
    }
    
    /* Mobile Landing - Keep zoomed for visibility */
    .navbar-brand img[src*="logo"],
    .header-left img[src*="logo"],
    .landing-page .navbar-brand img,
    .header-left .navbar-brand img {
        max-width: 200px !important;
        max-height: 80px !important;
        min-width: 180px !important;
        transform: scale(1.3) !important;
    }
    
    /* Mobile header-left container */
    .header-left {
        max-width: 220px !important;
        min-width: 180px !important;
    }
    
    /* Mobile Footer */
    .footer img[src*="logo"] {
        max-width: 120px !important;
        max-height: 40px !important;
    }
    
    /* Mobile PDF */
    .invoice img[src*="logo"],
    .payslip img[src*="logo"] {
        max-width: 140px !important;
        max-height: 60px !important;
    }
}

@media (max-width: 480px) {
    /* Extra Small Mobile */
    .dash-sidebar .main-logo a img {
        max-width: 120px !important;
        max-height: 45px !important;
    }
    
    .auth-layout .logo {
        max-width: 140px !important;
        max-height: 50px !important;
    }
    
    /* Extra Small Landing - Still zoomed for visibility */
    .navbar-brand img[src*="logo"],
    .header-left img[src*="logo"],
    .landing-page .navbar-brand img,
    .header-left .navbar-brand img {
        max-width: 180px !important;
        max-height: 70px !important;
        min-width: 160px !important;
        transform: scale(1.2) !important;
    }
    
    /* Extra Small header-left container */
    .header-left {
        max-width: 200px !important;
        min-width: 160px !important;
    }
}

/* High DPI / Retina Display Support */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    img[src*="logo"] {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* Dark Mode Logo Adjustments */
[data-theme="dark"] img[src*="logo"],
.dark-mode img[src*="logo"],
body.dark img[src*="logo"] {
    filter: brightness(1.05) drop-shadow(0 2px 4px rgba(255,255,255,0.1)) !important;
}

/* Logo Loading State */
img[src*="logo"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: logo-loading 1.5s ease-in-out infinite !important;
}

img[src*="logo"][src*="logo"]:not([src=""]) {
    animation: none !important;
    background: transparent !important;
}

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

/* Logo Hover Effects */
a:hover img[src*="logo"],
.brand:hover img[src*="logo"] {
    transform: scale(1.02) !important;
    transition: transform 0.3s ease !important;
}

/* Print Styles for PDFs */
@media print {
    img[src*="logo"] {
        max-width: 150px !important;
        max-height: 70px !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}