/* 
   CUSTOM JAZZMIN SIDEBAR BEHAVIOR 
   Goal: Completely hide sidebar by default (no icons), open on hover.
*/

@media (min-width: 768px) {
    /* --- DEFAULT STATE (HIDDEN) --- */
    
    /* 
       Target specific AdminLTE classes to absolutely force margin to 0.
       This fixes the "white field" issue where sidebar-mini reserves space.
    */
    body.sidebar-mini.sidebar-collapse .content-wrapper,
    body.sidebar-mini.sidebar-collapse .main-footer,
    body.sidebar-mini.sidebar-collapse .main-header,
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-footer,
    body.sidebar-collapse .main-header,
    .content-wrapper, 
    .main-header, 
    .main-footer {
        margin-left: 0 !important;
    }

    /* Hide the sidebar completely */
    body.sidebar-mini.sidebar-collapse .main-sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar::before,
    body.sidebar-collapse .main-sidebar,
    body.sidebar-collapse .main-sidebar::before,
    .main-sidebar, 
    .main-sidebar::before {
        margin-left: -250px !important;
        width: 250px !important;
        box-shadow: none !important;
    }

    /* Hide the brand link */
    body.sidebar-mini.sidebar-collapse .brand-link,
    body.sidebar-collapse .brand-link,
    .brand-link {
        margin-left: -250px !important;
        opacity: 0;
        transition: margin-left 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* --- OPEN STATE (ACTIVE) --- */
    /* 
       We use a custom class 'sidebar-is-opening' toggled by JS.
       When this class is present, we restore the standard AdminLTE layout.
    */
    body.sidebar-is-opening .main-sidebar,
    body.sidebar-is-opening .main-sidebar::before {
        margin-left: 0 !important;
    }

    body.sidebar-is-opening .content-wrapper,
    body.sidebar-is-opening .main-header,
    body.sidebar-is-opening .main-footer {
        margin-left: 250px !important;
    }

    body.sidebar-is-opening .brand-link {
        margin-left: 0 !important;
        opacity: 1;
    }

    /* Transitions for smooth animation */
    .main-sidebar, 
    .content-wrapper, 
    .main-header, 
    .main-footer, 
    .brand-link {
        transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* --- CLEANUP --- */
    /* Hide the hamburger button always (we use logo) */
    .nav-item [data-widget="pushmenu"] {
        display: none !important;
    }

    /* Remove overlay shadow */
    .sidebar-overlay {
        display: none !important;
    }
}

/* Ensure no shadow on content wrapper */
.content-wrapper {
    box-shadow: none !important;
}

/* 
    --- HEADER MENU CUSTOMIZATION ---
    Separating items and improving hover/active states
*/

/* 1. Remove default margin to bridge the interaction gap */
.main-header .navbar-nav > .nav-item {
    margin: 0; /* Removed margin so hit areas touch */
}

/* 2. Style the link: increase padding to maintain visual spacing */
.main-header .navbar-nav > .nav-item > .nav-link {
    border-radius: 8px; /* Rounded corners */
    transition: color 0.1s ease-in-out; /* FASTER transition (0.1s) */
    padding: 8px 13px !important; /* Slightly increased padding (was 10px, previously 18px) */
    color: #555555 !important; /* Darker gray for inactive items */
}

/* 3. Hover State: Blue text, NO background */
/* APPLIES TO ALL ITEMS, including active ones */
.main-header .navbar-nav > .nav-item > .nav-link:hover,
.main-header .navbar-nav > .nav-item.active > .nav-link:hover,
.main-header .navbar-nav > .nav-item.menu-open > .nav-link:hover,
.main-header .navbar-nav > .nav-item.current-app > .nav-link:hover,
.main-header .navbar-nav > .nav-item.menu-active > .nav-link:hover {
    background-color: transparent !important;
    color: #007bff !important; /* Blue text */
}

/* 4. Active/Open State: Pure black text, NO background */
/* .active is for the current page, .menu-open is for open dropdowns */
/* .menu-active is added by our custom JS for parent items */
.main-header .navbar-nav > .nav-item.active > .nav-link,
.main-header .navbar-nav > .nav-item.menu-open > .nav-link,
.main-header .navbar-nav > .nav-item.current-app > .nav-link,
.main-header .navbar-nav > .nav-item.menu-active > .nav-link {
    background-color: transparent !important;
    color: #000000 !important; /* Black/Dark */
    font-weight: normal !important; /* Standard weight */
    text-shadow: none !important; /* No shadow */
    box-shadow: none;
}

/* Fix: Ensure dropdown arrow icon color inherits correctly */
.main-header .navbar-nav > .nav-item.active > .nav-link i,
.main-header .navbar-nav > .nav-item.menu-open > .nav-link i,
.main-header .navbar-nav > .nav-item.current-app > .nav-link i,
.main-header .navbar-nav > .nav-item.menu-active > .nav-link i {
    color: inherit !important;
}

/* 5. Ensure internal dropdown items are NOT affected */
.dropdown-menu .dropdown-item {
    border-radius: 0; 
    margin: 0;
}