/* Navbar generale */
.brand{
    background-color: #10243C !important;
}

.navbar {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

}

/* Pulsante logout come cerchio con effetto 3D */
.logout-btn {
    background: linear-gradient(145deg, #2c2f33, #23272a);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow:
            5px 5px 10px #1a1c1f,
            -3px -3px 10px #3a3d42;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.logout-btn:hover,
.logout-btn:focus {
    background: linear-gradient(145deg, #23272a, #2c2f33);
    box-shadow:
            inset 3px 3px 6px #1a1c1f,
            inset -3px -3px 6px #3a3d42;
    color: #ff4b5c;
    outline: none;
}

/* Link navbar */
.nav-link {
    font-weight: 600;
    color: #e1e3e6;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color: #5fb26a; /* Verde WhatsApp */
    text-decoration: none;
}

/* Navbar brand */
.navbar-brand {
    color: #5fb26a;
    transition: color 0.3s ease;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #5fb26a;
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .logout-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}


/* Custom styles for the selector */
.custom-selector {
    background-color: #f8f1df; /* color.second - light background for readability */
    border: 2px solid #5fb26a; /* color.first - distinct border */
    color: #5fb26a; /* color.first - text color */
    border-radius: 8px; /* Softer corners */
    padding: 6px 24px; /* Increased padding for touch-friendly UX */
    font-size: 0.9rem; /* Slightly larger text for readability */
    transition: all 0.3s ease; /* Smooth transitions for interactive states */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.custom-selector:focus {
    border-color: #4a8e54; /* Darker shade of color.first for contrast */
    box-shadow: 0 0 0 0.3rem rgba(95, 178, 106, 0.3); /* Enhanced focus ring */
    outline: none; /* Remove default outline */
}
.custom-selector option {
    background-color: #f8f1df; /* color.second - consistent background */
    color: #5fb26a; /* color.first - readable text */
    font-size: 0.75rem; /* Consistent font size */
    padding: 4px; /* Better spacing for options */
}
/* Fallback for bold displayName in options */
.bold-option::before {
    content: attr(data-display-name);
    font-weight: 400; /* Attempt bold styling */
}
.selector-container {
    max-width: 300px;
    margin: 20px auto; /* Increased margin for better spacing */
    padding: 0 20px; /* Responsive padding */
}
/* Hover effect for the select element (works in some browsers) */
.custom-selector:hover {
    background-color: #e8e0c9; /* Slightly darker shade of color.second */
    cursor: pointer;
}
/* Message styling */
.alert-info {
    background-color: #d4f4d7; /* Light green tint for alerts */
    border-color: #5fb26a;
    color: #5fb26a;
    border-radius: 8px;
}
/* Settings icon styling */
#settingsIcon {
    font-size: 1.5rem;
    color: #5fb26a;
}

.display-name{
    font-weight: bolder;
}