/* Quello che resta del foglio del modello Blazor, piu' il poco che la libreria dell'interfaccia non copre.

   Sono spariti da qui: il font imposto su html e body, che scavalcava la scala tipografica della
   libreria; 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 della libreria 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' la libreria 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 della libreria, 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 della libreria, 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;
}

/* Il profilo dello studio. La barra con il salvataggio resta in fondo alla finestra: prima il pulsante stava
   solo dopo l'ultima riga. Stanno qui e non nel CSS isolato dell'editor perche' i componenti dei passi ne
   usano le classi, e l'isolamento le legherebbe al solo editor. */

/* La tendina delle schede nella testata: i nomi piu' lunghi, con il segno di quanto contengono accanto, non
   devono andare a capo, e la tendina di Bootstrap si stringe sul contenuto piu' corto. */
.profile-sections-menu {
    min-width: 18rem;
}

/* Il titolo di una scheda e il suo «Annulla le modifiche» sulla stessa riga. Il testo ha una base stretta e
   prende quello che resta: con la base automatica (flex-fill) una descrizione lunga, come quella del listino,
   occuperebbe tutta la riga e manderebbe il bottone a capo, sotto di sé. */
.profile-titolo {
    flex: 1 1 24rem;
    min-width: 0;
}

.profile-savebar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    box-shadow: 0 -.25rem .75rem rgba(var(--tblr-body-color-rgb, 0, 0, 0), .08);
}

.profile-item-summary {
    cursor: pointer;
    user-select: none;
}

.profile-item-summary:hover {
    background: var(--tblr-bg-surface-secondary);
}

/* La griglia del listino.

   Il contenitore scorre da sé, in verticale e in orizzontale, con un'altezza massima: così
   l'intestazione e la colonna dei servizi restano ferme (position: sticky) e le cifre si leggono
   sempre sotto il nome del gioiello e accanto al nome del servizio, anche con trenta righe e sei
   colonne. Lo sticky funziona solo se nessun antenato fra la tabella e il contenitore ha un altro
   overflow, e solo con border-collapse: separate: per questo i bordi sono sulle celle e non sulla tabella.

   Le larghezze sono fisse (table-layout: fixed): una cifra scritta non deve spostare le colonne sotto le
   dita di chi sta scrivendo. Le colonne dei gioielli però non hanno una larghezza loro, e si dividono lo
   spazio che la sezione offre: la tabella è larga quanto la sezione, e non meno di quanto servono i
   gioielli a --listino-colonna ciascuno. Con più spazio le colonne si allargano, con meno si scorre.
   Ferme restano l'intestazione e la colonna dei servizi a sinistra e, a destra, il pulsante dei dettagli
   e le azioni di riga: chi scorre per arrivare a un gioiello lontano non deve scorrere indietro per
   duplicare, spostare o togliere un servizio. scroll-padding tiene un campo portato in vista fuori da
   quello che è fermo, che altrimenti lo coprirebbe.

   I colori sono variabili della libreria, quindi seguono il tema scuro. */
.listino-scorri {
    --listino-servizio: 14rem;
    --listino-dettagli: 3rem;
    --listino-azioni: 10rem;
    max-height: calc(100vh - 17rem);
    min-height: 14rem;
    overflow: auto;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface);
    scroll-padding: 4.5rem calc(var(--listino-dettagli) + var(--listino-azioni) + 1rem) 2rem var(--listino-servizio);
}

.listino-tabella {
    --listino-colonna: 7rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%;
    min-width: calc(var(--listino-servizio) + 5.5rem + 5.5rem + var(--colonne, 0) * var(--listino-colonna) + var(--listino-dettagli) + var(--listino-azioni));
}

.listino-tabella th,
.listino-tabella td {
    padding: .1875rem .375rem;
    border-bottom: 1px solid var(--tblr-border-color);
    vertical-align: middle;
    background: var(--tblr-bg-surface);
}

.listino-tabella thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: var(--tblr-font-weight-medium, 500);
    vertical-align: top;
    border-bottom-width: 2px;
}

.listino-tabella .listino-servizio {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--listino-servizio);
    border-right: 1px solid var(--tblr-border-color);
}

.listino-tabella thead .listino-servizio {
    z-index: 4;
}

/* A destra, fermi come la colonna dei servizi a sinistra: i dettagli e le azioni di riga. Il fondo è quello
   della tabella, perché le celle che scorrono sotto non si vedano attraverso, e un filo sul lato dice dove
   finisce la tabella e dove cominciano i comandi. Le azioni sono quelle della libreria: pulsanti icona
   piccoli, in fila, senza accavallarsi, con un filo di spazio e con la larghezza di --listino-azioni. */
.listino-tabella .listino-fine-dettagli,
.listino-tabella .listino-fine-azioni {
    position: sticky;
    z-index: 2;
}

.listino-tabella .listino-fine-azioni {
    right: 0;
}

.listino-tabella .listino-fine-dettagli {
    right: var(--listino-azioni);
    border-left: 1px solid var(--tblr-border-color);
}

.listino-tabella thead .listino-fine-dettagli,
.listino-tabella thead .listino-fine-azioni {
    z-index: 4;
}

.listino-fine-azioni .btn-list {
    --tblr-list-gap: .25rem;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Un pulsante icona piccolo della libreria (btn-icon btn-sm) non ha una larghezza sua: l'icona porta un
   margine negativo che annulla il riempimento, e il pulsante si riduce a due pixel, con le icone una sopra
   l'altra. A grandezza normale la larghezza viene da min-width, che qui manca. Si dà quindi un quadrato
   esplicito, alto quanto un campo piccolo del modulo, e le icone stanno al centro come nelle schede. */
.listino-tabella .btn-icon {
    --listino-pulsante: 2rem;
    flex: 0 0 auto;
    width: var(--listino-pulsante);
    min-width: var(--listino-pulsante);
    height: var(--listino-pulsante);
}

/* Quello del menu di una colonna sta accanto al nome, in una colonna di sette rem: più piccolo, per lasciare
   spazio al nome. */
.listino-tabella thead .btn-icon {
    --listino-pulsante: 1.5rem;
}

.listino-colonna-nome {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* La cella è un campo di testo vero, ma senza lo spazio di un modulo: trenta righe per otto colonne
   devono stare in una schermata. Le cifre a destra, come in un listino. */
.listino-cella {
    min-width: 0;
    text-overflow: ellipsis;
}

.listino-cella.listino-cifra {
    text-align: right;
}

/* L'errore è il bordo rosso e il messaggio nel title: la X che la libreria disegna dentro il campo
   coprirebbe la cifra, in una cella che ha larghezza per la cifra e niente di più. */
.listino-cella.is-invalid {
    padding-right: .5rem;
    background-image: none;
}

.listino-cella.cella-da-scegliere,
.listino-cella.cella-incompleta {
    border-color: var(--tblr-warning);
}

.listino-cella.cella-apre-oro {
    border-style: dashed;
}

.listino-cella.cella-anomala {
    border-color: var(--tblr-danger);
}

/* Una cella chiusa non è un campo spento qualunque: dice che qui non c'è niente da scrivere, a righe. */
.listino-cella.cella-chiusa {
    background: repeating-linear-gradient(135deg, transparent 0 .3rem, var(--tblr-border-color) .3rem .35rem);
    border-color: transparent;
    cursor: not-allowed;
}

/* Le due righe pronte in fondo: si scrive per aggiungere, e fino ad allora si vedono più tenui. */
.listino-pronta .listino-cella:not(:focus) {
    border-style: dashed;
}

.listino-dettagli > td {
    background: var(--tblr-bg-surface-secondary);
}

/* I dettagli di un servizio stanno fermi a sinistra mentre la tabella scorre, e larghi come l'area visibile del
   contenitore (cqw), non come la tabella: una riga più larga della finestra taglierebbe il testo a destra. */
.listino-scorri {
    container-type: inline-size;
}

.listino-dettagli-corpo {
    position: sticky;
    left: 0;
    width: calc(100cqw - 1rem);
    max-width: 52rem;
    padding: .5rem .25rem;
}

.listino-stato {
    font-size: .875rem;
}

/* Il catalogo è un componente a sé, con un margine da pagina: nella barra degli strumenti sta in
   riga, e quando si apre prende la larghezza intera. */
.listino-catalogo > .btn {
    margin-bottom: 0 !important;
}

.listino-catalogo:has(> .card) {
    flex: 1 0 100%;
}