/*
    Stili CSS per la gestione della ricerca e selezione degli utenti.
    Questi stili includono:
    - Aspetto degli elementi dei risultati della ricerca.
    - Aspetto degli utenti selezionati.
    - Stile del contenitore dei risultati della ricerca.
*/

/* Stile per ogni risultato della ricerca utenti */
.user-result {
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    padding: 8px 12px; /* Spaziatura interna */
    border: 1px solid #e3e6f0; /* Bordo grigio chiaro */
    margin: 2px 0; /* Margine verticale tra i risultati */
    border-radius: 4px; /* Angoli arrotondati */
    background-color: #fff; /* Sfondo bianco */
    transition: background-color 0.2s; /* Transizione per il cambio di colore di sfondo */
}

/* Stile per il risultato della ricerca quando il mouse passa sopra */
.user-result:hover {
    background-color: #f8f9fc; /* Cambia il colore di sfondo al passaggio del mouse */
    border-color: #5a5c69; /* Cambia il colore del bordo */
}

/* Stile per gli utenti selezionati */
.selected-user {
    display: inline-block; /* Mostra gli utenti selezionati in linea */
    background-color: #e7f1ff; /* Sfondo azzurro chiaro */
    border: 1px solid #2e59d9; /* Bordo blu */
    border-radius: 15px; /* Angoli arrotondati */
    padding: 5px 10px; /* Spaziatura interna */
    margin: 3px; /* Margine esterno */
    font-size: 14px; /* Dimensione del testo */
}

/* Stile per il pulsante di rimozione accanto agli utenti selezionati */
.selected-user button {
    background: none; /* Nessuno sfondo */
    border: none; /* Nessun bordo */
    color: #e74a3b; /* Colore rosso */
    font-weight: bold; /* Testo in grassetto */
    margin-left: 8px; /* Spaziatura a sinistra */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

/* Stile per il contenitore dei risultati della ricerca */
#search-results {
    max-height: 200px; /* Altezza massima con scorrimento */
    overflow-y: auto; /* Abilita lo scorrimento verticale */
    border: 1px solid #e3e6f0; /* Bordo grigio chiaro */
    border-radius: 4px; /* Angoli arrotondati */
    margin-top: 5px; /* Margine superiore */
}

/*
    Classe CSS per gli elementi non letti.
    Questa classe applica uno stile in grassetto al testo per evidenziare
    gli elementi che non sono ancora stati letti.
*/
.unread {
    font-weight: bold;
}