/* =============================================
   SIDEBAR COLLAPSED LOGO FIX
   Constrains the mini logo icon when sidebar 
   is toggled to icon-only mode (desktop + mobile)
   ============================================= */

/* === DESKTOP: sidebar-toggled class === */

/* The mini logo container when sidebar is collapsed */
.sidebar-toggled .brand-logo-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 66px;
    padding: 0;
    overflow: hidden;
}

/* The image inside the mini logo */
.sidebar-toggled .brand-logo-mini .dashboard-image {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    min-width: unset !important;
    object-fit: contain;
    border-radius: 50%;
}

/* Ensure the sidebar-brand wrapper is also properly sized */
.sidebar-toggled .sidebar-brand.brand-logo-mini {
    width: 70px !important;
    padding: 12px 14px !important;
}

/* === MOBILE: max-width 990px - sidebar collapses without sidebar-toggled class === */

@media (max-width: 990px) {
    /* Hide the full logo, show mini logo on mobile */
    .sidebar .brand-logo {
        display: none;
    }

    .sidebar .brand-logo-mini {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 66px;
        padding: 0;
        overflow: hidden;
    }

    .sidebar .brand-logo-mini .dashboard-image {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        min-width: unset !important;
        object-fit: contain;
        border-radius: 50%;
    }

    .sidebar .sidebar-brand.brand-logo-mini {
        width: 70px !important;
        padding: 12px 14px !important;
    }
}