/* Sidebar with Maroon Theme */
div#sidebar {
    width: 250px;
    height: 95.3%;
    position: absolute;
    background: #f8f1f3; /* Very light maroon tint */
    border-right: 1px solid #d4a8b5; /* Light maroon border */
    transition: all 0.3s ease;
}

#sidebar .sidebar-item {
    position: relative;
    height: 50px;
    padding: 10px;
    display: inline-flex;
    font-size: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(128, 0, 32, 0.15); /* Maroon with transparency */
    width: 100%;
    color: #5b0018; /* Dark maroon text */
    font-weight: 600;
    transition: all 0.3s ease;
}

#sidebar .sidebar-item:hover, 
#sidebar .sidebar-item.active {
    background: rgba(128, 0, 32, 0.08); /* Very light maroon */
    color: #800020 !important; /* Rich maroon */
    border-left: 3px solid #800020;
    text-decoration: none;
}

#sidebar .sidebar-item.active {
    background: rgba(128, 0, 32, 0.12); /* Slightly stronger for active */
}

#sidebar .sidebar-item .sidebar-icon {
    width: 11%;
    color: #800020; /* Maroon icon color */
    margin-right: 10px;
    font-size: 1.1em;
    transition: all 0.3s ease;

}

#sidebar .sidebar-item:hover .sidebar-icon {
    transform: scale(1.1);
}

/* Main content area adjustment */
div#main, .admin {
    margin-top: 10px;
    margin-left: 250px;
    padding: 20px;
    transition: margin-left 0.3s;
}

.admin {
    width: 82% !important;
}



/* Change the header background to maroon */
#header, .navbar, .topbar {
    background-color: maroon !important;
    color: white !important;
}

/* Ensure text inside the header is visible */
#header a, .navbar a, .topbar a {
    color: white !important;
}

/* Change header hover effect */
#header a:hover, .navbar a:hover, .topbar a:hover {
    color: #f8d7da !important; /* Light maroon hover effect */
}

.container-fluid {
    width: 100%; /* Make sure navbar takes full width */
}