/* ==================== LOGO STYLING - PROFESSIONAL ENHANCEMENTS ==================== */
/* Inspired by modern IT companies: Vercel, Stripe, Linear, Atlassian, and Shopify */

/* Main Navbar Logo - Optimized for Better Visibility */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between logo and text */
    padding: 0.75rem 0;
    transition: var(--transition);
}

/* Enhanced Logo Size - Better proportion to header height */
.navbar-brand img {
    height: 60px; /* Increased from 45px for better visibility */
    width: auto;
    max-width: 180px; /* Prevent logo from being too wide */
    object-fit: contain;
    transition: var(--transition);
    filter: brightness(1);
}

/* Smooth hover effect */
.navbar-brand:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* Brand name styling - displayed next to logo */
.navbar-brand .brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dark);
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: var(--transition);
}

.navbar-brand:hover .brand-name {
    transform: translateX(2px);
}

/* Enhanced navbar with more padding for logo breathing room */
.navbar {
    padding: 0.75rem 0 !important; /* Override Bootstrap default */
    min-height: 80px; /* Ensure consistent header height */
    display: flex;
    align-items: center;
}

/* When navbar is scrolled, maintain good logo size */
.navbar.scrolled {
    padding: 0.5rem 0 !important;
    min-height: 70px;
}

.navbar.scrolled .navbar-brand img {
    height: 50px; /* Slightly smaller when scrolled */
}

/* Footer Logo */
.footer .logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer .logo-container img {
    height: 50px; /* Increased from 40px */
    width: auto;
    max-width: 160px;
    object-fit: contain;
    /* Apply filter to make logo visible on dark background */
    filter: brightness(0) invert(1) brightness(2);
    transition: var(--transition);
}

.footer .logo-container:hover img {
    transform: scale(1.05);
}

.footer .logo-container h5 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

/* Admin Panel Logo */
.admin-navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-navbar-brand img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    transition: var(--transition);
}

.admin-navbar-brand:hover img {
    transform: scale(1.05);
}

/* Admin Login Logo */
.login-header img {
    height: 70px; /* Increased from 60px */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: var(--transition);
}

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

/* Logo Loading State */
.logo-loading {
    display: inline-block;
    width: 140px;
    height: 60px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

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

/* Responsive Logo Adjustments */
@media (max-width: 1199px) {
    /* Large tablets and small desktops */
    .navbar-brand img {
        height: 55px;
        max-width: 170px;
    }
    
    .navbar {
        min-height: 75px;
    }
}

@media (max-width: 991px) {
    /* Tablets */
    .navbar-brand img {
        height: 50px;
        max-width: 160px;
    }
    
    .navbar-brand .brand-name {
        font-size: 1.2rem;
    }
    
    .navbar {
        min-height: 70px;
        padding: 0.5rem 0 !important;
    }
    
    .footer .logo-container img {
        height: 45px;
        max-width: 150px;
    }
}

@media (max-width: 767px) {
    /* Mobile landscape and small tablets */
    .navbar-brand img {
        height: 45px;
        max-width: 140px;
    }
    
    .navbar-brand .brand-name {
        font-size: 1.1rem;
    }
    
    .navbar {
        min-height: 65px;
    }
    
    .footer .logo-container img {
        height: 40px;
        max-width: 130px;
    }
    
    .footer .logo-container h5 {
        font-size: 1.25rem;
    }
}

@media (max-width: 575px) {
    /* Mobile portrait */
    .navbar-brand img {
        height: 40px;
        max-width: 120px;
    }
    
    .navbar-brand .brand-name {
        font-size: 1rem;
    }
    
    .navbar {
        min-height: 60px;
        padding: 0.4rem 0 !important;
    }
    
    .login-header img {
        height: 55px;
        max-width: 160px;
    }
    
    .admin-navbar-brand img {
        height: 35px;
        max-width: 120px;
    }
}

/* Extra small devices */
@media (max-width: 374px) {
    .navbar-brand img {
        height: 36px;
        max-width: 110px;
    }
    
    .navbar-brand .brand-name {
        font-size: 0.9rem;
    }
    
    .navbar {
        min-height: 55px;
    }
}

/* Optional: Hide brand name on very small screens if logo is clear enough */
/* Uncomment this section if you want to hide text on mobile */
/*
@media (max-width: 480px) {
    .navbar-brand .brand-name {
        display: none;
    }
}
*/

/* Logo positioning improvements - Align with navigation items */
.navbar .container {
    display: flex;
    align-items: center;
}

.navbar-brand {
    margin-right: 2rem; /* More spacing from navigation */
}

/* Ensure logo has proper contrast on different backgrounds */
@media (prefers-color-scheme: dark) {
    .navbar-brand img {
        filter: brightness(1.1);
    }
}

/* High DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar-brand img,
    .footer .logo-container img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .navbar-brand img {
        height: 50px !important;
        max-width: 150px !important;
    }
}