/* =============================================================
   channel-status.css — Il blocco di stato di un canale di comunicazione

   Scope: la scheda «Collegamento» del dialog di un canale (oggi WhatsApp,
   domani email e Telegram, che riusano lo stesso oggetto ChannelStatus).

   Il modello che questo CSS serve — ed è la parte che vale anche per le
   schermate che verranno dopo, non solo per questa:

     un blocco di stato       una frase sola, con un pallino che ne dice il tono
     un avviso per volta      quello dello stato corrente, legato alla sua azione
     una sola azione principale   il percorso di adesso, non l'elenco del possibile
     il resto dietro un dettaglio chiuso

   Prima c'erano due avvisi arancioni impilati che facevano mestieri diversi
   con lo stesso colore, e l'elemento visivamente più forte era un rimedio
   mentre il percorso principale era grigio in fondo: la gerarchia diceva
   l'opposto di quello che l'operatore doveva fare.

   Colori: tutti da var(--mud-palette-*), così il blocco segue il tema
   dell'applicazione invece di portarsi dietro una tavolozza propria.
   ============================================================= */


/* ══════════════════════════════════════════════
   BLOCCO DI STATO — pallino, titolo, motivo, data di verifica
   ══════════════════════════════════════════════ */

.chst-block {
    display:     flex;
    gap:         13px;
    align-items: flex-start;
}

/* Il pallino porta il tono dello stato. È l'unico elemento colorato del
   blocco: il titolo resta del colore del testo, perché una frase interamente
   verde o interamente arancione si legge come un allarme prima che come
   un'informazione. */
.chst-dot {
    width:         11px;
    height:        11px;
    border-radius: 50%;
    flex:          0 0 auto;
    margin-top:    7px;
}

.chst-dot--ok   { background: var(--mud-palette-success); }
.chst-dot--warn { background: var(--mud-palette-warning); }
.chst-dot--info { background: var(--mud-palette-info); }
.chst-dot--mute { background: var(--mud-palette-text-disabled); }

.chst-headline {
    margin:      0;
    font-size:   1.0rem;
    font-weight: 500;
    line-height: 1.35;
    color:       var(--mud-palette-text-primary);
}

/* La larghezza massima non è vezzo tipografico: sono le righe che l'operatore
   legge una volta sola, e oltre le ~55 battute il rientro a capo comincia a
   costargli attenzione. */
.chst-reason {
    margin:    5px 0 0;
    max-width: 56ch;
    color:     var(--mud-palette-text-secondary);
}

/* «Verificato 3 minuti fa» accanto allo stato: è la differenza fra un
   semaforo e un'affermazione. */
.chst-stamp {
    margin:    7px 0 0;
    font-size: 0.78rem;
    color:     var(--mud-palette-text-disabled);
}


/* ══════════════════════════════════════════════
   AVVISO — ne compare uno solo, e solo quando ha qualcosa da aggiungere
   che il blocco di stato non dice già
   ══════════════════════════════════════════════ */

/* Colore, sfondo e bordo dell'avviso **non stanno qui**: stanno in
   `components/alerts.css`, che li definisce una volta per i `MudAlert` del
   prodotto e per i riquadri nostri. Il markup di ChannelStatusBlock aggiunge le
   classi `upf-alert upf-alert--warning`, e qui resta solo la spaziatura che è
   specifica di questo blocco.

   Prima qui c'era una definizione propria — `background: var(--mud-palette-warning-lighten)`
   con `color: var(--mud-palette-warning-darken)`, misurata **1,23:1** — ed è
   esattamente il difetto che una seconda definizione produce: `*-lighten` e
   `*-darken` non sono «tinta pallida» e «testo scuro», sono lo stesso ambra un
   gradino sopra e un gradino sotto. */
.chst-notice {
    margin: 18px 0 0;
}

/* Solo la misura: il colore lo dà `.upf-alert-icon` in alerts.css. */
.chst-notice-icon {
    font-size:  1.1rem;
    margin-top: -1px;
}


/* ══════════════════════════════════════════════
   CONSENSO — un blocco unico, legato alla sola azione che governa

   Prima erano due avvisi arancioni impilati e una spunta che diceva «accetto
   le condizioni sopra»: sopra ce n'erano due, e riguardavano due pulsanti
   diversi. Qui le condizioni sono dentro il riquadro che la spunta approva.
   ══════════════════════════════════════════════ */

.chst-consent {
    border:        1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding:       14px 15px;
    margin:        18px 0 0;
    background:    var(--mud-palette-background-gray);
}

.chst-consent-title {
    margin:      0 0 6px;
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--mud-palette-text-primary);
}

.chst-consent ul {
    margin:       0;
    padding-left: 18px;
    color:        var(--mud-palette-text-secondary);
    font-size:    0.875rem;
}

.chst-consent li { margin: 3px 0; }


/* ══════════════════════════════════════════════
   AZIONI — una principale, e quello che sta intorno non compete con lei
   ══════════════════════════════════════════════ */

.chst-actions {
    margin:      20px 0 0;
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

/* La riga accanto al pulsante: dice la conseguenza che il nome del pulsante
   non può contenere. Sta accanto e non sotto, per restare legata all'azione. */
.chst-hint {
    font-size: 0.78rem;
    color:     var(--mud-palette-text-disabled);
    max-width: 38ch;
}

/* La via di fuga verso l'inserimento manuale: presente e senza enfasi.
   È preziosa — copre i casi in cui il collegamento guidato non riesce — ma
   proposta con lo stesso peso del percorso principale confonderebbe. */
.chst-escape {
    margin:    16px 0 0;
    font-size: 0.82rem;
}

.chst-escape a {
    color:           var(--mud-palette-text-disabled);
    text-decoration: underline;
    cursor:          pointer;
}

.chst-escape a:hover { color: var(--mud-palette-text-secondary); }


/* ══════════════════════════════════════════════
   DETTAGLI TECNICI — chiusi, e con l'aria di non essere per il titolare
   ══════════════════════════════════════════════ */

.chst-details {
    margin-top:  20px;
    padding-top: 6px;
    border-top:  1px solid var(--mud-palette-lines-default);
}

.chst-technical {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:   0.75rem;
    color:       var(--mud-palette-text-secondary);
    word-break:  break-all;
    white-space: pre-wrap;
}

.chst-blockers {
    margin:       8px 0 0;
    padding-left: 18px;
    font-size:    0.75rem;
    color:        var(--mud-palette-text-secondary);
}


/* ══════════════════════════════════════════════
   PASSI DA FARE FUORI DAL PRODOTTO

   Il riquadro con le istruzioni che il centro esegue altrove — creare il bot
   con BotFather, oggi. Sta **prima** del campo che ne raccoglie il risultato,
   e non dentro un avviso: un avviso dice «attenzione», qui invece c'è da fare.
   ══════════════════════════════════════════════ */

.chst-steps {
    border:        1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding:       14px 15px;
    margin:        18px 0 0;
    background:    var(--mud-palette-background-gray);
}

.chst-steps-title {
    margin:      0 0 8px;
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--mud-palette-text-primary);
}

.chst-steps ol {
    margin:       0;
    padding-left: 20px;
    color:        var(--mud-palette-text-secondary);
    font-size:    0.875rem;
}

.chst-steps li { margin: 4px 0; }

.chst-steps code {
    background:    var(--mud-palette-lines-default);
    padding:       1px 5px;
    border-radius: 3px;
    font-family:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:     0.8rem;
}


/* ══════════════════════════════════════════════
   RIGA DEL BOT — foto, nome, e l'azione che la importa
   ══════════════════════════════════════════════ */

.chst-account-row {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin:      20px 0 0;
}

.chst-account-name {
    font-size: 0.95rem;
    color:     var(--mud-palette-text-primary);
}

.chst-account-name small {
    display: block;
    color:   var(--mud-palette-text-disabled);
    font-size: 0.78rem;
}


/* ══════════════════════════════════════════════
   SCELTA DEL CANALE — il popup che precede il dialog

   I canali già configurati restano nell'elenco, spenti, con il motivo al posto
   della descrizione: toglierli manderebbe l'operatore a cercare un canale che
   c'è già senza capire dove sia finito.
   ══════════════════════════════════════════════ */

.chpk-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* Nessuna voce selezionabile: la frase che sostituisce il silenzio davanti a un
   elenco tutto spento. Vedi DialogTenantPickProviderType.razor. */
.chpk-empty {
    margin:    0 0 14px;
    font-size: 0.85rem;
    color:     var(--mud-palette-text-secondary);
}

.chpk-item {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 16px;
    border:        1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor:        pointer;
    transition:    border-color .12s ease, background-color .12s ease;
}

.chpk-item:hover {
    border-color: var(--mud-palette-primary);
    background:   var(--mud-palette-background-gray);
}

/* Spento, non nascosto: si vede che il canale esiste, e perché non si può aggiungere. */
.chpk-item--disabled {
    cursor:     default;
    opacity:    .55;
    background: var(--mud-palette-background-gray);
}

.chpk-item--disabled:hover {
    border-color: var(--mud-palette-lines-default);
}

.chpk-icon {
    font-size: 1.6rem;
    flex:      0 0 auto;
    width:     28px;
    text-align: center;
}

.chpk-text {
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

.chpk-name {
    font-size:   0.95rem;
    font-weight: 500;
    color:       var(--mud-palette-text-primary);
}

.chpk-desc {
    font-size: 0.8rem;
    color:     var(--mud-palette-text-secondary);
}

.chpk-chevron {
    margin-left: auto;
    color:       var(--mud-palette-text-disabled);
    font-size:   1.2rem;
}


/* ══════════════════════════════════════════════
   IMPOSTAZIONI — i pochi dati che si salvano davvero
   ══════════════════════════════════════════════ */

.chst-field { margin: 0 0 16px; }

.chst-field-label {
    display:       block;
    font-size:     0.72rem;
    color:         var(--mud-palette-text-disabled);
    margin-bottom: 3px;
}

.chst-field-value {
    font-size:      0.95rem;
    color:          var(--mud-palette-text-primary);
    border-bottom:  1px solid var(--mud-palette-lines-default);
    padding-bottom: 6px;
}

/* La conseguenza sotto l'interruttore: «Attivo» da solo era il terzo «acceso»
   di questa schermata, e nessuno dei tre diceva cosa succede spegnendolo. */
.chst-switch-hint {
    display:    block;
    font-size:  0.78rem;
    color:      var(--mud-palette-text-disabled);
    margin-top: -2px;
}