/* ===================================
   AdminLTE Sidebar White Style Override
   =================================== */

/* Sidebar Background - Change to White */
.main-sidebar {
    background-color: #ffffff !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08) !important;
}

/* Sidebar Wrapper */
.sidebar {
    background-color: #ffffff !important;
}

/* Brand Logo Area */
.brand-link {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 20px 15px !important;
}

    .brand-link .brand-image {
        max-height: 40px !important;
    }

    .brand-link .brand-text {
        color: #2c7a7b !important;
        font-weight: 600 !important;
    }

/* Navigation Menu Items */
.nav-sidebar .nav-item {
    /*margin: 2px 10px !important;*/
}

.nav-sidebar .nav-link {
    color: #4a5568 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

    /* Menu Icons - Circular with Teal Background */
    .nav-sidebar .nav-link .nav-icon {
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #e6f7f7 !important;
        color: #2c7a7b !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        margin-right: 10px !important;
        transition: all 0.2s ease !important;
    }

    /* Hover State */
    .nav-sidebar .nav-link:hover {
        background-color: #f7fafc !important;
        color: #2c7a7b !important;
        border-left-color: #e8e8e8 !important;
    }

        .nav-sidebar .nav-link:hover .nav-icon {
            background: #2c7a7b !important;
            color: white !important;
        }

    /* Active State */
    .nav-sidebar .nav-link.active {
        background-color: #e6f7f7 !important;
        color: #2c7a7b !important;
        border-left-color: #2c7a7b !important;
        font-weight: 600 !important;
    }

        .nav-sidebar .nav-link.active .nav-icon {
            background: #2c7a7b !important;
            color: white !important;
        }

    /* Submenu Arrow */
    .nav-sidebar .nav-link .right {
        color: #a0aec0 !important;
        transition: transform 0.3s ease !important;
        margin-top: 10px !important;
    }

.nav-sidebar .menu-open > .nav-link .right {
    transform: rotate(-90deg) !important;
    margin-top: 10px !important;
}

/* Submenu Container */
.nav-sidebar .nav-treeview {
    background-color: #f7fafc !important;
    border-left: 2px solid #e8e8e8 !important;
    margin-left: 15px !important;
    padding: 5px 0 !important;
    border-radius: 0 0 8px 8px !important;
}

    /* Submenu Items */
    .nav-sidebar .nav-treeview .nav-link {
        color: #718096 !important;
        padding: 10px 15px 10px 45px !important;
        font-size: 0.9rem !important;
        position: relative !important;
        border-left: none !important;
    }

        /* Submenu Bullet Points */
        .nav-sidebar .nav-treeview .nav-link::before {
            content: '' !important;
            position: absolute !important;
            left: 25px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 6px !important;
            height: 6px !important;
            background: #cbd5e0 !important;
            border-radius: 50% !important;
            transition: all 0.2s ease !important;
        }

    /* Hide submenu icons since we use bullets */
    .nav-sidebar .nav-treeview .nav-icon {
        display: none !important;
    }

    /* Submenu Hover */
    .nav-sidebar .nav-treeview .nav-link:hover {
        background-color: #edf2f7 !important;
        color: #2c7a7b !important;
    }

        .nav-sidebar .nav-treeview .nav-link:hover::before {
            background: #2c7a7b !important;
            width: 8px !important;
            height: 8px !important;
        }

    /* Submenu Active */
    .nav-sidebar .nav-treeview .nav-link.active {
        background-color: transparent !important;
        color: #2c7a7b !important;
        font-weight: 600 !important;
        border-left: none !important;
    }

        .nav-sidebar .nav-treeview .nav-link.active::before {
            background: #2c7a7b !important;
            width: 8px !important;
            height: 8px !important;
        }

/* Menu Open State */
.nav-sidebar .menu-open {
    background-color: transparent !important;
}

/* User Panel (if you have one) */
.user-panel {
    border-bottom: 1px solid #e8e8e8 !important;
}

    .user-panel .info a {
        color: #2c7a7b !important;
    }

/* Sidebar Search (if you have one) */
.sidebar-search-results .list-group-item {
    background-color: #f7fafc !important;
    color: #4a5568 !important;
}

/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.sidebar::-webkit-scrollbar-track {
    background: #f7fafc !important;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e0 !important;
    border-radius: 3px !important;
}

    .sidebar::-webkit-scrollbar-thumb:hover {
        background: #a0aec0 !important;
    }

/* Remove default AdminLTE hover effects */
.nav-sidebar > .nav-item > .nav-link:hover {
    background-color: #f7fafc !important;
}

/* Special styling for Dashboard (first item) */
.nav-sidebar .nav-item:first-child .nav-link {
    background-color: #e6f7f7 !important;
    color: #2c7a7b !important;
    border-left-color: #2c7a7b !important;
}

    .nav-sidebar .nav-item:first-child .nav-link .nav-icon {
        background: #2c7a7b !important;
        color: white !important;
    }

/* Text in menu items */
.nav-sidebar .nav-link p {
    display: inline-block !important;
    margin: 0 !important;
}

/* Ensure smooth transitions */
.nav-sidebar .nav-item,
.nav-sidebar .nav-link,
.nav-sidebar .nav-icon,
.nav-treeview {
    transition: all 0.2s ease !important;
}

    /* Menu item text spacing */
    .nav-sidebar .nav-link > p {
        margin-left: 0 !important;
    }

/* Remove badge if any */
.nav-sidebar .badge {
    background: #2c7a7b !important;
    color: white !important;
}

/* Sidebar Dark Primary to White Override */
.sidebar-dark-primary {
    background-color: #ffffff !important;
}

    .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
    .sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link {
        background-color: #e6f7f7 !important;
        color: #2c7a7b !important;
    }

/* Additional polish */
.nav-sidebar .nav-item > .nav-link {
    box-shadow: none !important;
}

/* Ensure parent menu doesn't get active state when submenu is active */
.nav-sidebar .menu-open > .nav-link:not(.active) {
    background-color: transparent !important;
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
    .main-sidebar {
        box-shadow: none !important;
    }
}

/* Animation for menu opening */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-treeview {
    animation: slideDown 0.3s ease !important;
}

/* Prevent text selection on menu items */
.nav-sidebar .nav-link {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

    /* Focus states for accessibility */
    .nav-sidebar .nav-link:focus {
        outline: 2px solid #2c7a7b !important;
        outline-offset: -2px !important;
    }

/* Logo styling if using image */
.sidebar .brand-link .brand-image {
    opacity: 1 !important;
}

/* Fix for collapsed sidebar (if using sidebar toggle) */
.sidebar-collapse .nav-sidebar .nav-link p,
.sidebar-collapse .nav-sidebar .nav-link .right {
    display: none !important;
}

.sidebar-collapse .nav-sidebar .nav-icon {
    margin-right: 0 !important;
}