/*
 * Stili propri del CRM, non del tema Skote.
 * Caricato dopo i CSS di Skote in tutti i layout.
 */

/* --- Font Poppins, ospitato in locale ----------------------------------
 *
 * Skote carica Poppins con un @import da fonts.googleapis.com. Per un CRM
 * con clienti europei e' un problema: a ogni pagina l'indirizzo IP
 * dell'utente finisce a Google senza che abbia dato un consenso, e il sito
 * dipende da un CDN esterno per rendersi. I file sono quindi serviti da
 * public/assets/fonts/poppins/ e l'@import e' stato tolto dai CSS del tema
 * (app.css, app.min.css, app-rtl.min.css).
 *
 * ATTENZIONE: ricopiando gli asset dal pacchetto Skote l'@import torna.
 * Dopo un aggiornamento del tema va ricontrollato:
 *     grep -l fonts.googleapis public/assets/css/*.css
 *
 * Poppins e' distribuito con SIL Open Font License 1.1, che ne consente
 * l'uso in locale. Sono inclusi i soli sottoinsiemi latin e latin-ext:
 * il devanagari non serve alle quattro lingue del CRM.
 */

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/poppins/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/poppins/poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- L'attributo `hidden` deve vincere sulle utility di Bootstrap -------
 *
 * In `bootstrap.css` ci sono entrambe le regole:
 *
 *     [hidden] { display: none !important }   (reboot, in cima)
 *     .d-flex  { display: flex !important }   (utility, in fondo)
 *
 * Hanno la **stessa specificita'** - un attributo e una classe - e sono
 * entrambe `!important`, quindi decide l'ordine: vince l'ultima, cioe'
 * `.d-flex`. Un elemento `class="d-flex" hidden` resta percio' **visibile**,
 * ed e' quello che succedeva ai pulsanti delle monete del deposito (che si
 * vedevano prima di scegliere il metodo) e alla riga "Waiting for payment",
 * che non spariva quando il pagamento arrivava.
 *
 * Ripetuta qui - in un foglio caricato dopo quelli del tema - la regola
 * dell'attributo torna a essere l'ultima e vince su tutte le `d-*`. Non e'
 * una preferenza: `hidden` vuol dire "non e' nella pagina", e una utility
 * che lo scavalca non e' quel che chi scrive il markup ha chiesto.
 */
[hidden] {
    display: none !important;
}

/* --- Impaginazione stabile fra una pagina e l'altra ---------------------
 *
 * Passando da una pagina alta (la dashboard) a una corta (l'elenco dei
 * ruoli) la barra di scorrimento sparisce e su un browser con barre classiche
 * l'intera finestra, topbar e menu compresi, scivola di una quindicina di
 * pixel: sembra che si sia ricaricato tutto. Riservando sempre lo spazio,
 * cambia solo il contenuto.
 */
html {
    scrollbar-gutter: stable;
}

/* --- Selettore utente / amministrazione -------------------------------- */

/* Nel tema il logo e' display:block, quindi in flusso normale il selettore
   finirebbe a capo sopra di esso: il brand box che lo contiene diventa flex.
   Il padding scende da 24 a 12px per lato per far stare selettore (101px) e
   logo (87px) nei 250px della colonna. */
.navbar-brand-box.has-mode-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
}

.navbar-brand-box.has-mode-switch .logo {
    line-height: 1;
}

.mode-switch {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    overflow: hidden;
    line-height: 1;
}

.mode-switch a {
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.mode-switch a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

.mode-switch a.active {
    /* L'accento del tema e' chiaro: il testo sopra lo da' --crm-su-primario,
       che il tema compilato tiene allineato alla palette (theme/scss). */
    color: var(--crm-su-primario);
    background-color: var(--bs-primary);
}

/* Con la sidebar ridotta a icone il brand box scende a 70px: resta il solo
   logo compatto e il selettore non ci starebbe. */
body.vertical-collpsed .mode-switch {
    display: none;
}

/* Sotto i 992px il brand box e' fuori dal flusso della sidebar e lo spazio
   e' ancora meno. */
@media (max-width: 991.98px) {
    .mode-switch {
        margin-right: .5rem;
    }

    .mode-switch a {
        padding: 5px 7px;
        font-size: 10px;
    }
}

/* select2: due punti che il CSS del tema non copre, perche' questa versione
   della libreria ha rinominato le classi delle opzioni (--selected,
   --selectable) e le sue regole sono piu' specifiche di quelle di Skote.
   Senza questi, nel pannello aperto la voce scelta resta un blocco grigio
   chiaro e l'evidenziazione usa un blu suo invece del primario del tema. */
.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: var(--crm-su-primario);
}

/* Il menu che elenca dei record - oggi il cliente del deposito scritto a mano
   - e' piu' alto dei menu a poche voci: select2 si ferma a 200px, cioe' cinque
   righe, e su un elenco che si scorre cercando una persona cinque righe sono
   uno spiraglio. Lo prende chi lo chiede (`dropdownCssClass`) e non tutti i
   menu della pagina: dove le voci sono tre, un pannello alto 18rem sarebbe
   vuoto per due terzi. */
.crm-select2-lista .select2-results__options {
    max-height: 18rem;
}

/* E le voci ci vanno a capo quando non ci stanno. Il pannello e' largo quanto
   il campo, e `overflow-y: auto` sulle voci vale **auto anche in
   orizzontale**: un nome che non ci sta - e i nomi dei gruppi sono un'unica
   parola, `demo\forex-hedge-usd-01`, che da se' non andrebbe a capo da
   nessuna parte - si faceva una barra di scorrimento orizzontale invece di
   mostrarsi. Una voce su due righe si legge, una da scorrere no. */
.crm-select2-lista .select2-results__option {
    overflow-wrap: anywhere;
}

/* I menu dentro le righe di un elenco: oggi il solo IB padre degli affiliati
   (il gruppo del broker si imposta da un modal, non da una tendina).

   **La larghezza sta sulla cella e non sul campo**, ed e' una scelta
   obbligata: select2 nasconde il `select` e mette al suo posto un contenitore
   suo, e la classe del markup non ci arriva - in questa versione (4.1)
   l'opzione `containerCssClass` non esiste piu', e la sua sostituta
   (`selectionCssClass`) la mette su un altro elemento, quello interno. La
   cella invece e' nostra e non dipende da come la libreria si chiama le
   cose: la regola prende il `select` del browser (senza JavaScript) e il
   contenitore della libreria (con). Senza, la colonna si stringerebbe quanto
   la voce piu' corta - che e' come era, prima che quelle classi non
   arrivassero a destinazione.

   Il `select` nascosto resta fuori (`:not(.select2-hidden-accessible)`): la
   libreria lo riduce a un pixel e lo porta fuori dal flusso, e una larghezza
   minima la' non serve a niente. */
.crm-cella-menu select:not(.select2-hidden-accessible),
.crm-cella-menu .select2-container {
    min-width: 13rem;
}

/* E sono menu piccoli, come i pulsanti della riga: il tema da' al contenitore
   di select2 un'altezza fissa di 38px, cioe' quella di un campo normale, e
   una riga di elenco si alzerebbe di sette pixel per il solo menu. Le misure
   sono quelle che Bootstrap da' a `form-select-sm`, che e' quel che il
   `select` porta nel markup. */
.crm-cella-menu .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.875rem;
}

.crm-cella-menu .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.5rem);
    font-size: inherit;
    /* La freccia del tema e' larga 34px e sta sopra il testo, che di spazio a
       destra ne ha 20 da select2: l'ultima parola le passava sotto invece di
       finire con i puntini prima di lei. */
    padding-right: 2.5rem;
}

.crm-cella-menu .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem);
}

/* Una variante **corta** per una colonna di menu dalle voci brevi: quello
   della decisione su una richiesta di conto ne ha tre ("Decidi...",
   "Approva", "Nega"), e 13rem sarebbero una colonna larga il doppio del suo
   contenuto - in una tabella di nove colonne lo spazio e' di tutti. Va
   insieme a `crm-cella-menu`, da cui prende l'altezza, e viene dopo perche' a
   parita' di specificita' decide l'ordine. */
.crm-cella-menu-breve select:not(.select2-hidden-accessible),
.crm-cella-menu-breve .select2-container {
    min-width: 9rem;
}

/* --- Il badge dello stato di un conto ---------------------------------------
   Una larghezza minima nella colonna "Status" dell'elenco dei conti: le etichette
   della scala sono lunghe diverse ("Richiesto", "Creato nel broker"), e una
   colonna di badge che cominciano tutti al margine e finiscono dove capita la
   riga si legge peggio di quanto il colore aiuti. La misura tiene la piu'
   lunga delle etichette inglesi ("Created at broker"); il testo lo centra
   `.badge` da se'.

   E' un **minimo** e non una larghezza: un'etichetta piu' lunga di quella
   misura allarga la sua pillola invece di uscirne fuori o di andare a capo -
   e' il caso del francese, dove "Échec de l'ouverture" sono venti caratteri -
   e il `white-space: nowrap` di `.badge` resta percio' quello che e'. Il
   prezzo e' che in quelle lingue i badge non finiscono tutti alla stessa
   colonna; cominciano comunque tutti dal margine, che e' quel che si legge. */
.crm-badge-stato {
    min-width: 6.30rem;
}

/* --- Righe di elenco che si cliccano ----------------------------------------
   L'elenco dei conti apre la storia di un conto cliccando la riga, e una riga
   che risponde al clic lo deve dire: il cursore della mano e il fondo che si
   schiarisce al passaggio, che sono i due segni con cui si legge una cosa
   cliccabile.

   La classe la mette lo **script** sul contenitore della tabella e non il
   markup: senza JavaScript il clic sulla riga non fa niente - la storia si
   apre dal link dell'id - e un cursore che promette un gesto che non succede
   e' peggio di nessun cursore. Quale riga sia cliccabile lo dice l'attributo
   con l'indirizzo che apre: la riga dello stato vuoto ("nessun conto") non ne
   ha, e il cursore non deve cambiare sopra una frase.

   Il fondo del passaggio non e' scritto a mano: e' `--bs-table-hover-bg`,
   cioe' quello che `table-hover` userebbe, messo nella variabile da cui le
   celle del tema leggono il loro stato. Cosi' una palette nuova se lo porta
   dietro e il tema chiaro continua a funzionare. */
.crm-righe-cliccabili tbody tr[data-conto-eventi] {
    cursor: pointer;
}

.crm-righe-cliccabili tbody tr[data-conto-eventi]:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

/* --- Il modal largo (le operazioni chiuse di un conto) -----------------------
   Il registro dei deal di un conto e' una tabella di quindici colonne - due
   identificativi a otto cifre, due momenti al secondo, quattro cifre a due
   decimali e due prezzi a otto - e nessuna delle misure di Bootstrap la
   contiene: `modal-xl` si ferma a 1140px, cioe' meno di quel che uno schermo
   da lavoro ha da dare, e il resto finiva nello scorrimento orizzontale.

   **Il 90% della larghezza dello schermo**, non una misura in pixel: quel che
   serve qui non e' una larghezza giusta ma tutto lo spazio che c'e', meno un
   margine che lasci vedere che e' un modal e non una pagina. Resta un
   `max-width`, quindi su uno schermo stretto il dialogo si restringe da se'
   come ogni altro e il `table-responsive` dentro continua a fare il suo
   mestiere.

   Due classi nel selettore, e non una: `.modal-xl` e il `max-width: 500px`
   del dialogo normale sono selettori da una classe sola, quindi questa regola
   vince comunque - anche sui fogli del tema, che sono caricati prima. */
.modal-dialog.crm-modal-larga {
    max-width: 90vw;
}

/* --- Modal che non supera lo schermo ----------------------------------------
   Cinquanta righe di operazioni sono piu' alte di qualunque monitor: il modal
   cresceva oltre il bordo, e per arrivare in fondo alla tabella si scorreva
   la **pagina dietro** - col paginatore, che sta in cima, sparito su.

   Il dialogo si ferma percio' al **90% dell'altezza** - la stessa misura
   della larghezza, e per la stessa ragione: tutto lo spazio che c'e', meno un
   margine che lasci vedere che e' un modal e non una pagina - e a scorrere e'
   la sola tabella. Quel che le sta intorno resta fermo: l'intestazione col
   cliente e il conto, il paginatore e la riga del totale.

   E' una colonna flex: il corpo non scorre (`overflow: hidden`) e l'unico
   pezzo elastico e' il contenitore della tabella, che si prende quel che
   resta. `min-height: 0` su entrambi perche' il minimo di default di un
   elemento flex e' il suo contenuto: senza, la tabella non si restringerebbe
   e il corpo crescerebbe lo stesso.

   L'altezza e' **fissa** e non un massimo: con un massimo il dialogo cresce
   e si accorcia secondo quante righe ha la pagina - cambiando pagina o
   filtro saltava, e con lui il paginatore in fondo, che e' proprio il
   comando che si sta usando. Fisso, il modal e' sempre quello e cambia solo
   il contenuto; con poche righe resta dello spazio sotto la tabella, che e'
   il prezzo e si paga volentieri.

   Vale per i **soli modal**: lo stesso frammento e' anche una pagina, e la'
   la tabella non ha nessuna altezza da rispettare - scorre la finestra, che
   e' quel che si fa in una pagina. */
.crm-modal-alta > .modal-content {
    height: 90vh;
}

.crm-modal-alta > .modal-content > .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.crm-modal-alta .crm-tabella-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* L'intestazione resta visibile mentre si scorre: cinquanta righe di sole
   cifre senza i nomi delle colonne non si leggono piu' dopo la decima. Lo
   sfondo lo mette gia' `.table-light` sulle celle (Bootstrap 5.3 lo dipinge
   con un `box-shadow` inset), quindi le righe passano sotto e non si vedono
   in trasparenza. */
.crm-modal-alta .crm-tabella-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* --- Filtro per data della storia di un conto -------------------------------
   I due campi stanno in una riga flex: un `.form-control` e' largo il 100%
   del suo contenitore, quindi senza una misura si prendono tutto lo spazio e
   mandano a capo meta' del filtro. La larghezza e' quella del formato che ci
   va dentro - dieci caratteri in monospace piu' il padding del campo - e non
   un numero a occhio: in `ch`, cosi' segue il font. */
.crm-filtro-data {
    flex: 0 0 auto;
    width: calc(10ch + 1.5rem);
}

/* Nel modal il filtro va **in alto a destra**, accanto al titolo. Lo spinge
   la' il suo `margin-left: auto`, e all'altro va tolto quello che Bootstrap
   da' al pulsante di chiusura (`margin: -.5rem -.5rem -.5rem auto`): due
   margini automatici nella stessa riga si dividono lo spazio a meta', e il
   filtro restava a mezza strada dal titolo invece di stare col pulsante. */
.modal-header > .crm-filtro-storia {
    margin-left: auto;
}

.modal-header > .crm-filtro-storia ~ .btn-close {
    margin-left: 0.5rem;
}

/* --- Le quattro colonne di importi della storia di un conto -----------------
   Risultato, commissione, fee e swap sono la stessa cosa - dei soldi - e si
   leggono in colonna una sotto l'altra: con la larghezza del contenuto erano
   quattro colonne di misura diversa, e con lo zero che adesso non si scrive
   la piu' vuota si stringeva fino a sparire.

   La misura la detta la **piu' larga delle quattro intestazioni**, che e'
   "Commission": una colonna non si stringe sotto il suo titolo, quindi con
   gli otto caratteri di `-1234.56` le altre tre restavano a 68px e lei a 83.
   Dieci caratteri in monospace piu' il padding della tabella compatta, in
   `ch` cosi' segue il font - e non un numero a occhio.

   Un importo piu' lungo allarga la sua colonna, che e' il comportamento
   normale di una tabella e qui va bene: meglio una colonna larga di una
   cifra tagliata. */
.crm-col-importo {
    width: calc(10ch + 0.9em);
}

/* --- Il calendarietto dei campi data ----------------------------------------
   bootstrap-datepicker si appende al `body` e si calcola lo z-index dagli
   antenati del campo: dentro un modal gli viene **999**, cioe' meno dei 1055
   di `.modal` - si apre e resta dietro, e da fuori sembra che il clic non
   faccia niente. Lo z-index lo scrive inline, quindi per batterlo ci vuole
   `!important`; 1060 e' sopra il modal e sotto i 1070 dei tooltip del tema.

   Serve anche nella pagina intera, dove il modal non c'e': la' 999 basterebbe
   e la regola non cambia niente. */
.datepicker.datepicker-dropdown {
    z-index: 1060 !important;
}

/* --- Tabella compatta -------------------------------------------------------
   Per una tabella di sole cifre: lo storico delle operazioni di un conto sono
   quindici colonne - due identificativi a otto cifre, due momenti al secondo,
   quattro importi e due prezzi a otto decimali - e con il padding del tema
   (0.75rem per lato) una riga spende piu' spazio nei margini che nei numeri.
   Qui si stringe e si rimpicciolisce il testo; il **passo verticale resta
   quello di `table-sm`**, perche' quel che manca e' larghezza.

   Le misure sono in `em`, quindi seguono il font piu' piccolo della tabella e
   non vanno riscritte se cambia. */
.crm-tabella-compatta {
    font-size: .75rem;
}

.crm-tabella-compatta > :not(caption) > * > * {
    padding-right: .45em;
    padding-left: .45em;
}

/* --- Barra di ricerca della topbar ------------------------------------------
   Il tema non le da' una larghezza: l'input resta quello di default del
   browser (circa 20 caratteri) e il segnaposto, che elenca cosa si puo'
   cercare, verrebbe tagliato a meta'. La larghezza cresce con lo spazio
   disponibile: a 992px, dove la barra appare, accanto ci sono ancora il brand
   box da 250px e le icone a destra. */
.app-search {
    width: 20rem;
}

@media (min-width: 1200px) {
    .app-search {
        width: 28rem;
    }
}

/* --- Voci di menu chiuse finche' il KYC non e' approvato ---------------------
   Non sono link (l'ancoraggio non ha href, quindi la navigazione parziale non
   le intercetta: guarda `a[href]`): restano in elenco attenuate, col
   lucchetto a destra e il motivo nel title. Il cursore lo dice prima del
   clic, che e' l'unico momento in cui serve saperlo. */
#sidebar-menu ul li a.crm-voce-bloccata {
    cursor: not-allowed;
    opacity: .55;
}

/* Senza href il tema non la colora al passaggio del mouse, ma il colore del
   testo lo decide la regola generale: qui si conferma, cosi' la voce chiusa
   non si accende come quelle che si aprono. */
#sidebar-menu ul li a.crm-voce-bloccata:hover {
    color: inherit;
}

/* --- Quick operations: i pulsanti in cima al menu utente --------------------
   Le tre schede del modal "Make operation" (deposito, prelievo,
   trasferimento), una per pulsante. Sono **pulsanti e non voci di menu**
   perche' non portano a una pagina, aprono un modal - e il disegno e' quello
   con cui nel deposito si scegle la rete (`.crm-scelta-lista > .btn`): fila
   che va a capo, pulsanti piccoli bordati, nome che non si spezza.

   Le misure e i colori vanno riscritti qui perche' le regole del tema per i
   link del menu (`body[data-sidebar=dark] #sidebar-menu ul li a`) sono piu'
   specifiche di `.btn` e di `.btn-outline-primary`: senza, questi pulsanti
   sarebbero testo grigio con il padding di una voce di menu. */
#sidebar-menu .crm-menu-azioni {
    /* Il rientro del titolo della sezione (`.menu-title`, 20px), che e' quel
       che nomina questi pulsanti e sta subito sopra: incolonnarli con lui
       vale piu' che incolonnarli con le icone delle voci, che stanno quattro
       pixel piu' in dentro. Sopra non serve niente - il titolo ha gia' il suo
       stacco - e sotto mezzo rem stacca dal titolo della sezione seguente. */
    padding: 0 1.25rem .5rem;
}

#sidebar-menu .crm-menu-azioni-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Le misure del pulsante, che la regola del menu sovrascriverebbe con il
   padding e il corpo di una voce. Si rimettono **dalle variabili di `.btn`**
   (`--bs-btn-*`, che `btn-sm` ridefinisce) e non con dei numeri copiati: un
   giorno il tema cambia la misura dei pulsanti piccoli e questi la seguono.

   `white-space: nowrap` come nella fila delle reti: un'operazione mandata a
   capo dentro il suo pulsante non si legge. */
#sidebar-menu .crm-menu-azioni a.btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
    white-space: nowrap;
}

/* Il lucchetto del pulsante spento: nel menu le icone hanno una gabbia loro
   (`min-width: 1.75rem`, 1.25rem di corpo) che qui lo staccherebbe dal nome. */
#sidebar-menu .crm-menu-azioni a.btn i {
    min-width: 0;
    padding-bottom: 0;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
}

/* **I colori si rimettono dalle stesse variabili di Bootstrap**, non
   riscritti a mano: `--bs-btn-color` e `--bs-btn-hover-color` li dichiara la
   variante del pulsante (qui `btn-outline-primary`, cioe' l'oro e
   l'inchiostro su fondo oro), e cosi' una palette nuova - o un'altra variante
   un domani - se li porta dietro. Quel che serve e' la specificita' per
   battere il colore del testo delle voci di menu, non un valore nostro.

   Il fondo non si ridice: nessuna regola del menu lo tocca, quindi al
   passaggio del mouse resta quello di `.btn:hover`.

   `:focus-visible` e non `:focus`, come fa Bootstrap: con il solo `:focus` -
   che scatta anche al clic, dove il fondo resta trasparente - il nome
   diventerebbe inchiostro scuro su fondo scuro. */
#sidebar-menu .crm-menu-azioni a.btn {
    color: var(--bs-btn-color);
}

#sidebar-menu .crm-menu-azioni a.btn:hover,
#sidebar-menu .crm-menu-azioni a.btn:focus-visible {
    color: var(--bs-btn-hover-color);
}

/* **Chiuso dal KYC**: la classe e' quella della voce di menu bloccata, che
   da' l'opacita' e il cursore - e' la stessa cosa detta per un pulsante
   invece che per una voce. **Non `.btn.disabled`**, che mette
   `pointer-events: none` e porterebbe via il `title`, cioe' proprio il
   motivo: il pulsante non si premerebbe comunque, perche' non ha `href`.

   Qui si ferma anche l'accensione al passaggio del mouse della regola di
   sopra: un pulsante che si colora e poi non fa niente si legge come una
   pagina rotta. */
#sidebar-menu .crm-menu-azioni a.btn.crm-voce-bloccata:hover {
    color: var(--bs-btn-color);
    background-color: transparent;
}

/* **Con la sidebar ridotta non ci sono.** Quella e' larga 70 pixel ed e'
   fatta di sole icone - il tema nasconde con lo stesso criterio i titoli
   delle sezioni (`.menu-title`) - e un pulsante con l'etichetta scritta non
   ha una forma che ci stia: sborderebbe sul contenuto, perche' la' il menu
   lascia uscire quel che non entra. Le tre operazioni restano dove sono
   sempre state, sulla card Wallet della dashboard. */
.vertical-collpsed .vertical-menu #sidebar-menu .crm-menu-azioni {
    display: none;
}

/* --- La card con cui si apre un conto nuovo ---------------------------------
   L'ultima card della griglia dei conti in `/accounts`: le card dicono quel
   che il cliente ha, e in fondo sta quel che puo' avere. E' un `<button>`,
   perche' apre un modal, disegnato come i riquadri dei conti che le stanno
   accanto - stesso raggio, stessa altezza piena - con tre differenze che
   dicono che e' un'azione e non un conto:

   - il bordo **tratteggiato**, che e' il modo in cui si legge un posto vuoto
     da riempire invece di una cosa che c'e' gia';
   - l'**oro**, che e' il colore di cio' su cui si agisce (vedi "Colori"): un
     conto non e' un'azione e il suo riquadro resta neutro;
   - il contenuto **centrato**, perche' dentro non c'e' una tabellina di voci
     ma un'icona e un'etichetta.

   I colori non sono scritti a mano: vengono da `--bs-primary-rgb` e dalle
   variabili del tema, come i fili d'oro delle card di un'offerta. */
.crm-card-azione {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    /* Alta come il riquadro piu' alto della riga, come gli altri conti. */
    height: 100%;
    /* **E grande come un conto vero anche quando e' sola nella sua riga** -
       la pagina di chi non ha ancora nessun conto, o la riga nuova in cui va
       a capo quando i conti riempiono quella di sopra: senza, sarebbe una
       striscia accanto a riquadri alti il doppio.
       Il minimo non e' un numero scelto a occhio ma **l'altezza di un
       riquadro di conto**, scritta coi suoi stessi ingredienti: i due bordi,
       il `p-3` sopra e sotto, la riga del titolo (un `h5`, interlinea 1.2) e
       le quattro voci (`mt-2` piu' una riga a 13px). Le voci sono sempre
       quattro - una che manca mostra il trattino - quindi tutti i riquadri
       dei conti sono alti uguali, e questo numero e' il loro. Aggiungendone
       una, il conto da rifare e' questo. */
    min-height: calc(2px + 2rem + (1.015625rem * 1.2) + 4 * (.5rem + 13px * 1.5));
    padding: 1rem;
    border: 1px dashed rgba(var(--bs-primary-rgb), .5);
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    color: var(--bs-primary);
    text-align: center;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.crm-card-azione:hover,
.crm-card-azione:focus-visible {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .08);
}

/* **Spenta non e' piu' un'azione**: via l'oro e via il tratteggio, cioe' i
   due segni che dicono "qui si agisce", e resta il bordo neutro dei riquadri
   dei conti. Dentro c'e' il motivo, che e' quel che serve leggere. */
.crm-card-azione:disabled {
    border-style: solid;
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

/* --- Albero delle strutture (IB / SUB-IB / clienti) --------------------------
   Il rientro e' sul contenitore dei figli, non sulla singola riga: cosi' una
   sottostruttura profonda si sposta tutta insieme e le righe di uno stesso
   livello restano incolonnate qualunque sia il ramo. */
.crm-albero-figli {
    margin-left: 1.5rem;
    border-left: 1px solid var(--bs-border-color);
    padding-left: .5rem;
}

.crm-albero-riga {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: .25rem;
}

/* Lo sfondo al passaggio del mouse dice quale riga si sta per aprire. */
.crm-albero-riga:hover {
    background-color: var(--bs-tertiary-bg);
}

/* La freccia e lo spaziatore hanno la stessa larghezza: senza, i nodi senza
   figli scivolerebbero a sinistra rispetto ai fratelli. */
.crm-albero-toggle,
.crm-albero-spazio {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    text-align: center;
    line-height: 1;
}

.crm-albero-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bs-secondary-color);
}

.crm-albero-icona {
    font-size: 1rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Sfondo animato delle pagine di accesso

   La scena la disegna `assets/js/auth-bg.js` su un canvas inserito come primo
   figlio di `.auth-full-bg`. Qui c'e' solo quel che il canvas non puo' fare:
   l'altezza piena della colonna e la vignettatura che chiude i bordi verso il
   pannello del form. Il colore della vignettatura e' quello del fondo pagina,
   cosi' segue il tema invece di essere un nero fisso.
--------------------------------------------------------------------------- */
.auth-full-bg[data-auth-bg] {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.auth-full-bg[data-auth-bg]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 60% 42%, transparent 55%, var(--bs-body-bg) 100%);
}

/* Icone social in fondo a sinistra della colonna decorativa (vedi
   views/partials/auth-social.php). Stanno sopra la vignettatura (z-index 1),
   e i colori sono quelli del tema: funzionano sia in dark sia in light. */
.auth-social {
    position: absolute;
    z-index: 2;
    left: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(1.5rem, 5vh, 3rem);
    display: flex;
    gap: 0.75rem;
}

.auth-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.auth-social a:hover,
.auth-social a:focus-visible {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* Corpo di un'email archiviata, dentro un iframe sandbox (vedi
   views/admin/customers/email.php). L'altezza e' fissa e lo scorrimento e'
   suo: il contenuto di un iframe non si misura senza JavaScript, e un
   riquadro alto quanto un'email lunga spingerebbe fuori schermo tutto il
   resto. Il fondo e' bianco perche' l'email lo e': e' l'anteprima di un
   documento, non un pezzo di questa pagina, e sotto un messaggio con
   sfondi trasparenti il dark mode lascerebbe testo scuro su fondo scuro. */
.crm-email-corpo {
    height: 60vh;
    min-height: 20rem;
    background-color: #fff;
}

/* --- La card della landing di Osher ------------------------------------------
   Il disegno e' quello delle due card "Two accounts. One execution." della
   landing: il fondo che schiarisce verso l'alto, il filo d'oro sfumato sul
   bordo superiore, il titolo in oro metallico e le voci separate da fili
   d'oro. I colori non sono scritti a mano: vengono dalle variabili del tema -
   `--bs-primary-rgb` per i fili, le superfici per il gradiente del fondo -
   cosi' una palette nuova li porta con se'.

   **Lo usano due posti**, e le regole stanno percio' qui una volta sola: le
   card delle **offerte** nel modal della richiesta MT5 (`.crm-conto-tipo`) e
   quelle dei **prodotti** dello Shop (`.crm-prodotto`). Due copie del
   gradiente, del filo e del titolo metallico col tempo divergerebbero - il
   ritocco fatto su una e non sull'altra - e sono la stessa card della stessa
   marca. Quel che cambia sta nei due blocchi che seguono, ed e' quel che le
   rende due cose diverse: un'offerta **si scegle** (e' l'etichetta di un
   radio `btn-check`, quindi ha il cursore, l'hover e il posto per la spunta),
   un prodotto si **guarda e si compra** (nessun cursore, e in fondo alla card
   il suo pulsante). */
.crm-conto-tipo,
.crm-prodotto {
    position: relative;
    display: block;
    /* Pari altezza nella riga: due card con un numero diverso di righe non
       devono essere alte in modo diverso. */
    height: 100%;
    /* Il filo d'oro corre sul bordo superiore e il fondo arriva agli angoli:
       senza `overflow` il raggio non taglierebbe ne' l'uno ne' l'altro. */
    overflow: hidden;
    border: 1px solid rgba(var(--bs-primary-rgb), .36);
    /* 14px come sulla landing: un angolo piu' tondo di quello dei campi, che
       e' quel che fa leggere il riquadro come una card. */
    border-radius: .875rem;
    /* Il fondo schiarisce verso l'alto, dove sta il titolo: e' il gradiente
       della landing detto con le superfici del tema invece dei suoi neri
       scritti a mano. */
    background-color: transparent;
    background-image: linear-gradient(180deg,
        var(--bs-tertiary-bg) 0%,
        var(--bs-body-bg) 65%,
        var(--bs-body-bg) 100%);
}

/* L'offerta e' l'etichetta di un radio: si clicca, quindi ha il cursore, e a
   destra resta il posto della spunta, che e' fuori dal flusso. */
.crm-conto-tipo {
    padding: .875rem 2rem 1rem 1rem;
    cursor: pointer;
}

/* Il filo d'oro sul bordo superiore, che sfuma ai due capi e non arriva agli
   angoli: e' il segno con cui la landing distingue queste card da un riquadro
   qualunque. E' decorativo, quindi un pseudo-elemento e non del markup. */
.crm-conto-tipo::before,
.crm-prodotto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background-image: linear-gradient(90deg,
        rgba(var(--bs-primary-rgb), 0),
        rgba(var(--bs-primary-rgb), .75),
        rgba(var(--bs-primary-rgb), 0));
}

/* L'**oro metallico**: il carattere con cui la marca scrive le due cose che
   su una card si leggono per prime - il **nome** (del conto che si sta per
   chiedere, del prodotto che si sta per comprare) e, nello Shop, la **cifra
   del prezzo**. Sulla landing sono entrambi cosi': peso leggero e lettere
   strette, che e' quel che li fa leggere come un marchio e non come
   l'intestazione di un campo.

   L'oro qui non segnala un'azione - si agisce sulla card intera, o sul
   pulsante accanto alla cifra - ed e' percio' l'eccezione alla regola del
   tema. Le misure le rialza la card di un prodotto, che non sta in un modal;
   sull'offerta la spunta resta accanto al nome, fuori dal flusso, cosi' non
   lo sposta comparendo. */
.crm-conto-tipo-nome,
.crm-prodotto-nome,
.crm-prodotto-cifra {
    display: block;
    /* La classe vale su qualunque tag: nella vetrina il nome e' un heading
       (`h5`), cosi' chi usa un lettore di schermo salta di prodotto in
       prodotto, e un heading porta i margini del tema. */
    margin: 0;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--bs-emphasis-color);
}

/* L'oro metallico e' il gradiente che la landing chiama `--metal`, qui
   ricavato dalle sfumature che Bootstrap deriva dall'oro del tema invece di
   riscriverne i cinque colori. Vale nel **solo tema scuro**: nel chiaro il
   capo chiaro del gradiente finirebbe sul bianco della card, ed e' la stessa
   ragione per cui la marca e' pensata per il dark (vedi "Il marchio"). */
[data-bs-theme="dark"] .crm-conto-tipo-nome,
[data-bs-theme="dark"] .crm-prodotto-nome,
[data-bs-theme="dark"] .crm-prodotto-cifra {
    background-image: linear-gradient(180deg,
        var(--bs-primary-text-emphasis) 0%,
        var(--bs-primary) 55%,
        var(--bs-primary-border-subtle) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Il sottotitolo e' la riga che spiega l'offerta, e sulla landing ha
   un'interlinea larga: e' un periodo, non un'etichetta. */
.crm-conto-tipo-lead,
.crm-prodotto-lead {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--bs-secondary-color);
}

/* Le condizioni, separate da fili d'oro come la tabellina delle card della
   landing: uno sopra la prima riga e uno sotto ciascuna, piu' tenui di quello
   del bordo perche' dividono e non delimitano. L'etichetta resta attenuata
   (`text-muted` nel markup) e il valore prende il colore in evidenza, che e'
   quel che si viene a leggere. */
.crm-conto-tipo-spec {
    margin-top: .875rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), .16);
    font-size: .75rem;
}

/* Col referral la card non ha ne' titolo ne' sottotitolo - il gruppo non si
   nomina al cliente - e le condizioni sono tutto quello che c'e': il filo che
   le separa da quel che sta sopra non separerebbe niente. */
.crm-conto-tipo-spec-nuda {
    margin-top: 0;
    border-top: 0;
}

.crm-conto-tipo-spec > div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4375rem 0;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), .16);
}

.crm-conto-tipo-spec > div > span:last-child {
    text-align: right;
    color: var(--bs-emphasis-color);
}

.crm-conto-tipo:hover {
    border-color: rgba(var(--bs-primary-rgb), .62);
}

/* La spunta la porta solo la card scelta: a riposo non c'e' nessun segno da
   leggere, e il posto per lei e' comunque riservato dal padding. */
.crm-conto-tipo-scelto {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: var(--bs-primary);
    opacity: 0;
}

.btn-check:checked + .crm-conto-tipo .crm-conto-tipo-scelto {
    opacity: 1;
}

/* La card scelta prende l'oro sul **bordo**, non sul fondo: sulla landing la
   card in evidenza si distingue cosi', e un riquadro pieno d'oro sarebbe una
   superficie colorata, che nel tema l'oro non e' (vedi "Colori"). Il fondo
   resta il suo gradiente, e a dire che e' quella scelta ci sono il bordo
   pieno, l'alone e la spunta.

   La card sola non e' una scelta - e' quello che si sta chiedendo - quindi si
   disegna allo stesso modo: il valore parte comunque, da un campo nascosto.
   Non e' un'etichetta di niente, percio' niente cursore e niente hover. */
.btn-check:checked + .crm-conto-tipo,
.crm-conto-tipo-sola {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .25);
}

.crm-conto-tipo-sola,
.crm-conto-tipo-sola:hover {
    cursor: default;
    border-color: var(--bs-primary);
}

/* L'anello del fuoco da tastiera sta dopo le altre, cosi' si vede anche sulla
   card gia' scelta, che porta un `box-shadow` suo. */
.btn-check:focus-visible + .crm-conto-tipo {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem var(--bs-primary-border-subtle);
}

/* L'annuncio: la card di un'offerta in arrivo si vede ma non si sceglie. Si
   attenua invece di sparire, perche' e' li' proprio per farsi vedere. */
.crm-conto-tipo-spenta {
    cursor: default;
    opacity: .65;
}

.crm-conto-tipo-spenta:hover {
    border-color: rgba(var(--bs-primary-rgb), .36);
}

/* --- La card di un prodotto dello Shop ---------------------------------------
   La superficie e' quella della landing (vedi sopra): qui c'e' solo quel che
   distingue un prodotto da un'offerta. Non si scegle - non e' l'etichetta di
   un radio - quindi non ha ne' cursore ne' hover ne' il posto della spunta, e
   quel che porta in fondo e' il suo pulsante. */
.crm-prodotto {
    /* Una colonna, perche' il pulsante va tenuto in fondo: in una riga di
       card con un numero diverso di righe di testo i pulsanti si
       incolonnano comunque. */
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.125rem 1rem;
}

/* Il titolo e la cifra del prezzo sono le due cose che si leggono per prime, e
   si vedono: 1.5rem contro i 13px delle righe di testo e i 12px delle
   etichette. Piu' grandi di quello di un'offerta (1.25rem) perche' questa
   card non sta in un modal largo cinquecento pixel ma in una griglia di
   pagina, e perche' in un negozio il nome e il prezzo sono quello che si
   cerca scorrendo.

   **La stessa misura per entrambi**, e non una gerarchia fra loro: stanno ai
   due capi della card - il nome in cima, la cifra in fondo - quindi non si
   fanno concorrenza, e l'una risponde a "cos'e'" come l'altra a "quanto
   costa". */
.crm-prodotto-nome,
.crm-prodotto-cifra {
    font-size: 1.5rem;
}

/* Le righe di testo sono l'**elenco** dei motivi per comprare, non un
   paragrafo: a tre righe identiche di testo attenuato si legge una frase
   lunga, mentre quelle sono tre cose. Un trattino d'oro davanti le marca come
   lista senza inventare nessuna gerarchia fra loro - sono tutte dello stesso
   peso, e il broker le scrive in tre colonne uguali.

   E' un segno e non un'icona: il filo d'oro e' il tratto con cui questa card
   divide le cose (il bordo, la riga sopra il prezzo), e un marcatore
   decorativo e' un pseudo-elemento e non del markup. Sul sottotitolo di
   un'offerta non c'e': la' quelle righe sono prosa, non un elenco.

   Il trattino sta a metà della **prima** riga (`.8em`, cioe' meta'
   dell'interlinea 1.6 di questo testo), cosi' resta al suo posto anche quando
   la riga va a capo. */
.crm-prodotto-lead {
    position: relative;
    padding-left: 1rem;
}

.crm-prodotto-lead::before {
    content: "";
    position: absolute;
    top: .8em;
    left: 0;
    width: .375rem;
    height: 1px;
    background-color: rgba(var(--bs-primary-rgb), .55);
}

/* L'intestazione della card: la **famiglia** a sinistra e lo **stato** a
   destra, sulla stessa riga sopra il titolo. La famiglia non sta in fila col
   titolo perche' gli porterebbe via la riga; lo stato sta nell'angolo, che e'
   dove si guarda per sapere se una card e' viva.

   In flusso e non in `position: absolute`: un badge appoggiato sull'angolo
   coprirebbe un titolo lungo che va a capo, e il padding da riservargli
   sarebbe un numero a occhio. Cosi' il posto se lo fa, e il titolo non ci
   finisce mai sotto. */
.crm-prodotto-testa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .375rem;
}

/* Lo stato a destra anche quando e' solo, cioe' su un prodotto senza
   famiglia: con un elemento solo `space-between` lo lascerebbe a sinistra. */
.crm-prodotto-stato {
    margin-left: auto;
}

/* Il prezzo in fondo alla card: la **cifra grande in oro** della landing a
   sinistra, con sopra l'etichetta di come si paga, e il pulsante alla sua
   destra. `auto` e' lo spazio libero della colonna, quindi il blocco resta in
   basso anche sulla card piu' corta della riga, e in una riga di card le
   cifre e i pulsanti si incolonnano.

   Il filo d'oro sopra e' quello che separa le voci sulla card di un'offerta,
   con la stessa tenuita': divide il prezzo da quel che il prodotto e', e non
   delimita niente. */
.crm-prodotto-prezzo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid rgba(var(--bs-primary-rgb), .16);
    /* Il filo d'oro resta alla **stessa altezza** in tutte le card di una
       riga. Quel che lo muove non e' quante righe di testo ci sono sopra - il
       blocco e' inchiodato in basso, quindi la slack se la mangia il
       `margin-top: auto` - e' l'altezza del blocco stesso, che cambia quando
       l'etichetta sopra la cifra non c'e': un canone la scrive accanto alla
       cifra (vedi `Shop::canoneSuffisso()`), una tantum sopra.

       Il minimo e' percio' scritto **coi suoi ingredienti** e non a occhio,
       come quello della card "apri un conto": il filo, il padding, la riga
       dell'etichetta (12px per l'interlinea 1.5 del tema) e quella della
       cifra (1.5rem per l'interlinea 1.2 di qui). Il filo ci va perche' il
       box del tema conta il bordo nell'altezza, e senza di lui le due card
       resterebbero diverse di un pixel. Senza etichetta la cifra resta in
       basso da se', perche' le voci del blocco sono allineate al fondo. */
    min-height: calc(1px + .75rem + 1.125rem + 1.8rem);
}

/* La valuta e il periodo accanto alla cifra, piu' piccoli e attenuati: a una
   misura sola le tre lettere di `USD` pesano quanto il numero e gli portano
   via la scena, e quel che si legge da lontano e' la cifra. Stanno **dentro**
   l'elemento della cifra - il gradiente d'oro e' ritagliato sul testo, e un
   figlio col suo colore ci si dipinge sopra - e per questo tornano anche di
   peso e di spaziatura normali. */
.crm-prodotto-valuta,
.crm-prodotto-periodo {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
}

/* L'annuncio: un prodotto in arrivo si vede ma non si compra. Si attenua
   invece di sparire, perche' e' li' proprio per farsi vedere, ed e' la stessa
   attenuazione della card di un'offerta in arrivo.

   Si attenua il **contenuto** e non la card: l'opacita' fa gruppo su tutto il
   sottoalbero, quindi messa sulla card porterebbe via anche la targhetta -
   cioe' proprio quella che spiega perche' la card e' spenta, e nessun
   `opacity: 1` su un figlio puo' riportarla indietro. Resta percio' piena
   l'intestazione, che dice **cos'e' e com'e'**, e si attenua quel che non e'
   ancora in vendita. */
.crm-prodotto-spenta .crm-prodotto-nome,
.crm-prodotto-spenta .crm-prodotto-lead,
.crm-prodotto-spenta .crm-prodotto-prezzo {
    opacity: .65;
}

/* La bandiera della valuta accanto al suo codice: si riconosce prima di
   leggere le tre lettere, ed e' la stessa immagine che il menu della valuta
   portava quando la valuta si sceglieva. Alta quanto la riga a cui sta
   accanto, e col suo angolo smussato perche' e' un rettangolo pieno in mezzo
   al testo. */
.crm-valuta-bandiera {
    height: .75rem;
    border-radius: 2px;
    vertical-align: -1px;
}

/* Tabella in modalita' ordinamento: le righe si prendono col mouse (vedi la
   scheda di un gateway di pagamento). La classe la mette e la toglie lo
   script quando si entra e si esce dalla modalita', cosi' fuori da quella la
   tabella resta una tabella - una riga che si muove al primo movimento del
   mouse si disordina per sbaglio. */
.crm-ordinabile tr {
    cursor: grab;
}

.crm-ordinabile tr:hover {
    background-color: var(--bs-tertiary-bg);
}

/* Il fantasma che dragula trascina: il tema non lo stila, e senza sfondo
   resterebbe trasparente sopra la tabella. */
.gu-mirror {
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .35);
    display: table;
    opacity: .95;
}

/* La riga del titolo di una pagina che porta dei comandi resta in vista mentre
   si scorre: serve dove la tabella e' lunga e il "Salva" sta in cima (la
   scheda di un gateway di pagamento, quaranta reti) - un pulsante che si
   raggiunge solo tornando su, su una pagina con modifiche in sospeso, e' il
   modo di perderle.

   `top` tiene conto della topbar fissa del tema, e lo sfondo e' quello della
   **pagina** - non della card - perche' questa barra sta fuori dalle card: le
   righe che le passano sotto non devono trasparire. */
.crm-barra-comandi {
    background-color: var(--bs-body-bg);
    position: sticky;
    top: 70px;
    z-index: 3;
    padding-top: .5rem;
}

/* Una card larga quanto il suo contenuto, non quanto la pagina: il riquadro
   grigio **appartiene** a quel che contiene, e una tabella di quattro colonne
   dentro un contenitore larghissimo si legge come due isole lontane (vedi i
   gateway di pagamento). Gli elementi che verranno avranno la loro card, della
   loro larghezza.

   `max-width` perche' su uno schermo stretto il contenuto non deve sfondare il
   riquadro; `fit-content` e non `max-content` perche' il secondo ignorerebbe
   quel limite. Attenzione: dentro non va un contenitore con lo scorrimento
   (`.table-responsive`), che non contribuisce la propria larghezza intrinseca
   e lascerebbe la card stretta quanto il resto. */
.crm-card-contenuto {
    max-width: 100%;
    width: fit-content;
}

/* --- Scelta fatta di pulsanti (modal delle operazioni) ----------------------
   Un pulsante per voce (`partials/scelta-pulsanti.php`): la rete su cui si
   deposita, quella da cui si preleva, il conto da cui e verso cui si
   trasferisce. **Due impaginazioni**: finche' i pulsanti stanno in una o due
   righe vanno a capo come una griglia qualunque; **dalla terza riga** la fila
   diventa una barra che scorre in orizzontale, alta un pulsante, con le
   frecce ai lati.

   Il confine e' li' perche' due righe si leggono tutte insieme - si vede
   l'offerta e si sceglie - mentre dalla terza la scelta comincia a mangiarsi
   la scheda: le reti sono fino a quarantuno e il modal e' largo cinquecento
   pixel, cioe' cinque o sei righe di pulsanti. Quante righe servirebbero
   **lo misura lo script** sulla pagina, non un breakpoint: dipende da quante
   voci ci sono e da quanto sono lunghi i loro nomi, non dalla larghezza
   dello schermo da sola.

   A capo e' lo stato di partenza, quindi senza JavaScript resta la griglia:
   le frecce non compaiono e non serve saper scorrere niente.

   Le frecce non scorrono: scelgono la voce successiva o la precedente (lo fa
   lo script). Scorrere e' del dito e del trackpad. */
.crm-scelta-barra {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* `min-width: 0` e' quello che permette alla lista di stare nello spazio che
   resta fra le due frecce: senza, un elemento flex non scende sotto la
   larghezza del suo contenuto - che in `nowrap` e' la fila intera delle voci -
   e la barra sfonderebbe il modal invece di scorrere.

   `position: relative` serve allo script: con la lista come offsetParent,
   l'`offsetTop` di un pulsante dice su quale riga e' finito (e' cosi' che si
   contano le righe) e il suo `offsetLeft` la posizione nella fila, da
   confrontare con `scrollLeft` per portarlo in vista. */
.crm-scelta-lista {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Dalla terza riga: una fila sola che scorre. La mette lo script, che ha
   contato le righe che servirebbero andando a capo. */
.crm-scelta-lista-scorre {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Scorrimento col dito senza inerzia spezzata su iOS. */
    -webkit-overflow-scrolling: touch;
    /* Lo usano `scrollIntoView` e le frecce: la rete scelta arriva scorrendo,
       non comparendo di colpo da un lato. */
    scroll-behavior: smooth;
    /* La barra di scorrimento non si mostra: sotto una fila di pulsanti alti
       trenta pixel e' una striscia che sembra un bordo, e per chi non usa il
       dito ci sono le frecce. Lo scorrimento resta, con il trackpad e con la
       rotella in orizzontale. */
    scrollbar-width: none;
}

.crm-scelta-lista-scorre::-webkit-scrollbar {
    display: none;
}

/* I pulsanti non si stringono e il loro nome non si spezza, in nessuna delle
   due impaginazioni: una voce il cui nome e' stato mandato a capo non si
   legge, ed e' proprio il nome della rete - o del conto - la cosa da non
   sbagliare. */
.crm-scelta-lista > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Le frecce restano larghe quanto la loro icona anche quando la fila le
   stringe. */
.crm-scelta-freccia {
    flex: 0 0 auto;
    padding-left: .35rem;
    padding-right: .35rem;
}

/* --- Tour guidati: Shepherd nel tema del CRM --------------------------------
 *
 * `shepherd.css` e' il foglio del pacchetto ed e' tutto in tema chiaro: fondo
 * bianco, testi neri, pulsanti blu. Non si modifica la' - tornerebbe com'era
 * al primo aggiornamento, com'e' successo con l'@import dei font di Skote - e
 * si rimette qui, che e' caricato dopo. I selettori sono gli stessi che
 * scrive il pacchetto: a specificita' pari vince l'ultimo, cioe' questo.
 *
 * Nessun colore e' scritto a mano: vengono dalle variabili del tema, quindi
 * una palette nuova se li porta dietro e il tema chiaro continua a
 * funzionare.
 *
 * L'overlay resta quello del pacchetto - nero al 50%, come il backdrop dei
 * modal di Bootstrap: quel che fa leggere un passo non e' quanto scurisce la
 * pagina, e' il ritaglio che lascia il bersaglio alla sua luce.
 */

/* Il popup e' la **terza superficie** (quella delle mini card e dei campi) e
   non quella delle card: deve staccarsi dalla pagina e dalla card su cui
   galleggia, e queste sono tre fondi diversi.

   **E' semitrasparente**, perche' un tour spiega quel che gli sta sotto e un
   pannello opaco lo copre: cosi' si vede che c'e' una pagina dietro, e la
   card che il passo sta nominando non sparisce del tutto. La trasparenza va
   **col `backdrop-filter`**: senza la sfocatura, il testo del popup finirebbe
   sopra il testo della pagina e non si leggerebbe nessuno dei due. Dove il
   filtro non c'e' resta la sola trasparenza, che e' un degrado e non un
   difetto.

   Il **filo d'oro** sul bordo e' quello che lo tiene insieme su un fondo nero
   - una superficie semitrasparente su una pagina nera non ha un contorno -
   ed e' lo stesso idioma delle card di un'offerta, dove i fili sono
   `rgba(var(--bs-primary-rgb), ...)`: non e' oro pieno su una superficie, che
   la regola del tema non vuole, e' un bordo. Nel tema chiaro l'oro su bianco
   resta a basso contrasto, come in tutto il resto del CRM: la' lo stacco lo
   fanno la superficie e l'ombra. */
.shepherd-element {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(var(--bs-tertiary-bg-rgb), .82);
    border: 1px solid rgba(var(--bs-primary-rgb), .35);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}

.shepherd-content {
    border-radius: var(--bs-border-radius);
}

/* --- La freccia: due fili d'oro e nessun fondo ----------------------------
 *
 * Nel pacchetto e' un quadrato ruotato di 45 gradi e **pieno del colore del
 * popup**: su fondo nero diventava un grigio scuro su nero, cioe' il punto
 * del passo - *dove* sta guardando - era la cosa che si vedeva meno.
 *
 * Il fondo adesso non ce l'ha affatto, e sono i **due lati esterni** a
 * disegnare la punta, in oro. Due ragioni, e la seconda e' quella che decide:
 *
 * - su nero due fili d'oro si vedono, un quadrato grigio no;
 * - con il popup semitrasparente un quadrato **pieno** si vedrebbe anche per
 *   la sua meta' interna, che sta sopra il fondo del popup: comparirebbe una
 *   losanga piu' opaca dentro il riquadro, accanto al bordo. Senza fondo non
 *   c'e' niente da sovrapporre, e il bordo del popup si vede attraverso la
 *   base della punta invece di essere tagliato da lei.
 *
 * Quali due lati siano quelli esterni dipende da **dove sta il popup**
 * rispetto al bersaglio, e lo dice `data-popper-placement`. Ruotando di 45
 * gradi l'angolo in alto a sinistra del quadrato finisce in **alto**, quello
 * in alto a destra a **destra**, e cosi' via: da qui le quattro coppie.
 */
.shepherd-arrow:before,
.shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before {
    background: transparent;
    border: 0 solid rgba(var(--bs-primary-rgb), .75);
}

/* Popup sopra il bersaglio: la punta guarda in basso. */
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow:before {
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* Popup sotto: la punta guarda in alto. */
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow:before {
    border-left-width: 1px;
    border-top-width: 1px;
}

/* Popup a sinistra: la punta guarda a destra. */
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow:before {
    border-right-width: 1px;
    border-top-width: 1px;
}

/* Popup a destra: la punta guarda a sinistra. */
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow:before {
    border-bottom-width: 1px;
    border-left-width: 1px;
}

/* Con un titolo il pacchetto tinge l'intestazione di grigio chiaro e tinge
   della stessa tinta la freccia, quando il popup sta sotto il bersaglio. Qui
   l'intestazione non e' una fascia colorata ma una riga separata da un filo,
   quindi la freccia torna del fondo del popup. */
.shepherd-has-title .shepherd-content .shepherd-header {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

.shepherd-title {
    align-items: center;
    color: var(--bs-heading-color);
    font-weight: 500;
    gap: .5rem;
}

/* Il marchio nel titolo di un passo (oggi il solo benvenuto): il pacchetto
   fa del titolo un `display: flex`, quindi il simbolo e la frase sono due
   elementi affiancati e lo stacco lo da' il `gap` di sopra. L'altezza e'
   nel markup, perche' e' una proporzione del file e non un gusto (vedi "Il
   marchio"); qui resta il solo `flex-shrink`, che impedisce al simbolo di
   schiacciarsi quando il titolo va stretto. */
.shepherd-title img {
    flex: 0 0 auto;
}

/* --- Il passo piu' grande: il benvenuto -----------------------------------
 *
 * Il popup del pacchetto e' largo 400px, che e' la misura di un fumetto
 * appeso a una card. Il benvenuto non e' appeso a niente - sta in mezzo allo
 * schermo, perche' non ha un bersaglio - e porta la frase piu' lunga del
 * tour: alla misura degli altri sarebbe una colonna di sette righe.
 *
 * `max-width` e non `width`: il popup e' gia' `width: 100%`, quindi su uno
 * schermo stretto resta quello che ci sta. Il titolo e il testo crescono con
 * lui, perche' un riquadro piu' largo con dentro lo stesso corpo si
 * leggerebbe solo come un riquadro mezzo vuoto.
 */
.shepherd-element.crm-tour-grande {
    max-width: 34rem;
}

.crm-tour-grande .shepherd-title {
    font-size: 1.15rem;
}

.crm-tour-grande .shepherd-text {
    font-size: 1.05rem;
    line-height: 1.5;
    padding: 1rem;
}

.shepherd-text {
    color: var(--bs-body-color);
}

/* La X di uscita: attenuata a riposo e in evidenza al passaggio, come ogni
   comando secondario del CRM. I due selettori sono quelli del pacchetto, che
   per il caso col titolo e' piu' specifico. */
.shepherd-cancel-icon,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
    color: var(--bs-secondary-color);
}

.shepherd-cancel-icon:hover,
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
    color: var(--bs-emphasis-color);
}

/* I pulsanti sono l'azione del passo, quindi sono **oro con l'inchiostro
   sopra**, come ogni pulsante primario del tema (vedi "Colori"). Un tour puo'
   comunque passare le classi `btn btn-primary` del tema con l'opzione
   `classes` dei suoi pulsanti: `shepherd.css` e' caricato prima di
   `bootstrap.min.css`, quindi la' vince `.btn`. */
.shepherd-button {
    background: var(--bs-primary);
    border-radius: var(--bs-border-radius);
    color: var(--crm-su-primario);
}

/* Al passaggio il pulsante si scurisce, che e' il verso in cui si scurisce
   anche `.btn-primary`. E' un filtro e non un colore perche' la sfumatura di
   hover la calcola il compilatore e non e' esposta come variabile: cosi' la
   regola vale per qualunque palette. */
.shepherd-button:not(:disabled):hover {
    background: var(--bs-primary);
    color: var(--crm-su-primario);
    filter: brightness(.9);
}

/* Spento, il pulsante lo deve sembrare: il pacchetto cambia solo il cursore,
   e un "Avanti" che non risponde al clic si legge come una pagina rotta. */
.shepherd-button:disabled {
    opacity: .65;
}

/* Il pulsante secondario - l'"indietro" di un passo - e' bordato e neutro:
   di azione in un passo ce n'e' una, e due pulsanti d'oro affiancati non
   direbbero quale. */
.shepherd-button.shepherd-button-secondary {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

/* Il contatore dei passi ("3 / 6"), che lo script del tour mette
   nell'intestazione subito prima della X. Il titolo e' `flex: 1 0 auto`,
   quindi lo spinge da se' a destra: qui serve solo lo stacco dalla X e il
   peso di un dato secondario - quel che si legge e' il titolo del passo, non
   quanto manca. */
.shepherd-progress {
    color: var(--bs-secondary-color);
    font-size: .8rem;
    margin-right: .75rem;
    white-space: nowrap;
}

/* ===========================================================================
   La chatbox dell'assistenza
   ===========================================================================
   La bolla in basso a destra e il suo pannello (vedi
   `views/partials/chat-widget.php`). Sta fuori da `#page-content`, quindi una
   conversazione aperta sopravvive al cambio di sezione.

   **Nessun colore e' scritto a mano**: l'oro e' di cio' su cui si agisce - la
   bolla e il pulsante che manda - le superfici sono le tre del tema, e i
   messaggi si distinguono per **posizione e etichetta** e non per colore. Un
   fumetto d'oro per il cliente e uno azzurro per l'IA direbbero che li' si
   agisce, e in una chat non si agisce su niente: si legge.

   L'oro che **non** e' un'azione sono i **bordi** della marca: il contorno del
   pannello, quello della sua barra e il filo sui messaggi dell'operatore. Un
   bordo d'oro la marca lo scrive - lo fanno le card di un'offerta e il popup
   dei tour - una superficie tinta d'oro no. */

.crm-chat {
    bottom: 1.5rem;
    /* Sopra il contenuto e sotto i modal del tema (1055): un pannello
       dell'assistenza non deve coprire il dialogo di conferma che apre. */
    z-index: 1040;
    position: fixed;
    right: 1.5rem;
}

/* La bolla: rotonda, della misura di un pollice. Il badge dei non letti le
   sta sull'angolo, come quello della campanella nella topbar.

   **E' un `btn-outline-primary`**, cioe' lo stesso pulsante con cui si scegle
   la rete di un deposito: oro sul bordo e sull'icona, e oro pieno col dito
   sopra. Il fondo pero' e' **la superficie della card** e non il trasparente
   di quei pulsanti, ed e' l'unica differenza: quelli stanno su una scheda, la
   bolla galleggia su qualunque contenuto - sopra una tabella, trasparente,
   l'icona si leggerebbe in mezzo alle righe. Si passa dalla variabile del
   pulsante e non da un `background-color`, cosi' lo stato premuto e quello col
   dito sopra restano quelli del tema. */
.crm-chat-bolla {
    --bs-btn-bg: var(--bs-secondary-bg);
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    display: flex;
    height: 3.25rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 3.25rem;
}

.crm-chat-badge {
    border-radius: 1rem;
    font-size: .625rem;
    padding: .15rem .35rem;
    position: absolute;
    right: -.15rem;
    top: -.15rem;
}

/* Il pannello. Sta **sopra** la bolla e non al suo posto, cosi' la bolla
   resta il modo di chiuderlo.

   **L'altezza e' una misura e non un massimo**, ed e' il contrario di come
   era: con il solo `max-height` il pannello era alto quanto i messaggi che
   aveva dentro - aperto su una conversazione vuota era una striscia, e il suo
   bordo superiore saliva a ogni riga nuova. Un riquadro che cambia misura
   mentre si scrive e' un riquadro che si muove sotto gli occhi, e la prima
   cosa che un cliente vede aprendo l'assistenza non deve essere una casella.

   Il tetto resta ed e' lo **schermo**: `100vh` meno la bolla (3.25rem), il
   margine da cui si stacca (1.5rem) e un po' d'aria sopra - cosi' su un
   portatile basso il pannello si accorcia da se' invece di uscire dalla
   finestra. */
/* **Il pannello ha una superficie sua**, piu' alta di quella delle card: e'
   la terza del tema (`--bs-tertiary-bg`, quella delle mini card e dei campi),
   semitrasparente e con la sfocatura dietro, piu' il filo d'oro sul bordo e
   un'ombra profonda.

   E' la **ricetta del popup dei tour** (`.shepherd-element`), e lo e' perche'
   il problema e' lo stesso: un oggetto che galleggia su una pagina nera. Qui
   era peggio che la' - il pannello e' una `.card`, quindi il suo fondo era
   `--bs-secondary-bg`, **lo stesso delle card della pagina**: aperto sopra
   una card, e le pagine sono fatte di card, il fondo non era simile, era
   identico. Non c'era nemmeno un bordo (in questo tema le card non ne hanno:
   `--bs-card-border-width` e' 0) e l'ombra era nera su un nero, cioe' niente -
   la stessa cosa che la palette dice dell'ombra di Skote.
   Quel che lo stacca adesso non e' il contorno ma l'**area**: la terza
   superficie e' piu' chiara di qualunque card ci sia sotto.

   La trasparenza va **col `backdrop-filter`**: senza la sfocatura il testo
   della conversazione finirebbe sopra quello della pagina e non si
   leggerebbe nessuno dei due. Dove il filtro non c'e' resta la sola
   trasparenza, che e' un degrado e non un difetto.

   La barra in alto e la casella in fondo restano **opache** (`.card-header` e
   `.card-footer` hanno il fondo della terza superficie): i due capi sono
   solidi e in mezzo si vede attraverso, che e' il modo in cui si legge che
   quella e' la conversazione e quelli sono i comandi. */
.crm-chat-pannello {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(var(--bs-tertiary-bg-rgb), .82);
    border: 1px solid rgba(var(--bs-primary-rgb), .36);
    bottom: 4.25rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    height: 36rem;
    margin-bottom: 0;
    max-height: calc(100vh - 7rem);
    position: absolute;
    right: 0;
    width: 22rem;
}

/* **La barra di controllo ha un contorno d'oro**: il riquadro in cui stanno il
   titolo, chi sta rispondendo e la "x" che chiude.

   E' un **contorno e non un filo sfumato**: quella barra e' un riquadro dentro
   il pannello e il bordo ne dice i quattro lati, mentre il filo della landing
   (`.crm-conto-tipo::before`) e' un segno su un capo solo - sta bene al bordo
   superiore di una card, non intorno a una barra.

   L'oro e' quello **appena accennato** dei bordi di questa marca, lo stesso
   `.36` del bordo di una card di un'offerta, e non oro pieno: l'oro in questo
   tema e' di cio' su cui si agisce, e un'intestazione non e' un'azione - un
   **bordo** invece la marca lo scrive, ed e' quel che la regola ammette (vedi
   il filo sui messaggi dell'operatore e il bordo del popup dei tour).

   **Dei quattro lati ne disegna uno**: gli altri tre sono quelli del
   pannello, che ha lo stesso filo d'oro - la barra e' il primo figlio e sta
   flush con i suoi bordi, quindi un contorno suo ci starebbe un pixel dentro
   e si vedrebbe una cornice doppia. Qui resta percio' il solo lato di sotto,
   che e' quello che il pannello non ha, e la barra risulta incorniciata.
   `.card-header` un `border-bottom` ce l'ha gia', ma di larghezza zero: in
   questo tema le card non hanno bordi. */
.crm-chat-pannello .card-header {
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), .36);
}

/* Lo storico si prende quel che resta fra l'intestazione e la casella, e
   scorre dentro quello spazio. `min-height: 0` non e' di troppo: un figlio di
   un flex non scende sotto l'altezza del suo contenuto senza quella riga, e
   senza di essa il pannello si allungherebbe oltre il suo tetto invece di far
   scorrere i messaggi. */
.crm-chat-pannello .crm-chat-storico {
    flex: 1 1 auto;
    min-height: 0;
}

/* Sul telefono prende la larghezza che c'e', meno i due margini: a 22rem
   fissi sborderebbe. */
@media (max-width: 575.98px) {
    .crm-chat {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    .crm-chat-bolla {
        margin-left: auto;
    }

    .crm-chat-pannello {
        width: auto;
        left: 0;
    }
}

/* Lo storico scorre, e il resto del pannello no: l'intestazione dice chi
   risponde e il fondo tiene la casella, e nessuna delle due deve andare via
   scorrendo i messaggi. */
.crm-chat-storico {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    padding: .75rem;
}

.crm-chat-msg {
    max-width: 85%;
}

/* Il fumetto. La superficie delle **card** (`--bs-secondary-bg`), che qui e'
   un passo **sotto** quella del pannello: il pannello e' la terza superficie
   (vedi sopra), e un fumetto dello stesso fondo ci sparirebbe dentro.

   Era il contrario - fumetto sulla terza, pannello sulla seconda - e si e'
   rovesciato con il pannello: quel che conta e' che i due fondi restino uno
   piu' alto dell'altro, non quali dei tre siano.

   **E' lo stesso per tutti**, cliente compreso: a dire chi parla sono la
   posizione e l'etichetta (vedi sotto), non il colore. Il fumetto del cliente
   aveva un fondo suo, che era proprio quello su cui sono finiti tutti. */
.crm-chat-testo {
    background-color: var(--bs-secondary-bg);
    border-radius: .5rem;
    font-size: .8125rem;
    padding: .5rem .625rem;
    /* I ritorni a capo di quel che ha scritto il cliente, o il modello, si
       vedono: il testo entra con `textContent` - mai con innerHTML, perche'
       non e' markup nostro - e a mandarlo a capo ci pensa il CSS. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* Chi ha scritto e quando, piccolo e attenuato: e' quel che si guarda solo
   quando serve, e il messaggio e' quel che si legge. */
.crm-chat-chi {
    color: var(--bs-secondary-color);
    font-size: .6875rem;
    margin-bottom: .125rem;
}

/* **Il cliente sta a destra**, e i suoi sono i soli fumetti spostati: in una
   chat la posizione dice chi parla meglio di qualunque colore, e una fila
   tutta allineata a sinistra si leggerebbe come un log. */
.crm-chat-msg-cliente {
    align-self: flex-end;
}

.crm-chat-msg-cliente .crm-chat-chi {
    text-align: right;
}

/* Un messaggio dell'**operatore** porta un filo d'oro sul bordo sinistro: e'
   il solo oro di questo pannello che non e' un'azione, e dice la cosa che in
   una coda di risposte conta - che da qui ha risposto una persona. Il nome di
   quella persona il cliente non lo legge (vedi "Chi risponde non ha un nome"),
   quindi il filo e' l'unica cosa che lo dice senza leggere l'etichetta. */
.crm-chat-msg-operatore .crm-chat-testo {
    border-left: 2px solid rgba(var(--bs-primary-rgb), .55);
}

/* Un messaggio di **sistema** non e' di nessuno: nessun fumetto, al centro,
   attenuato. E' la riga che dice che la chat e' passata a un operatore, e si
   legge come un fatto e non come una risposta. */
.crm-chat-msg-sistema {
    align-self: center;
    max-width: 100%;
    text-align: center;
}

.crm-chat-msg-sistema .crm-chat-chi {
    display: none;
}

.crm-chat-msg-sistema .crm-chat-testo {
    background-color: transparent;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    padding: .25rem 0;
}

/* **I tre punti** mentre la risposta si sta scrivendo (`mostraDigita()` in
   `crm.js`): un fumetto come gli altri - stessa superficie, stesso angolo -
   con dentro tre punti invece del testo, perche' quel che dice e' "qui sta per
   arrivare un messaggio".

   E' il solo fumetto **larga quanto il suo contenuto**: gli altri arrivano
   all'85% del pannello perche' dentro c'e' del testo che va a capo, e tre
   punti in un riquadro largo mezzo pannello si leggerebbero come un messaggio
   vuoto. */
.crm-chat-punti {
    display: flex;
    gap: .25rem;
    width: fit-content;
}

.crm-chat-punti span {
    animation: crm-chat-punti 1.2s infinite ease-in-out;
    background-color: var(--bs-secondary-color);
    border-radius: 50%;
    height: .3125rem;
    width: .3125rem;
}

/* Sfasati, altrimenti i tre punti sarebbero un punto solo che lampeggia. */
.crm-chat-punti span:nth-child(2) {
    animation-delay: .2s;
}

.crm-chat-punti span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes crm-chat-punti {
    0%, 60%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* Chi ha chiesto di non vedere animazioni vede **tre punti fermi**: dicono
   comunque che una risposta sta arrivando, che e' quel che conta, e il resto
   lo dice l'etichetta che il lettore di schermo legge. */
@media (prefers-reduced-motion: reduce) {
    .crm-chat-punti span {
        animation: none;
        opacity: .6;
    }
}

/* La casella cresce con quel che si scrive (lo script la misura) e non si
   trascina dall'angolo: il pannello ha la sua larghezza, e un ridimensionamento
   a mano la sfonderebbe. */
.crm-chat [data-chat-testo] {
    max-height: 6rem;
    resize: none;
}

/* Lo storico nella scheda di un ticket (lato operatore): gli **stessi
   fumetti** del widget del cliente - e' la stessa conversazione, e disegnarla
   in due modi vorrebbe dire due letture della stessa cosa - ma piu' alto e
   larga tutta la card, perche' l'operatore la legge tutta prima di decidere
   se prenderla in carico.

   Il fondo e' quello della pagina e non della card: lo storico e' un riquadro
   bordato **dentro** una card, come i conti nella card della dashboard, e due
   superfici uguali una sull'altra non si staccherebbero. */
.crm-chat-storico-admin {
    background-color: var(--bs-body-bg);
    max-height: 28rem;
    padding: .75rem;
}

/* Qui i fumetti possono essere piu' larghi: la card e' larga due terzi di
   pagina, e l'85% del widget lascerebbe una colonna di testo in mezzo al
   vuoto. */
.crm-chat-storico-admin .crm-chat-msg {
    max-width: 92%;
}