/* Quello che resta del foglio del modello Blazor, piu' il poco che Tabler non copre.

   Sono spariti da qui: il font imposto su html e body, che scavalcava la scala tipografica di
   Tabler; il colore dei link e la riscrittura di .btn-primary, che duplicavano a mano quello che
   le variabili del tema fanno gia' e che nel tema scuro davano contrasti sbagliati; l'anello di
   fuoco su .btn e .form-control, che disegnava un bordo bianco fisso e su fondo scuro spariva;
   e .content, che apparteneva al layout a barra laterale ora sostituito. */

/* FocusOnNavigate sposta il fuoco sul titolo dopo ogni navigazione: e' un fuoco dato via
   programma e non dalla tastiera, quindi il contorno direbbe all'utente una cosa che non e'
   successa. */
/* Il colore dell'interfaccia.

   La demo di Tabler cambia il colore con un attributo sul tag html, ma quell'attributo nel CSS
   pubblicato della 1.4.0 non esiste: sta solo nel repository non ancora rilasciato. Verificato
   cercandolo nel foglio vendorizzato, zero occorrenze, ed e' la stessa trappola di
   data-bs-navbar-position. Il colore si mette quindi sovrascrivendo le due variabili da cui
   discende tutto il resto.

   Basta la coppia perche' Tabler deriva le sue sfumature con color-mix a partire da --tblr-primary:
   il chiaro degli sfondi, lo scuro degli stati premuti e i bordi seguono da soli. La variante -rgb
   serve separata perche' Bootstrap la usa dove compone un colore con trasparenza.

   Il valore e' il rosa di Tabler, la stessa cifra che la demo chiama "pink". app.css e' caricato
   dopo tabler.min.css, quindi a parita' di specificita' vince questo. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --tblr-primary: #d6336c;
    --tblr-primary-rgb: 214, 51, 108;
}

h1:focus,
h2:focus {
    outline: none;
}

/* Testo che arriva dal modello o dal cliente: gli a capo sono contenuto, non formattazione. */
.text-preserve {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Convalida dei moduli, nei colori del tema invece che in rosso e verde fissi. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--tblr-success);
}

.invalid {
    outline: 1px solid var(--tblr-danger);
}

.validation-message {
    color: var(--tblr-danger);
}

.blazor-error-boundary {
    background: var(--tblr-danger);
    padding: 1rem;
    color: #fff;
    border-radius: var(--tblr-border-radius);
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore.";
}

/* L'area dei messaggi in /chat.

   min-height piu' alta della finestra che c'era prima, e scorrimento proprio invece di far
   crescere la pagina: cosi' il campo di scrittura resta dov'e' e non scende a ogni turno.
   Su schermi bassi max-height finisce sotto min-height, e in quel caso vince min-height: la
   scatola resta di 32rem e a scorrere e' comunque il contenuto, che e' il comportamento voluto
   in entrambi i casi. */
.chat-scroller {
    min-height: 32rem;
    max-height: 65vh;
    overflow-y: auto;
}

/* L'avviso di errore di Blazor.

   Sta qui e non nel CSS isolato di un layout perche' l'elemento esiste in due layout, MainLayout
   e EmbeddedLayout, mentre la regola stava in uno solo. Il CSS isolato lega ogni regola allo
   scope del suo componente: la forma generata e' "#blazor-error-ui[b-tl0ktwbgib]", che al div
   dell'altro layout non si applica. Il widget mostrava percio' la scritta "si e' verificato un
   errore" dal primo istante, senza che fosse successo niente e senza nemmeno il position:fixed
   che la tiene incollata in fondo: restava in flusso sotto il pulsante Invia.

   I colori vengono dalle variabili di Tabler, cosi' l'avviso segue anche il tema scuro. */
#blazor-error-ui {
    background: var(--tblr-warning-lt, lightyellow);
    color: var(--tblr-body-color, #1a2027);
    border-top: 1px solid var(--tblr-border-color, rgba(0, 0, 0, .1));
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}