.mud-nav-link:hover {
    background-color: #f4f4f4; /* Subtle hover background */
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}
/* Drawer styling */
.mud-drawer {
    background-color: #f9f9f9; /* Light background */
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Group header styling */
.mud-nav-group-header {
    font-weight: bold;
    color: #007bff; /* Accent color for group headers */
}
/* Align logo container and title properly in the AppBar */
.logo-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Adjust space between logos */
}

/* Ensure logos scale appropriately */
.appbar-logo {
    height: 32px; /* Smaller height for better fit */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; 
    display: inline-block;
}


.app-title {
    color: white;
    font-size: 1.2rem; 
    font-weight: bold;
    margin-left: 10px; 
}
.sms-controls-section {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 30px;
}

.sf-grid-header {
    background-color: #4CAF50;
    color: #ffffff;
    font-weight: bold;
}

@media (max-width: 768px) {
    .logo-container {
        gap: 3px;
    }

    .appbar-logo {
        height: 24px; 
    }

    .MudAppBar {
        flex-wrap: wrap; 
    }

    .app-title {
        font-size: 1rem;
    }
}