/* 1. Global Font - Using a clean Sans-Serif similar to the App */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
/* Sidebar Background Image Styling */
.main-sidebar {
    /* The gradient overlay ensures the background image doesn't drown out the text */
    background: linear-gradient(rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.85)), 
                url('../img/a.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important; /* Keeps image still while scrolling */
    border-right: 1px solid #333;
}

/* Make sure the menu containers are transparent to show the image */
.sidebar, 
.sidebar-menu, 
.sidebar-menu > li, 
.treeview-menu {
    background: transparent !important;
}

/* Match the Sidebar font to the MtaaConnect Mobile App */
.sidebar-menu li a {
    font-family: 'Inter', 'Source Sans Pro', sans-serif;
    letter-spacing: 0.5px;
}

/* Active State: Gold Glow Effect */
.sidebar-menu > li.active > a {
    background: rgba(212, 175, 55, 0.1) !important; 
    color: #D4AF37 !important;
    border-left: 3px solid #D4AF37 !important;
    text-shadow: 0px 0px 5px rgba(212, 175, 55, 0.3);
}

/* Submenu Hover Effect */
.treeview-menu > li > a:hover {
    color: #D4AF37 !important;
    padding-left: 25px; /* Subtle slide effect on hover */
    transition: all 0.3s ease;
}