/**
 * Logo Size Adjustments
 * Controls logo sizing across all pages and screen sizes
 */

/* Default logo size for desktop */
.logo img {
    height: 34px;
    width: auto;
    max-width: 10% !important;
    object-fit: contain;
    transition: all 0.3s ease;
    margin-top: 6px;
}

/* Position the header elements properly */
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    direction: ltr; /* Force LTR direction for header */
}

/* Adjust header-left to be on the left side */
.header-left {
    display: flex;
    align-items: center;
    gap: 0; /* Remove gap between logo and sidebar icon */
    margin-right: auto; /* Push to left */
}

/* Adjust header-right to be on the right side */
.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto; /* Push to right */
}

/* Position the sidebar toggle before the logo */
.logo {
    order: 2; /* Make logo appear second */
}

.sidebar-toggle {
    order: 1; /* Make sidebar toggle appear first */
    margin-right: 5px; /* Add a small margin between toggle and logo */
    margin-left: 0; /* Remove left margin */
}

/* Login and register page logos - center aligned for these pages */
.login-logo img, .register-logo img {
    height: 60px;
    width: auto;
    max-height: 60px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Medium screens */
@media (max-width: 992px) {
    .logo img {
        height: 36px;
        width: auto;
    }
    
    .login-logo img, .register-logo img {
        height: 65px;
        max-height: 65px;
    }
}

/* Tablet screens */
@media (max-width: 768px) {
    .logo img {
        height: 32px;
        max-height: 32px;
        width: auto;
    }
    
    .login-logo img, .register-logo img {
        height: 60px;
        max-height: 60px;
    }
    
    /* Ensure mobile header maintains correct layout */
    .header {
        flex-direction: row;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .logo img {
        height: 28px;
        max-height: 28px;
        width: auto;
    }
    
    .login-logo img, .register-logo img {
        height: 50px;
        max-height: 50px;
    }
}

/* Very small mobile screens */
@media (max-width: 375px) {
    .logo img {
        height: 26px;
        max-height: 26px;
        width: auto;
    }
    
    .login-logo img, .register-logo img {
        height: 45px;
        max-height: 45px;
    }
}