/* --- 1. LOGO SWAP & TRANSITIONS (0.5s Delay for Full Logo) --- */

/* Remove transitions from the container to avoid visual bugs */
.brand-link {
    transition: none !important;
    position: relative !important;
    /* Set a consistent height for the container */
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    /* Consistent left-aligned padding */
    padding: 0.8125rem 0.5rem !important;
    justify-content: flex-start !important;
}

/* Ensure logo image has consistent styling in all states */
.brand-link .brand-image {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 33px !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    /* Ensure consistent filter/color - remove any filters */
    filter: none !important;
    opacity: 1 !important;
}

/* Brand text styling */
.brand-link .brand-text {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Add a pseudo-element for the small logo background */
body.sidebar-collapse .brand-link::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 33px !important;
    height: 33px !important;
    background-image: url('../images/new_logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: none !important;
    /* Ensure no color filter is applied */
    filter: none !important;
}

/* INSTANTLY REMOVE the small logo on hover */
.sidebar-collapse .main-sidebar:hover .brand-link::before,
.sidebar-collapse.sidebar-expanded-on-hover .brand-link::before {
    opacity: 0 !important;
    transition: opacity 0s ease 0s !important;
}

/* Default State: Sidebar is OPEN (full logo visible) */
.brand-link {
    background-image: none !important;
}

/* Collapsed State: Sidebar is COLLAPSED (small logo via pseudo-element) */
body.sidebar-collapse .brand-link {
    background-image: none !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    /* Center the small logo when collapsed */
    justify-content: center !important;
}

/* HIDE THE BRAND TEXT WHEN COLLAPSED */
body.sidebar-collapse .brand-link .brand-text {
    display: none !important;
}

/* Hide the original image element when COLLAPSED */
body.sidebar-collapse .brand-link .brand-image {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0s ease 0s, visibility 0s ease 0s !important;
}

/* HOVER State: Sidebar is COLLAPSED BUT HOVERED (Full Logo Appears) */

/* 1. Expand the container with SAME padding and alignment as normal state */
.sidebar-collapse .main-sidebar:hover .brand-link,
.sidebar-collapse.sidebar-expanded-on-hover .brand-link {
    background-image: none !important;
    width: auto !important;
    height: 50px !important;
    /* CRITICAL: Same padding and alignment as default open state */
    padding: 0.8125rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    /* Keep logo left-aligned, not centered */
    justify-content: flex-start !important;
}

/* 2. Show the original image element (Full Logo) with delayed transition */
.sidebar-collapse .main-sidebar:hover .brand-link .brand-image,
.sidebar-collapse.sidebar-expanded-on-hover .brand-link .brand-image {
    display: block !important;
    max-height: 33px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    /* Ensure no color changes on hover */
    filter: none !important;
    /* Delayed appearance */
    transition: opacity 0.3s ease 0.5s, visibility 0s ease 0.5s !important;
}

/* Show brand text on hover with same delay */
.sidebar-collapse .main-sidebar:hover .brand-link .brand-text,
.sidebar-collapse.sidebar-expanded-on-hover .brand-link .brand-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease 0.5s, visibility 0s ease 0.5s !important;
}


/* --- 2. EXISTING CUSTOM TWEAKS & GAP FIXES --- */

/* AGGRESSIVE GAP REMOVAL */
.main-sidebar .user-panel,
.sidebar .user-panel + .nav,
.sidebar > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure the main sidebar container has no top padding */
.main-sidebar .sidebar {
    padding-top: 0 !important;
}

/* Target the nav wrapper to control spacing directly below logo */
aside.main-sidebar nav.mt-2 {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
}

/* Force remove any spacing after brand-link */
.brand-link + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove spacing from unnecessary components */
.sidebar .user-panel {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sidebar .nav > li {
    margin-top: 0 !important;
}

.sidebar .nav-header {
    display: none !important;
}

.nav-icon {
    color: rgb(244, 245, 247) !important;
}

.main-footer .float-right {
    display: none !important;
}

.breadcrumb, .breadcrumbs {
    display: none !important;
}

#recent-actions {
    display: none !important;
}

/* Result count styling */
span.small.quiet {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2c3e50;
    background-color: #dff0d8;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    text-align: center;
}

/* Optional: add hover effect */
span.small.quiet:hover {
    background-color: #c1e2b3;
    color: #1f2d24;
}