/* ============================================================================
   XReach — Sistema di interfaccia
   Generato da AB Studio 1.0.0

   Ordine della cascata (dal più debole al più forte):
       bootstrap 5.3 → devexpress → app.css (questo file) → theme.css (marchio)

   Questo foglio non contiene colori di marchio: li prende da theme.css tramite
   i token --brand-*. Per vestire l'applicazione di un cliente si tocca quello,
   non questo.

   PRINCIPIO. Un gestionale non è una dashboard: è uno strumento che qualcuno
   guarda otto ore al giorno. Di conseguenza niente ombre diffuse, niente
   pastelli decorativi, niente angoli morbidi da prodotto consumer. Superfici
   di carta, filetti sottili, cifre tabellari, e il colore usato come
   informazione — mai come decorazione.
   ============================================================================ */


/* ============================================================================
   1. TOKEN
   ============================================================================ */

:root {

    /* ---- Marchio ----------------------------------------------------------
       Valori di ripiego: theme.css li ridefinisce tutti. Stanno qui perché
       l'applicazione resti leggibile anche se quel foglio non viene caricato. */

    --brand-primario:        #1d4f86;
    --brand-primario-scuro:  #173e6b;
    --brand-primario-chiaro: #2f6aa8;
    --brand-navy:            #8b0000;
    --brand-navy-scuro:      #6b0000;
    --brand-azzurro:         #e8b9b9;
    --brand-accento:         #d9a441;
    --brand-negativo:        #a3122b;
    --brand-rosso:           #c2192f;
    --brand-verde:           #3f7a34;
    --brand-ambra:           #d99a2b;
    --brand-ambra-testo:     #8a5a00;

    --brand-font: "Segoe UI Variable Text", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --brand-font-titoli: "Segoe UI Variable Display", "Segoe UI Semibold",
                         "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --brand-font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace,
                       "Liberation Mono", monospace;

    /* ---- Carta e inchiostro ----------------------------------------------
       Neutri freddi, virati verso il blu del marchio: un grigio caldo tipo
       Office accanto a un blu istituzionale sporca. Il contrasto del testo
       primario sulla carta è 14:1, quello del secondario 5.9:1. */

    --ab-carta:         #ffffff;   /* superfici di lavoro */
    --ab-fondo:         #f2f6fb;   /* sfondo dell'area di contenuto */
    --ab-fondo-2:       #e9eff6;   /* testate di tabella, barre strumenti */
    --ab-fondo-3:       #dde6f0;   /* righe di totale, stati premuti */
    --ab-linea:         #d4dee9;   /* filetto standard */
    --ab-linea-forte:   #b3c3d4;   /* separatore di sezione, bordo dei campi */

    --ab-inchiostro:    #1b2836;   /* testo primario */
    --ab-inchiostro-2:  #5a6675;   /* testo secondario */
    --ab-inchiostro-3:  #7c8797;   /* etichette, icone, segnaposto */

    /* ---- Veli --------------------------------------------------------------
       Fondi tenui, tarati perché il testo del colore corrispondente ci stia
       sopra ad almeno 5:1. Sono fondi, non decorazioni. */

    --ab-velo-blu:      #e7eefa;
    --ab-velo-negativo: #fbecee;
    --ab-velo-verde:    #e9f2e4;
    --ab-velo-ambra:    #fff3d6;
    --ab-velo-grigio:   #edf1f6;

    /* Bordi dei veli, un gradino più marcati del velo stesso. */
    --ab-bordo-verde:    #c2dab6;
    --ab-bordo-negativo: #ebc2c6;
    --ab-bordo-ambra:    #e8d09a;

    /* ---- Tipografia --------------------------------------------------------
       Base 13px: densa ma leggibile per ore. Ogni gradino ha un compito, non
       è una progressione geometrica astratta. */

    --t-micro:      10.5px;  /* occhielli, intestazioni di colonna */
    --t-mini:       11.5px;  /* seconda riga dentro una cella */
    --t-tabella:    12.5px;  /* corpo delle tabelle dense */
    --t-base:         13px;  /* interfaccia */
    --t-medio:        15px;  /* titoli di scheda */
    --t-titolo:       20px;  /* titolo di pagina */
    --t-cifra:        26px;  /* numero di una targa */
    --t-cifra-max:    32px;  /* numero della targa principale */

    /* ---- Spaziature — passo 4px ------------------------------------------- */
    --s-1: 2px;  --s-2: 4px;  --s-3: 6px;  --s-4: 8px;
    --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px;

    /* ---- Geometria ---------------------------------------------------------
       Raggi quasi nulli: un raggio grande dice "app", qui serve "strumento". */
    --r-1: 2px;   /* campi, badge */
    --r-2: 3px;   /* schede, pulsanti, finestre */

    /* ---- Cromatura ---------------------------------------------------------
       Le superfici piene che ospitano testo chiaro: testata di una finestra,
       di un pannello, targhetta della testata di pagina. Sono un token a parte
       perché in modalità scura non possono seguire --brand-navy, che lì
       diventa chiaro per fare da colore dei titoli.
       --ab-su-pieno è il testo su qualsiasi fondo pieno colorato: in scuro i
       colori si schiariscono e il bianco sopra non reggerebbe il contrasto. */
    /* Anello di messa a fuoco, derivato dal primario: un rgba fisso resterebbe
       blu anche su una veste verde o bordeaux. */
    --ab-focus: color-mix(in srgb, var(--brand-primario) 30%, transparent);

    --ab-cromatura:  var(--brand-navy);
    --ab-su-cromatura: #ffffff;
    --ab-su-pieno:     #ffffff;

    /* ---- Elevazione --------------------------------------------------------
       Una sola ombra in tutto il sistema, riservata a ciò che galleggia
       davvero: menu, finestre, notifiche. Schede e tabelle non galleggiano. */
    --ab-ombra-menu: 0 6px 20px rgba(16, 42, 77, .16);
    --ab-ombra-finestra: 0 12px 40px rgba(16, 42, 77, .22);

    /* ---- Metrica -----------------------------------------------------------
       L'altezza di riga è un token perché tabelle Bootstrap e griglie
       DevExpress devono misurare uguale: altrimenti l'app parla due lingue. */
    --riga-h: 30px;
    --riga-h-compatta: 26px;
    --rail-width: 76px;
    --header-height: 48px;

    /* ---- Ponte verso i nomi storici ---------------------------------------
       Le pagine generate, i moduli e i fogli delle RCL usano ancora i token
       --o365-*. Restano validi: sono alias del sistema, non una seconda
       tavolozza. Ridefinire un --ab-* qui sopra li aggiorna tutti. */

    --o365-primary:       var(--brand-primario);
    --o365-primary-dark:  var(--brand-primario-scuro);
    --o365-primary-light: var(--ab-velo-blu);
    --o365-accent:        var(--brand-accento);
    --o365-blue:          var(--brand-primario);

    --o365-red:    var(--brand-negativo);
    --o365-green:  var(--brand-verde);
    --o365-yellow: var(--brand-ambra);
    --o365-orange: var(--brand-ambra-testo);
    --o365-purple: var(--brand-navy);
    --o365-teal:   var(--brand-primario-chiaro);

    --o365-white:    var(--ab-carta);
    --o365-gray-10:  var(--ab-fondo);
    --o365-gray-20:  var(--ab-fondo-2);
    --o365-gray-30:  var(--ab-linea);
    --o365-gray-40:  var(--ab-linea);
    --o365-gray-50:  var(--ab-linea-forte);
    --o365-gray-60:  var(--ab-linea-forte);
    --o365-gray-90:  var(--ab-inchiostro-3);
    --o365-gray-110: var(--ab-inchiostro-3);
    --o365-gray-130: var(--ab-inchiostro-2);
    --o365-gray-160: var(--ab-inchiostro);
    --o365-gray-190: var(--brand-navy);

    --o365-border:         var(--ab-linea);
    --o365-text-primary:   var(--ab-inchiostro);
    --o365-text-secondary: var(--ab-inchiostro-2);

    --tint-blue-bg:   var(--ab-velo-blu);
    --tint-green-bg:  var(--ab-velo-verde);
    --tint-yellow-bg: var(--ab-velo-ambra);
    --tint-red-bg:    var(--ab-velo-negativo);
    --tint-purple-bg: var(--ab-velo-blu);
    --tint-teal-bg:   var(--ab-velo-blu);
    --tint-orange-bg: var(--ab-velo-ambra);

    --yellow-text:  var(--brand-ambra-testo);
    --shadow-color: rgba(16, 42, 77, .08);
    --overlay-bg:   rgba(16, 42, 77, .38);
    --surface-bg:   var(--ab-fondo);
    --header-bg:    var(--brand-navy-scuro);

    /* Barra comandi delle schede entità (EntityFormCommandBar). */
    --commandbar-surface: var(--ab-fondo-2);
    --commandbar-border:  var(--ab-linea);
    --commandbar-accent:  var(--brand-primario);
    --commandbar-muted:   var(--ab-inchiostro-3);

    /* ---- Ponte verso Bootstrap ---------------------------------------------
       Bootstrap legge queste variabili per link, bordi e colori di servizio. */
    --bs-primary:          var(--brand-primario);
    --bs-danger:           var(--brand-rosso);
    --bs-success:          var(--brand-verde);
    --bs-warning:          var(--brand-ambra);
    --bs-body-bg:          var(--ab-carta);
    --bs-body-color:       var(--ab-inchiostro);
    --bs-border-color:     var(--ab-linea);
    --bs-secondary-color:  var(--ab-inchiostro-2);
    --bs-link-color:       var(--brand-primario-chiaro);
    --bs-link-hover-color: var(--brand-primario);
    --bs-focus-ring-color: var(--ab-focus);
    --bs-border-radius:    var(--r-2);
    --bs-border-radius-sm: var(--r-1);
    --bs-border-radius-lg: var(--r-2);
}


/* ============================================================================
   2. MODALITÀ SCURA
   ----------------------------------------------------------------------------
   Si ridefiniscono soltanto i token: tutto il resto del foglio è scritto su
   var(), quindi si ricolora da sé. La carta diventa un grigio freddo scuro,
   mai nero pieno, e i filetti restano visibili — in scuro un bordo troppo
   tenue sparisce e la tabella perde la griglia.
   ============================================================================ */

html[data-theme="dark"] {
    color-scheme: dark;

    --brand-primario:        #5f9fdd;
    --brand-primario-scuro:  #7cb2e6;
    --brand-primario-chiaro: #8bbcea;
    --brand-navy:            #cfe0f2;   /* i titoli: chiari su fondo scuro */
    --brand-navy-scuro:      #10151d;   /* la cromatura della testata */
    --brand-azzurro:         #6d86a3;
    --brand-accento:         #e0a944;
    --brand-negativo:        #e08a94;
    --brand-rosso:           #e5707f;
    --brand-verde:           #7cc06a;
    --brand-ambra:           #e0a944;
    --brand-ambra-testo:     #e8c883;

    --ab-carta:         #1e2430;
    --ab-fondo:         #161b23;
    --ab-fondo-2:       #232b38;
    --ab-fondo-3:       #2c3543;
    --ab-linea:         #303a49;
    --ab-linea-forte:   #445265;

    --ab-inchiostro:    #e6ebf2;
    --ab-inchiostro-2:  #a9b4c4;
    --ab-inchiostro-3:  #808c9d;

    --ab-velo-blu:      #1c2c40;
    --ab-velo-negativo: #3a2126;
    --ab-velo-verde:    #1f2e1d;
    --ab-velo-ambra:    #33280f;
    --ab-velo-grigio:   #232b38;

    --ab-bordo-verde:    #35512f;
    --ab-bordo-negativo: #5a3239;
    --ab-bordo-ambra:    #574318;

    --ab-ombra-menu:     0 6px 20px rgba(0, 0, 0, .45);
    --ab-ombra-finestra: 0 12px 40px rgba(0, 0, 0, .55);

    --ab-cromatura:    #28313f;
    --ab-su-cromatura: #e6ebf2;
    --ab-su-pieno:     #10202f;

    --shadow-color: rgba(0, 0, 0, .35);
    --overlay-bg:   rgba(0, 0, 0, .6);
    --header-bg:    var(--brand-navy-scuro);
}


/* ============================================================================
   3. BASE
   ============================================================================ */

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--brand-font);
    font-size: var(--t-base);
    line-height: 1.45;
    color: var(--ab-inchiostro);
    background: var(--ab-fondo);
    /* Le cifre non devono mai ballare fra una riga e l'altra: tabellari
       ovunque, per default, in tutta l'applicazione. */
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }

::selection { background: var(--brand-azzurro); color: var(--brand-navy); }

/* Su uno strumento che si usa molto da tastiera il focus è funzione, non
   dettaglio: 2px pieni, mai outline:none. */
:focus-visible {
    outline: 2px solid var(--brand-primario-chiaro);
    outline-offset: 1px;
    border-radius: var(--r-1);
}

a, .link-primary { color: var(--brand-primario-chiaro); text-decoration: none; }
a:hover, .link-primary:hover { color: var(--brand-primario); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font-titoli);
    color: var(--brand-navy);
    letter-spacing: -.01em;
}

h5 { font-size: var(--t-medio); font-weight: 600; }
h6 { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; }

code, kbd, samp, .mono {
    font-family: var(--brand-font-mono);
    font-size: .92em;
    color: var(--brand-navy);
    background: none;
    padding: 0;
}

/* L'occhiello: microetichetta maiuscola spaziata che precede un valore o un
   blocco. È la firma tipografica del sistema e ricorre ovunque. */
.occhiello {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ab-inchiostro-3);
}


/* ============================================================================
   4. GUSCIO — testata, rail, contenuto
   ============================================================================ */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-header {
    height: var(--header-height);
    min-height: var(--header-height);
    background: var(--brand-navy-scuro);
    display: flex;
    align-items: center;
    padding: 0 var(--s-6);
    gap: var(--s-5);
    z-index: 100;
    /* Filetto d'accento: unico tratto caldo del guscio, largo 1px. Dice il
       marchio senza bisogno di un logo che non sempre abbiamo. */
    border-bottom: 1px solid var(--brand-accento);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.logo-text {
    font-family: var(--brand-font-titoli);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}

/* La qualifica accanto al nome: il contenuto lo mette theme.css, qui c'è
   solo la forma. Senza quel contenuto la pseudo-regola non disegna nulla. */
.header-logo::after {
    margin-left: var(--s-5);
    padding-left: var(--s-5);
    border-left: 1px solid rgba(185, 205, 228, .35);
    color: var(--brand-azzurro);
    font-size: var(--t-micro);
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-spacer { flex: 1; }

/* ---- Ricerca in testata ---- */
.header-search { max-width: 380px; flex: 1; }

.search-container { position: relative; }

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(185, 205, 228, .8);
    font-size: 13px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 5px 12px 5px 32px;
    border: 1px solid rgba(185, 205, 228, .28);
    border-radius: var(--r-1);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: var(--t-base);
    transition: background-color .12s, color .12s;
}

.search-input::placeholder { color: rgba(185, 205, 228, .75); }

.search-input:focus {
    outline: none;
    background: var(--ab-carta);
    color: var(--ab-inchiostro);
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--brand-accento);
}

.search-input:focus ~ .search-icon { color: var(--ab-inchiostro-3); }

/* ---- Comandi in testata ---- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.header-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--r-1);
    color: var(--brand-azzurro);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background-color .12s, color .12s;
    position: relative;
}

.header-btn:hover { background: rgba(185, 205, 228, .14); color: #fff; }

.header-avatar-btn { padding: 0; width: auto; }

.header-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--r-1);          /* quadrato: coerente col resto */
    background: var(--brand-primario);
    border: 1px solid rgba(185, 205, 228, .45);
    color: var(--ab-su-pieno);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

.header-user { display: flex; align-items: center; }

/* Pastiglia del contatore notifiche sulla campanella. */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--brand-rosso);
    color: var(--ab-su-pieno);
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* ---- Corpo ---- */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ---- Rail laterale ----
   Carta, non grigio: il rail è una sponda del contenuto, non una barra
   d'ombra. Si stacca dal contenuto con un filetto, non con una tinta. */
.app-rail {
    width: var(--rail-width);
    min-width: var(--rail-width);
    background: var(--ab-carta);
    border-right: 1px solid var(--ab-linea);
    overflow-y: auto;
    overflow-x: hidden;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    padding: var(--s-2) 0;
    height: 100%;
}

.rail-item {
    width: var(--rail-width);
    padding: var(--s-4) var(--s-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    color: var(--ab-inchiostro-2);
    cursor: pointer;
    position: relative;
    transition: background-color .12s, color .12s;
    text-decoration: none;
    border: none;
    border-radius: 0;
    background: none;
}

.rail-item i { font-size: 17px; }

.rail-text {
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 70px;
}

.rail-item:hover {
    background: var(--ab-fondo);
    color: var(--brand-navy);
    text-decoration: none;
}

/* La voce corrente è una sola: il focus non deve accendere una seconda voce
   dopo un clic. Si distingue col filetto a sinistra, non col solo colore. */
.rail-item:focus { background: none; color: var(--ab-inchiostro-2); }
.rail-item:focus-visible { background: var(--ab-fondo); }

.rail-item.active {
    background: var(--ab-velo-blu);
    color: var(--brand-primario);
    text-decoration: none;
}

.rail-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-primario);
    border-radius: 0;
}

/* Separatore fra sezioni del rail. */
.rail-separator {
    height: 1px;
    margin: var(--s-3) var(--s-5);
    background: var(--ab-linea);
}

.rail-spacer { flex: 1; }

/* ---- Area di contenuto ---- */
.app-content {
    flex: 1;
    overflow: auto;
    background: var(--ab-fondo);
    padding: var(--s-7) var(--s-8);
}


/* ============================================================================
   5. TESTATA DI PAGINA
   ============================================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
    padding-bottom: var(--s-5);
    /* Il filetto sotto il titolo è la firma del sistema: linea tenue col primo
       tratto in accento. Costa una riga di CSS e non somiglia a nient'altro. */
    border-bottom: 2px solid var(--ab-linea);
    position: relative;
}

.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background: var(--brand-accento);
}

.page-title,
.page-header h2 {
    font-family: var(--brand-font-titoli);
    font-size: var(--t-titolo);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--brand-navy);
    line-height: 1.2;
    margin: 0;
}

.page-subtitle {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ab-inchiostro-3);
    margin: 0 0 3px;
}

/* L'icona quadrata in testata: targhetta istituzionale, non pastiglia
   pastello. Il !important batte le classi .admin-icon-* delle pagine. */
.admin-header-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: var(--ab-cromatura) !important;
    color: var(--ab-su-cromatura) !important;
}

.page-container { max-width: 1280px; }

/* Barra strumenti sopra una tabella o una scheda: grigio di servizio, mai
   una seconda testata colorata. */
.barra-strumenti {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-3) var(--s-5);
    background: var(--ab-fondo-2);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    margin-bottom: var(--s-5);
}

.barra-strumenti .separatore {
    width: 1px;
    height: 20px;
    background: var(--ab-linea-forte);
    margin: 0 var(--s-2);
}

/* Pagina a tutto campo per i progettisti (dashboard e report designer). */
.page-designer {
    margin: calc(var(--s-7) * -1) calc(var(--s-8) * -1);
    padding: var(--s-5);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.page-designer .page-header {
    margin-bottom: var(--s-5);
    padding: 0 var(--s-4) var(--s-4);
}

.page-designer .designer-area {
    position: relative;
    height: calc(100vh - var(--header-height) - 100px);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    overflow: hidden;
}

/* I componenti JS di DevExpress riempiono il contenitore. */
.page-designer .designer-area > div {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}


/* ============================================================================
   6. SUPERFICI — schede, riquadri, pannelli
   ----------------------------------------------------------------------------
   Le schede non galleggiano: nessuna ombra, un filetto e basta. In una pagina
   con dieci riquadri, dieci ombre sono rumore.
   ============================================================================ */

.card,
.o365-card {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    box-shadow: none;
}

.card-header,
.o365-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-6);
    background: var(--ab-fondo-2);
    border-bottom: 1px solid var(--ab-linea);
    font-family: var(--brand-font-titoli);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand-navy);
}

/* Solo il titolo prende l'occhiello: la frase esplicativa accanto resta una
   frase, non un'etichetta. */
.card-header h5,
.card-header h6 {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin: 0;
}

.card-header .small,
.card-header .text-muted,
.o365-card-header .small,
.o365-card-header .text-muted {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--t-mini);
    color: var(--ab-inchiostro-3);
}

.card-body { padding: var(--s-5) var(--s-6); }
.o365-card-body { padding: var(--s-6); }

.card-footer {
    background: var(--ab-fondo);
    border-top: 1px solid var(--ab-linea);
    padding: var(--s-4) var(--s-6);
}

/* ---- Riquadri dell'area di amministrazione ---- */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

.admin-card {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    overflow: hidden;
}

.admin-card:hover { border-color: var(--ab-linea-forte); }

.admin-card-header {
    padding: var(--s-4) var(--s-6);
    border-bottom: 1px solid var(--ab-linea);
    background: var(--ab-fondo-2);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-weight: 700;
    font-size: var(--t-micro);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand-navy);
}

.admin-card-header i { font-size: 15px; color: var(--ab-inchiostro-3); }

.admin-card-body {
    padding: var(--s-4) var(--s-5) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.admin-link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-1);
    text-decoration: none;
    color: var(--ab-inchiostro);
    font-size: var(--t-base);
    transition: background-color .12s, color .12s;
}

.admin-link:hover {
    background: var(--ab-fondo-2);
    color: var(--brand-primario);
    text-decoration: none;
}

.admin-link i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    color: var(--ab-inchiostro-3);
}

.admin-link:hover i { color: var(--brand-primario); }

.quick-actions {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-4);
}

/* ---- Righe etichetta/valore: il mattone dei riepiloghi ---- */
.system-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.info-row,
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-5);
    font-size: var(--t-base);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--ab-velo-grigio);
}

.info-row:last-child,
.settings-row:last-child { border-bottom: none; }

.info-row .label,
.settings-row .label {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ab-inchiostro-3);
}

.info-row .value,
.settings-row .value {
    font-weight: 600;
    color: var(--ab-inchiostro);
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Sezioni delle impostazioni ---- */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
}

.settings-section {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    overflow: hidden;
}

.settings-section-header {
    padding: var(--s-4) var(--s-6);
    background: var(--ab-fondo-2);
    border-bottom: 1px solid var(--ab-linea);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--brand-font-titoli);
    font-weight: 600;
    font-size: var(--t-base);
    color: var(--brand-navy);
}

.settings-section-body { padding: var(--s-5) var(--s-6); }

/* ---- Griglia di accesso rapido ---- */
.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--s-5);
}

.quick-access-card {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    padding: var(--s-7) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    text-decoration: none;
    color: var(--ab-inchiostro);
    text-align: center;
    transition: border-color .12s, color .12s, background-color .12s;
}

.quick-access-card:hover {
    border-color: var(--brand-primario);
    background: var(--ab-velo-blu);
    color: var(--brand-primario);
    text-decoration: none;
}

.quick-access-card i { font-size: 26px; color: var(--ab-inchiostro-3); }
.quick-access-card:hover i { color: var(--brand-primario); }

.quick-access-card span {
    font-size: var(--t-tabella);
    font-weight: 600;
}

/* ---- Pannello scorrevole da destra ----
   Questo galleggia davvero: qui l'ombra è lecita. */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1000;
}

.panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 92vw;
    background: var(--ab-carta);
    border-left: 1px solid var(--ab-linea-forte);
    box-shadow: var(--ab-ombra-finestra);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .18s ease;
}

.panel.open { transform: translateX(0); }

.panel-header {
    padding: var(--s-5) var(--s-7);
    background: var(--ab-cromatura);
    color: var(--ab-su-cromatura);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--brand-font-titoli);
    font-size: var(--t-base);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-6) var(--s-7);
}

.panel-footer {
    padding: var(--s-5) var(--s-7);
    background: var(--ab-fondo-2);
    border-top: 1px solid var(--ab-linea);
    display: flex;
    gap: var(--s-4);
    justify-content: flex-end;
}

/* ---- Finestre di dialogo (Bootstrap) ---- */
.modal-content {
    border: 1px solid var(--ab-linea-forte);
    border-radius: var(--r-2);
    background: var(--ab-carta);
    color: var(--ab-inchiostro);
    box-shadow: var(--ab-ombra-finestra);
}

.modal-header {
    background: var(--ab-cromatura);
    border-bottom: 0;
    padding: var(--s-5) var(--s-7);
    border-radius: var(--r-2) var(--r-2) 0 0;
}

.modal-header .modal-title {
    font-family: var(--brand-font-titoli);
    font-size: var(--t-medio);
    font-weight: 600;
    color: var(--ab-su-cromatura);
}

.modal-header .text-muted { color: var(--brand-azzurro) !important; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .7; }
.modal-header .btn-close:hover { opacity: 1; }

.modal-body { padding: var(--s-6) var(--s-7); }

.modal-footer {
    background: var(--ab-fondo-2);
    border-top: 1px solid var(--ab-linea);
    padding: var(--s-5) var(--s-7);
    border-radius: 0 0 var(--r-2) var(--r-2);
}

/* ---- Menu a tendina ---- */
.dropdown-menu {
    --bs-dropdown-bg: var(--ab-carta);
    --bs-dropdown-color: var(--ab-inchiostro);
    --bs-dropdown-border-color: var(--ab-linea-forte);
    --bs-dropdown-border-radius: var(--r-2);
    --bs-dropdown-link-color: var(--ab-inchiostro);
    --bs-dropdown-link-hover-bg: var(--ab-fondo-2);
    --bs-dropdown-link-hover-color: var(--brand-navy);
    --bs-dropdown-link-active-bg: var(--ab-velo-blu);
    --bs-dropdown-link-active-color: var(--brand-primario);
    --bs-dropdown-divider-bg: var(--ab-linea);
    --bs-dropdown-font-size: var(--t-base);
    box-shadow: var(--ab-ombra-menu);
}

/* ---- Pagine di accesso ----
   L'unica schermata che l'utente vede prima di entrare: qui la scheda
   galleggia, perché è sola su uno sfondo vuoto. */
.account-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    height: 100dvh;
    overflow: auto;
    background: var(--ab-fondo);
    padding: clamp(16px, 4vw, 32px);
}

.account-card {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-top: 3px solid var(--brand-navy);
    border-radius: var(--r-2);
    box-shadow: var(--ab-ombra-menu);
    width: 100%;
    max-width: 420px;
    flex-shrink: 0;
    margin-block: auto;
    padding: var(--s-9);
}

.account-header {
    text-align: center;
    margin-bottom: var(--s-8);
}

.account-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--brand-font-titoli);
    font-size: var(--t-medio);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-navy);
    text-decoration: none;
}

.account-logo:hover { text-decoration: none; color: var(--brand-primario); }

.account-body h4 {
    font-family: var(--brand-font-titoli);
    font-size: var(--t-medio);
    font-weight: 600;
    color: var(--brand-navy);
}

.external-login-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
}


/* ============================================================================
   7. TARGHE DI RIEPILOGO
   ----------------------------------------------------------------------------
   Etichetta piccola sopra, cifra sotto: è la cifra che guida la lettura, non
   l'icona. L'icona è un segno di supporto monocromo, non una pastiglia
   colorata — in una pagina con sei targhe, sei pastiglie pastello sono una
   decorazione che compete con i numeri.
   ============================================================================ */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-7);
}

.stat-card {
    background: var(--ab-carta);
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
    padding: var(--s-5) var(--s-6);
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    position: relative;
}

/* Filetto di testa: la targa si riconosce prima di leggerla. */
.stat-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    background: var(--brand-navy);
    border-radius: var(--r-2) var(--r-2) 0 0;
}

.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--ab-velo-grigio);
    color: var(--ab-inchiostro-3);
}

/* I modificatori di colore restano, ma tenuti a bada: tinta del segno, fondo
   neutro. Il colore su una targa deve dire lo stato del dato, non il tema. */
.stat-icon.blue   { color: var(--brand-primario); }
.stat-icon.green  { color: var(--brand-verde); }
.stat-icon.yellow { color: var(--brand-ambra-testo); }
.stat-icon.red    { color: var(--brand-negativo); }
.stat-icon.purple { color: var(--brand-navy); }
.stat-icon.teal   { color: var(--brand-primario-chiaro); }

/* Etichetta sopra, cifra sotto, senza toccare il markup delle pagine. */
.stat-card > div:not(.stat-icon) {
    display: flex;
    flex-direction: column-reverse;
    min-width: 0;
}

.stat-value {
    font-family: var(--brand-font-titoli);
    font-size: var(--t-cifra);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums lining-nums;
}

.stat-label {
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ab-inchiostro-3);
    margin: 0 0 var(--s-2);
}


/* ============================================================================
   8. TABELLE
   ----------------------------------------------------------------------------
   Centinaia di righe, dieci colonne, otto ore al giorno. Le scelte: riga di
   30px, filetti verticali solo fra le colonne (mai ai bordi esterni), testate
   maiuscole piccole, nessuna zebratura — la griglia la fanno i filetti.
   ============================================================================ */

.table {
    --bs-table-bg: var(--ab-carta);
    --bs-table-color: var(--ab-inchiostro);
    --bs-table-border-color: var(--ab-linea);
    --bs-table-hover-bg: var(--ab-velo-blu);
    --bs-table-hover-color: var(--ab-inchiostro);
    --bs-table-striped-bg: var(--ab-fondo);
    width: 100%;
    margin-bottom: 0;
    font-size: var(--t-tabella);
    border-color: var(--ab-linea);
}

.table > thead > tr > th,
.data-table th {
    padding: var(--s-3) var(--s-4);
    background: var(--ab-fondo-2);
    color: var(--brand-navy);
    font-family: var(--brand-font-titoli);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    vertical-align: bottom;
    border-bottom: 1px solid var(--ab-linea-forte);
    border-top: 0;
}

.table > tbody > tr > td,
.data-table td {
    padding: 0 var(--s-4);
    height: var(--riga-h);
    vertical-align: middle;
    border-bottom: 1px solid var(--ab-linea);
    color: var(--ab-inchiostro);
}

.table.table-sm > tbody > tr > td {
    padding-top: 3px;
    padding-bottom: 3px;
    height: auto;
    min-height: var(--riga-h-compatta);
}

/* Filetti verticali fra le colonne, mai ai bordi esterni: è la zebratura che
   non serve, quando le colonne sono separate davvero. */
.table > thead > tr > th:not(:last-child),
.table > tbody > tr > td:not(:last-child),
.table > tfoot > tr > td:not(:last-child) {
    border-right: 1px solid var(--ab-velo-grigio);
}

.table > thead > tr > th:not(:last-child) { border-right-color: var(--ab-linea); }

.table > tbody > tr:hover > *,
.data-table tbody tr:hover { background-color: var(--ab-velo-blu); }

/* Riga dei totali: chiude il registro con un filetto, senza fondo colorato. */
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    height: var(--riga-h);
    padding: 0 var(--s-4);
    background: var(--ab-carta);
    border-top: 2px solid var(--brand-navy);
    border-bottom: 0;
    font-weight: 700;
    color: var(--brand-navy);
    font-size: var(--t-tabella);
}

.table-light,
.table > :not(caption) > * > .table-light { background: var(--ab-fondo-2); }

/* Stato di riga: tinta tenue più marcatore a sinistra. Chi non distingue i
   colori vede comunque la barra: mai affidare uno stato al solo colore. */
.table > tbody > tr.table-warning > * {
    background-color: var(--ab-velo-ambra);
    --bs-table-bg: var(--ab-velo-ambra);
}
.table > tbody > tr.table-warning > td:first-child { box-shadow: inset 3px 0 0 var(--brand-ambra); }

.table > tbody > tr.table-danger > * {
    background-color: var(--ab-velo-negativo);
    --bs-table-bg: var(--ab-velo-negativo);
}
.table > tbody > tr.table-danger > td:first-child { box-shadow: inset 3px 0 0 var(--brand-negativo); }

.table > tbody > tr.table-success > * {
    background-color: var(--ab-velo-verde);
    --bs-table-bg: var(--ab-velo-verde);
}
.table > tbody > tr.table-success > td:first-child { box-shadow: inset 3px 0 0 var(--brand-verde); }

/* Testata appiccicata: da applicare al contenitore scorrevole. */
.tabella-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
    border: 1px solid var(--ab-linea);
    border-radius: var(--r-2);
}

.tabella-scroll > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Nelle tabelle con campi editabili l'altezza la detta il campo: il padding
   della cella si riduce, altrimenti la riga cresce di dieci pixel a vuoto. */
.table td:has(.form-control),
.table td:has(.form-select),
.table td:has(.form-check-input) {
    padding-top: 2px;
    padding-bottom: 2px;
    height: auto;
}

.table td .form-check-input { margin: 0; }

/* Una riga che cresce perché il secondo pulsante è andato a capo è una riga
   sprecata: nelle celle di comando non si va mai a capo. */
.table td:last-child { white-space: nowrap; }
.table .btn-sm { padding: 3px 7px; gap: var(--s-2); }
.table .btn-sm i { font-size: 13px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-tabella);
}


/* ============================================================================
   9. NUMERI
   ----------------------------------------------------------------------------
   Un importo è un dato, non una stringa: a destra, tabellare, con lo zero
   barrato, e il negativo riconoscibile anche in bianco e nero.
   ============================================================================ */

.num,
td.num,
.table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    white-space: nowrap;
}

.num-negativo,
.num.negativo { color: var(--brand-negativo); }

/* Unità e divisori (€, %, /12) restano attaccati al numero senza competere. */
.num-unita {
    font-size: var(--t-mini);
    color: var(--ab-inchiostro-3);
    margin-left: 2px;
}

/* Il trattino di valore assente. Non è uno zero e non deve sembrarlo. */
.num-vuoto { color: var(--ab-inchiostro-3); }


/* ============================================================================
   10. PULSANTI
   ----------------------------------------------------------------------------
   Il tema DevExpress ridefinisce i pulsanti Bootstrap con il proprio colore.
   Impostare --bs-primary non basta: dalla 5.3 Bootstrap li colora con le
   variabili --bs-btn-*, dichiarate dentro la classe stessa, e quelle di
   DevExpress vincono per ordine di caricamento. Vanno quindi ridichiarate
   sulla classe, non sul :root.
   ============================================================================ */

.btn {
    --bs-btn-border-radius: var(--r-2);
    --bs-btn-font-size: var(--t-base);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: var(--s-5);
    --bs-btn-line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    box-shadow: none !important;   /* nessun pulsante galleggia */
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn-sm {
    --bs-btn-font-size: var(--t-tabella);
    --bs-btn-padding-y: 3px;
    --bs-btn-padding-x: var(--s-4);
}

.btn:disabled, .btn.disabled { opacity: .45; }

.btn-primary {
    --bs-btn-color: var(--ab-su-pieno);
    --bs-btn-bg: var(--brand-primario);
    --bs-btn-border-color: var(--brand-primario);
    --bs-btn-hover-color: var(--ab-su-pieno);
    --bs-btn-hover-bg: var(--brand-primario-scuro);
    --bs-btn-hover-border-color: var(--brand-primario-scuro);
    --bs-btn-active-color: var(--ab-su-pieno);
    --bs-btn-active-bg: var(--brand-primario-scuro);
    --bs-btn-active-border-color: var(--brand-primario-scuro);
    --bs-btn-disabled-color: var(--ab-su-pieno);
    --bs-btn-disabled-bg: var(--brand-azzurro);
    --bs-btn-disabled-border-color: var(--brand-azzurro);
}

/* Il secondario è carta con filetto: è un pulsante, non un cartello. */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--brand-navy);
    --bs-btn-bg: var(--ab-carta);
    --bs-btn-border-color: var(--ab-linea-forte);
    --bs-btn-hover-color: var(--brand-primario);
    --bs-btn-hover-bg: var(--ab-fondo-2);
    --bs-btn-hover-border-color: var(--brand-primario);
    --bs-btn-active-color: var(--brand-navy);
    --bs-btn-active-bg: var(--ab-fondo-3);
    --bs-btn-active-border-color: var(--ab-linea-forte);
    --bs-btn-disabled-color: var(--ab-inchiostro-3);
    --bs-btn-disabled-bg: var(--ab-carta);
    --bs-btn-disabled-border-color: var(--ab-linea);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primario);
    --bs-btn-bg: var(--ab-carta);
    --bs-btn-border-color: var(--ab-linea-forte);
    --bs-btn-hover-color: var(--ab-su-pieno);
    --bs-btn-hover-bg: var(--brand-primario);
    --bs-btn-hover-border-color: var(--brand-primario);
    --bs-btn-active-color: var(--ab-su-pieno);
    --bs-btn-active-bg: var(--brand-primario-scuro);
    --bs-btn-active-border-color: var(--brand-primario-scuro);
}

.btn-success, .btn-outline-success {
    --bs-btn-color: var(--brand-verde);
    --bs-btn-bg: var(--ab-carta);
    --bs-btn-border-color: var(--ab-linea-forte);
    --bs-btn-hover-color: var(--ab-su-pieno);
    --bs-btn-hover-bg: var(--brand-verde);
    --bs-btn-hover-border-color: var(--brand-verde);
    --bs-btn-active-color: var(--ab-su-pieno);
    --bs-btn-active-bg: #35672c;
    --bs-btn-active-border-color: #35672c;
}

.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--brand-rosso);
    --bs-btn-bg: var(--ab-carta);
    --bs-btn-border-color: var(--ab-linea-forte);
    --bs-btn-hover-color: var(--ab-su-pieno);
    --bs-btn-hover-bg: var(--brand-rosso);
    --bs-btn-hover-border-color: var(--brand-rosso);
    --bs-btn-active-color: var(--ab-su-pieno);
    --bs-btn-active-bg: #8a0f24;
    --bs-btn-active-border-color: #8a0f24;
}

.btn-warning, .btn-outline-warning {
    --bs-btn-color: var(--brand-ambra-testo);
    --bs-btn-bg: var(--ab-carta);
    --bs-btn-border-color: var(--ab-linea-forte);
    --bs-btn-hover-color: var(--brand-ambra-testo);
    --bs-btn-hover-bg: var(--ab-velo-ambra);
    --bs-btn-hover-border-color: var(--brand-ambra);
}

.btn-light {
    --bs-btn-color: var(--ab-inchiostro);
    --bs-btn-bg: var(--ab-fondo-2);
    --bs-btn-border-color: var(--ab-linea);
    --bs-btn-hover-bg: var(--ab-fondo-3);
    --bs-btn-hover-border-color: var(--ab-linea-forte);
}

.btn-link {
    --bs-btn-color: var(--brand-primario-chiaro);
    --bs-btn-hover-color: var(--brand-primario);
    --bs-btn-font-weight: 500;
}

.btn-close { --bs-btn-close-focus-shadow: none; opacity: .5; }
.btn-close:hover { opacity: .9; }

/* Pulsante di sola icona: quadrato, mai deformato. */
.btn-icona {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0 !important;
    justify-content: center;
}

/* Pulsante compatto dentro le celle: misura unica, così le colonne delle
   azioni restano allineate fra tabelle diverse. */
.btn-cella {
    padding: 2px var(--s-4);
    font-size: var(--t-tabella);
    line-height: 1.4;
}

/* ---- Famiglia .btn-o365: usata dalle pagine generate ---- */
.btn-o365 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: 5px var(--s-5);
    border-radius: var(--r-2);
    border: 1px solid transparent;
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn-o365:disabled, .btn-o365.disabled { opacity: .45; cursor: default; }

.btn-o365-primary {
    background: var(--brand-primario);
    border-color: var(--brand-primario);
    color: var(--ab-su-pieno);
}
.btn-o365-primary:hover {
    background: var(--brand-primario-scuro);
    border-color: var(--brand-primario-scuro);
    color: var(--ab-su-pieno);
    text-decoration: none;
}

.btn-o365-secondary {
    background: var(--ab-carta);
    color: var(--brand-navy);
    border-color: var(--ab-linea-forte);
}
.btn-o365-secondary:hover {
    background: var(--ab-fondo-2);
    border-color: var(--brand-primario);
    color: var(--brand-primario);
    text-decoration: none;
}

.btn-o365-ghost {
    background: transparent;
    color: var(--ab-inchiostro-2);
}
.btn-o365-ghost:hover {
    background: var(--ab-fondo-2);
    color: var(--brand-navy);
    text-decoration: none;
}

.btn-o365-danger {
    background: var(--ab-carta);
    color: var(--brand-rosso);
    border-color: var(--ab-linea-forte);
}
.btn-o365-danger:hover {
    background: var(--brand-rosso);
    border-color: var(--brand-rosso);
    color: var(--ab-su-pieno);
    text-decoration: none;
}

.btn-o365-sm {
    padding: 3px var(--s-4);
    font-size: var(--t-tabella);
}


/* ============================================================================
   11. CAMPI
   ============================================================================ */

.form-control,
.form-select,
.form-control-o365 {
    width: 100%;
    border: 1px solid var(--ab-linea-forte);
    border-radius: var(--r-1);
    background-color: var(--ab-carta);
    color: var(--ab-inchiostro);
    font-size: var(--t-base);
    padding: 5px var(--s-5);
    box-shadow: none;
    transition: border-color .12s, box-shadow .12s;
}

.form-control-sm, .form-select-sm {
    font-size: var(--t-tabella);
    padding: 3px var(--s-4);
    min-height: var(--riga-h-compatta);
    border-radius: var(--r-1);
}

.form-control:focus,
.form-select:focus,
.form-control-o365:focus {
    outline: none;
    border-color: var(--brand-primario);
    box-shadow: 0 0 0 2px var(--ab-focus);
}

.form-control::placeholder { color: var(--ab-inchiostro-3); font-style: italic; }

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--ab-velo-grigio);
    color: var(--ab-inchiostro-2);
    border-color: var(--ab-linea);
}

/* La freccia della select ridisegnata nel blu del marchio. Va dichiarato
   anche il background-color: lo shorthand dei campi azzererebbe l'immagine. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231d4f86' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 12px 9px;
    padding-right: 2rem;
    appearance: none;
    cursor: pointer;
}

/* Gli importi vanno a destra e non ballano; le frecce di spin rubano
   larghezza e su un importo non le usa nessuno. */
.form-control[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    -moz-appearance: textfield;
}
.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* In una tabella di trenta righe, trenta riquadri pieni sono rumore: il campo
   resta accennato e si materializza al passaggio o a fuoco. Un filo di bordo
   però serve, altrimenti una cella vuota non sembra compilabile. */
.table .form-control-sm,
.table .form-select-sm { border-color: var(--ab-velo-grigio); background-color: transparent; }
.table tr:hover .form-control-sm,
.table tr:hover .form-select-sm { border-color: var(--ab-linea); background-color: var(--ab-carta); }
.table .form-control-sm:focus,
.table .form-select-sm:focus { border-color: var(--brand-primario); background-color: var(--ab-carta); }

.form-label,
.form-label-o365 {
    display: block;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ab-inchiostro-3);
    margin-bottom: 3px;
}

.form-check-input {
    border-color: var(--ab-linea-forte);
    background-color: var(--ab-carta);
}
.form-check-input:checked {
    background-color: var(--brand-primario);
    border-color: var(--brand-primario);
}
.form-check-input:focus {
    border-color: var(--brand-primario);
    box-shadow: 0 0 0 2px var(--ab-focus);
    /* Il pallino dell'interruttore è codificato nel CSS di Bootstrap con il
       colore del bordo: senza questa riga resta arancione anche da spento. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231d4f86'/%3e%3c/svg%3e");
}
.form-check-input:disabled { opacity: .4; }
.form-check-label { font-size: var(--t-base); }

.validation-message, .invalid-feedback {
    font-size: var(--t-mini);
    color: var(--brand-rosso);
}

.form-control.invalid, .form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--brand-rosso);
}

/* Un campo con la lente dentro, non due riquadri accostati. */
.campo-ricerca { position: relative; display: block; }

.campo-ricerca > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ab-inchiostro-3);
    font-size: 13px;
    pointer-events: none;
}

.campo-ricerca input { padding-left: 30px; }
.campo-ricerca input:focus ~ i { color: var(--brand-primario); }

.input-group > .input-group-text {
    background: var(--ab-carta);
    border-color: var(--ab-linea-forte);
    border-right: 0;
    color: var(--ab-inchiostro-3);
    padding-right: var(--s-3);
}
.input-group > .input-group-text + .form-control { border-left: 0; padding-left: var(--s-3); }
.input-group:focus-within > .input-group-text { border-color: var(--brand-primario); }
.input-group:focus-within > .form-control { box-shadow: none; }
.input-group:focus-within { box-shadow: 0 0 0 2px var(--ab-focus); border-radius: var(--r-1); }


/* ============================================================================
   12. MARCATURE DI STATO
   ----------------------------------------------------------------------------
   Rettangolari, maiuscole, senza raggio: sono marcature d'archivio, non
   pastiglie da prodotto consumer. Fondo tenue e filetto del proprio colore.
   ============================================================================ */

.badge {
    border-radius: var(--r-1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px var(--s-3);
    border: 1px solid transparent;
}

.badge.bg-primary   { background: var(--ab-velo-blu) !important;      color: var(--brand-primario);     border-color: var(--brand-azzurro); }
.badge.bg-success   { background: var(--ab-velo-verde) !important;    color: var(--brand-verde);        border-color: var(--ab-bordo-verde); }
.badge.bg-danger    { background: var(--ab-velo-negativo) !important; color: var(--brand-negativo);     border-color: var(--ab-bordo-negativo); }
.badge.bg-warning   { background: var(--ab-velo-ambra) !important;    color: var(--brand-ambra-testo);  border-color: var(--ab-bordo-ambra); }
.badge.bg-info      { background: var(--ab-velo-blu) !important;      color: var(--brand-navy);         border-color: var(--brand-azzurro); }
.badge.bg-secondary { background: var(--ab-velo-grigio) !important;   color: var(--ab-inchiostro-2);    border-color: var(--ab-linea); }
.badge.bg-light     { background: var(--ab-velo-grigio) !important;   color: var(--ab-inchiostro-2);    border-color: var(--ab-linea); }
.badge.bg-dark      { background: var(--ab-cromatura) !important;     color: var(--ab-su-cromatura);    border-color: var(--ab-cromatura); }

.badge-o365 {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--r-1);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge-blue   { background: var(--ab-velo-blu);      color: var(--brand-primario);    border-color: var(--brand-azzurro); }
.badge-green  { background: var(--ab-velo-verde);    color: var(--brand-verde);       border-color: var(--ab-bordo-verde); }
.badge-yellow { background: var(--ab-velo-ambra);    color: var(--brand-ambra-testo); border-color: var(--ab-bordo-ambra); }
.badge-red    { background: var(--ab-velo-negativo); color: var(--brand-negativo);    border-color: var(--ab-bordo-negativo); }
.badge-gray   { background: var(--ab-velo-grigio);   color: var(--ab-inchiostro-2);   border-color: var(--ab-linea); }
.badge-purple { background: var(--ab-velo-blu);      color: var(--brand-navy);        border-color: var(--brand-azzurro); }
.badge-teal   { background: var(--ab-velo-blu);      color: var(--brand-primario-chiaro); border-color: var(--brand-azzurro); }
.badge-orange { background: var(--ab-velo-ambra);    color: var(--brand-ambra-testo); border-color: var(--ab-bordo-ambra); }

/* Stato definitivo o chiuso: pieno, non tenue. Un periodo chiuso è un fatto. */
.badge-chiuso {
    background: var(--ab-cromatura);
    color: var(--ab-su-cromatura);
    border-color: var(--ab-cromatura);
}


/* ============================================================================
   13. AVVISI
   ============================================================================ */

.alert {
    border-radius: var(--r-2);
    border: 1px solid var(--ab-linea);
    border-left-width: 3px;
    padding: var(--s-4) var(--s-6);
    font-size: var(--t-base);
    box-shadow: none;
}

.alert-success { background: var(--ab-velo-verde);    border-color: var(--ab-bordo-verde);    border-left-color: var(--brand-verde);    color: #2c5726; }
.alert-danger  { background: var(--ab-velo-negativo); border-color: var(--ab-bordo-negativo); border-left-color: var(--brand-negativo); color: var(--brand-negativo); }
.alert-warning { background: var(--ab-velo-ambra);    border-color: var(--ab-bordo-ambra);    border-left-color: var(--brand-ambra);    color: var(--brand-ambra-testo); }
.alert-info    { background: var(--ab-velo-blu);      border-color: var(--brand-azzurro);     border-left-color: var(--brand-primario); color: var(--brand-navy); }

/* Un avviso incastonato in una scheda non galleggia. */
.card .alert, .o365-card .alert { border-radius: 0; border-left-width: 3px; }


/* ============================================================================
   14. ELENCHI E LINGUETTE
   ----------------------------------------------------------------------------
   Bootstrap colora la voce attiva con --bs-list-group-active-*, che sotto il
   tema DevExpress resta arancione: vanno ridichiarate sulla classe.
   ============================================================================ */

.list-group {
    --bs-list-group-border-color: var(--ab-linea);
    --bs-list-group-border-radius: var(--r-2);
    --bs-list-group-color: var(--ab-inchiostro);
    --bs-list-group-bg: var(--ab-carta);
    --bs-list-group-action-hover-bg: var(--ab-fondo-2);
    --bs-list-group-action-hover-color: var(--brand-navy);
    --bs-list-group-active-bg: var(--ab-velo-blu);
    --bs-list-group-active-border-color: var(--brand-azzurro);
    --bs-list-group-active-color: var(--brand-navy);
}

/* La voce corrente si riconosce dal filetto, non da un fondo pieno. */
.list-group-item.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-primario);
}
.list-group-item.active .text-muted,
.list-group-item.active .small { color: var(--ab-inchiostro-2) !important; }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--ab-linea);
    --bs-nav-tabs-link-active-color: var(--brand-navy);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: var(--ab-inchiostro-2);
    --bs-nav-link-hover-color: var(--brand-navy);
    border-bottom: 1px solid var(--ab-linea);
}

.nav-tabs .nav-link {
    border-radius: 0;
    font-size: var(--t-base);
    font-weight: 600;
    letter-spacing: .02em;
    padding: var(--s-4) var(--s-6);
}
.nav-tabs .nav-link:hover { background: var(--ab-fondo-2); }
/* La linguetta corrente è sottolineata in accento: unico tratto caldo. */
.nav-tabs .nav-link.active { box-shadow: inset 0 -3px 0 var(--brand-accento); }


/* ============================================================================
   15. COMPONENTI DEVEXPRESS
   ----------------------------------------------------------------------------
   Il tema DevExpress è caricato prima: bastano correzioni mirate per
   allinearlo. Selettori volutamente stretti, per non destabilizzare i
   componenti di reporting e dashboard, che hanno un tema proprio.
   ============================================================================ */

/* I componenti espongono variabili proprie: impostare quelle è più solido che
   inseguire i loro selettori interni, che cambiano da una versione all'altra. */
.dxbl-grid {
    --dxbl-grid-font-family: var(--brand-font);
    --dxbl-grid-font-size: var(--t-tabella);
    --dxbl-grid-bg: var(--ab-carta);
    --dxbl-grid-color: var(--ab-inchiostro);
    --dxbl-grid-border-color: var(--ab-linea);
    --dxbl-grid-border-radius: var(--r-2);
    --dxbl-grid-header-bg: var(--ab-fondo-2);
    --dxbl-grid-header-color: var(--brand-navy);
    --dxbl-grid-header-font-weight: 700;
    --dxbl-grid-focus-bg: var(--ab-velo-blu);
    --dxbl-grid-focus-color: var(--ab-inchiostro);
    --dxbl-grid-focus-frame-color: var(--brand-primario);
    --dxbl-grid-edit-row-bg: var(--ab-velo-blu);
    --dxbl-grid-edit-row-color: var(--ab-inchiostro);
    font-size: var(--t-tabella);
    border-color: var(--ab-linea);
}

.dxbl-grid .dxbl-grid-header-content {
    background: var(--ab-fondo-2);
    color: var(--brand-navy);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Il numero di pagina corrente è l'unico elemento pieno del piede: va nel blu
   del marchio, altrimenti resta l'arancione del tema DevExpress. */
.dxbl-pager {
    --dxbl-pager-bg: transparent;
    --dxbl-pager-color: var(--ab-inchiostro-2);
    --dxbl-pager-border-color: var(--ab-linea);
    --dxbl-pager-btn-bg: transparent;
    --dxbl-pager-btn-color: var(--ab-inchiostro-2);
    --dxbl-pager-btn-hover-bg: var(--ab-fondo-2);
    --dxbl-pager-btn-hover-color: var(--brand-navy);
    --dxbl-pager-page-btn-bg: transparent;
    --dxbl-pager-page-btn-color: var(--ab-inchiostro-2);
    --dxbl-pager-page-btn-hover-bg: var(--ab-fondo-2);
    --dxbl-pager-page-btn-hover-color: var(--brand-navy);
    --dxbl-pager-active-page-btn-bg: var(--brand-primario);
    --dxbl-pager-active-page-btn-color: var(--ab-su-pieno);
    --dxbl-pager-border-radius: var(--r-1);
    font-size: var(--t-tabella);
}

.dxbl-toolbar {
    --dxbl-toolbar-bg: var(--ab-fondo-2);
    --dxbl-toolbar-btn-bg: transparent;
    --dxbl-toolbar-btn-border-color: transparent;
    --dxbl-toolbar-btn-border-radius: var(--r-2);
    --dxbl-toolbar-btn-active-bg: var(--ab-velo-blu);
    --dxbl-toolbar-btn-active-color: var(--brand-primario);
}

/* Stessa metrica delle tabelle Bootstrap: altrimenti l'app parla due lingue. */
.dxbl-grid .dxbl-grid-data-row > td { height: var(--riga-h); padding: 0 var(--s-4); }

.dxbl-tabs .dxbl-tabs-list { border-bottom: 1px solid var(--ab-linea); }

.dxbl-tabs .dxbl-tab {
    border-radius: 0;
    font-size: var(--t-base);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ab-inchiostro-2);
    padding: var(--s-4) var(--s-6);
}
.dxbl-tabs .dxbl-tab:hover { color: var(--brand-navy); background: var(--ab-fondo-2); }
.dxbl-tabs .dxbl-tab.dxbl-active {
    color: var(--brand-navy);
    background: transparent;
    box-shadow: inset 0 -3px 0 var(--brand-accento);
}

.dxbl-popup {
    --dxbl-popup-border-color: var(--ab-linea-forte);
    --dxbl-popup-border-radius: var(--r-2);
    --dxbl-popup-bg: var(--ab-carta);
    --dxbl-popup-color: var(--ab-inchiostro);
    --dxbl-popup-font-family: var(--brand-font);
    --dxbl-popup-header-bg: var(--ab-cromatura);
    --dxbl-popup-header-color: var(--ab-su-cromatura);
}

.dxbl-popup-header {
    background: var(--ab-cromatura);
    color: var(--ab-su-cromatura);
    font-family: var(--brand-font-titoli);
    font-size: var(--t-base);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: var(--s-4) var(--s-6);
}
.dxbl-popup-header .dxbl-btn { color: var(--ab-su-cromatura); }
.dxbl-popup-body   { padding: var(--s-6); background: var(--ab-carta); }
.dxbl-popup-footer {
    padding: var(--s-4) var(--s-6);
    background: var(--ab-fondo-2);
    border-top: 1px solid var(--ab-linea);
    gap: var(--s-4);
}

/* Barra comandi delle schede entità: appiattita e riportata alla geometria
   del sistema. */
.entity-commandbar, .entity-commandbar-dx {
    border-radius: var(--r-2);
    box-shadow: none;
    background: var(--ab-fondo-2);
}


/* ============================================================================
   16. STATI VUOTI, CARICAMENTO, ERRORI
   ============================================================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-9) var(--s-8);
    text-align: center;
    color: var(--ab-inchiostro-2);
}

/* Solo l'icona decorativa in cima, che è figlia diretta: come selettore
   discendente colpirebbe anche le icone dentro il pulsante d'azione. */
.empty-state > i {
    font-size: 34px;
    opacity: .28;
    margin-bottom: var(--s-5);
    color: var(--brand-navy);
}

/* Uno stato vuoto è il momento migliore per spiegare a cosa serve la
   schermata: titolo, spiegazione, azione. */
.vuoto-titolo {
    font-family: var(--brand-font-titoli);
    font-size: var(--t-medio);
    color: var(--brand-navy);
    margin-bottom: var(--s-2);
}

.vuoto-testo {
    font-size: var(--t-base);
    color: var(--ab-inchiostro-2);
    max-width: 46ch;
    margin: 0 auto var(--s-5);
}

.spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--ab-linea);
    border-top-color: var(--brand-primario);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.spinner-border { border-color: var(--ab-linea); border-right-color: var(--brand-primario); }
.spinner-border.text-primary { color: var(--brand-primario) !important; }
.progress-bar { background-color: var(--brand-primario); }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Barra di avanzamento indeterminata: sostituisce lo spinner centrato quando
   l'operazione blocca l'intera pagina. */
.elaborazione-in-corso {
    height: 2px;
    background: var(--ab-linea);
    overflow: hidden;
    position: relative;
}
.elaborazione-in-corso::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 32%;
    background: var(--brand-primario);
    animation: scorri 1.1s ease-in-out infinite;
}

@keyframes scorri {
    from { transform: translateX(-100%); }
    to   { transform: translateX(340%); }
}

#blazor-error-ui {
    background: var(--ab-velo-ambra);
    color: var(--brand-ambra-testo);
    border-top: 2px solid var(--brand-ambra);
    bottom: 0;
    box-shadow: var(--ab-ombra-menu);
    display: none;
    left: 0;
    padding: var(--s-4) var(--s-7);
    position: fixed;
    width: 100%;
    z-index: 1050;
    font-size: var(--t-base);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--s-5);
    top: var(--s-3);
}

/* Notifica che galleggia in basso a destra: qui l'ombra è lecita. */
.notifica {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    min-width: 320px;
    max-width: 460px;
}


/* ============================================================================
   17. CLASSI DI SERVIZIO
   ----------------------------------------------------------------------------
   Esistono perché il markup non abbia bisogno di dettare colori e dimensioni:
   uno stile inline batte sempre il foglio, e finché resta nel markup il tema
   non può correggerlo.
   ============================================================================ */

.text-primary   { color: var(--brand-primario) !important; }
.text-success   { color: var(--brand-verde) !important; }
.text-warning   { color: var(--brand-ambra-testo) !important; }
.text-danger    { color: var(--brand-negativo) !important; }
.text-muted,
.text-secondary { color: var(--ab-inchiostro-3) !important; }

.text-blue   { color: var(--brand-primario) !important; }
.text-green  { color: var(--brand-verde) !important; }
.text-purple { color: var(--brand-navy) !important; }
.text-orange { color: var(--brand-ambra-testo) !important; }
.text-teal   { color: var(--brand-primario-chiaro) !important; }
.text-red    { color: var(--brand-negativo) !important; }
.text-cyan   { color: var(--brand-primario-chiaro) !important; }
.text-pink   { color: var(--brand-negativo) !important; }

.bg-primary { background-color: var(--brand-primario) !important; color: var(--ab-su-pieno) !important; }

.fw-600 { font-weight: 600; }

/* La scala dei corpi è quella del sistema: 10px per le note di servizio,
   11px per etichette e didascalie, 12px per le tabelle dense, 13px corrente. */
.t-10 { font-size: 10px; }
.t-11 { font-size: 11px; }
.t-12 { font-size: 12px; }
.t-13 { font-size: 13px; }

.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-16 { font-size: var(--t-medio); }
.fs-20 { font-size: var(--t-titolo); }
.fs-28 { font-size: var(--t-cifra); }

/* Passi di un percorso guidato (wizard): fatto, attivo, da fare. */
.wizard-steps { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.wizard-steps li { display: flex; align-items: center; gap: var(--s-3); color: var(--ab-inchiostro-3); font-size: var(--t-base); }
.wizard-steps .wizard-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ab-linea-forte); font-size: var(--t-micro); }
.wizard-steps li.attivo { color: var(--brand-primario); font-weight: 600; }
.wizard-steps li.attivo .wizard-n { background: var(--brand-primario); border-color: var(--brand-primario); color: #fff; }
.wizard-steps li.fatto .wizard-n { background: var(--ab-fondo-2); color: var(--brand-primario); border-color: var(--brand-primario); }

/* Testo markdown di un pacchetto di conoscenze, letto in un pannello: tabelle, codice e citazioni leggibili. */
.knowledge-body { font-size: var(--t-base); line-height: 1.55; overflow-wrap: anywhere; }
.knowledge-body table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--t-small, 13px); }
.knowledge-body th, .knowledge-body td { border: 1px solid var(--ab-linea, #d9dee7); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.knowledge-body th { background: var(--ab-fondo-2); }
.knowledge-body pre { background: var(--ab-fondo-2); padding: var(--s-4); border-radius: var(--r-1); overflow-x: auto; }
.knowledge-body code { font-size: 12px; }
.knowledge-body blockquote { margin: var(--s-4) 0; padding-left: var(--s-4); border-left: 3px solid var(--ab-linea, #d9dee7); color: var(--ab-inchiostro-3); }
.knowledge-body h1, .knowledge-body h2, .knowledge-body h3 { font-size: var(--t-medio); margin: var(--s-5) 0 var(--s-3); }

/* Pannello laterale (offcanvas di Bootstrap, aperto da Blazor senza JavaScript): più largo del predefinito per una scheda azienda. */
.offcanvas-largo { --bs-offcanvas-width: min(760px, 100vw); }

.gap-8  { gap: var(--s-4); }
.gap-12 { gap: var(--s-5); }
.gap-16 { gap: var(--s-6); }

/* Larghezze di colonna ricorrenti: in classi, perché la stessa colonna deve
   misurare uguale in ogni tabella — scritte a mano divergono. */
.w-70  { width: 70px; }
.w-80  { width: 80px; }
.w-90  { width: 90px; }
.w-110 { width: 110px; }
.w-130 { width: 130px; }
.w-150 { width: 150px; }
.w-190 { width: 190px; }
.w-220 { width: 220px; }
.w-260 { width: 260px; }
.w-160 { width: 160px; }
.miniatura { max-width: 120px; max-height: 80px; object-fit: contain; }
.pre-wrap { white-space: pre-wrap; }

.flex-1 { flex: 1; }

/* Il pulsante che alterna chiaro e scuro mostra l'icona della modalità in cui
   si entra, non di quella corrente. */
.theme-toggle-light { display: inline; }
.theme-toggle-dark  { display: none; }

html[data-theme="dark"] .theme-toggle-light { display: none; }
html[data-theme="dark"] .theme-toggle-dark  { display: inline; }


/* ============================================================================
   18. SCHERMI STRETTI
   ============================================================================ */

@media (max-width: 1200px) {
    .admin-grid,
    .settings-grid { grid-template-columns: repeat(2, 1fr); }

    .dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

@media (max-width: 900px) {
    .app-rail { display: none; }

    .app-content { padding: var(--s-5); }

    .header-search { display: none; }
    .header-logo::after { display: none; }

    .admin-grid,
    .settings-grid { grid-template-columns: 1fr; }

    .quick-access-grid { grid-template-columns: repeat(2, 1fr); }

    .account-card { padding: var(--s-7); }
}


/* ============================================================================
   19. STAMPA
   ----------------------------------------------------------------------------
   Un riepilogo si stampa o si esporta in PDF. Senza queste regole esce la
   cromatura della testata e mezza pagina di rail.
   ============================================================================ */

@media print {
    .app-header,
    .app-rail,
    .barra-strumenti,
    .btn,
    .btn-o365,
    .modal,
    .page-header::after { display: none !important; }

    html, body {
        height: auto;
        overflow: visible;
        background: #fff;
        font-size: 10pt;
    }

    .app-content { padding: 0; background: #fff; overflow: visible; }

    .card, .o365-card, .stat-card { border-color: #999; break-inside: avoid; }

    .table { font-size: 9pt; }
    .table > thead > tr > th {
        background: #eee !important;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table > thead { display: table-header-group; }   /* testata a ogni pagina */
    .table > tbody > tr { break-inside: avoid; }

    /* In stampa il colore può sparire: il negativo resta riconoscibile perché
       il segno è nel testo, ma lo rinforziamo col corsivo. */
    .num-negativo, .num.negativo { color: #000; font-style: italic; font-weight: 700; }

    .tabella-scroll { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    /* Senza azzerare anche le ripetizioni, un'animazione infinita ridotta a
       .01ms non si ferma: ricomincia migliaia di volte al secondo e manda la
       CPU al massimo. Il conteggio a 1 è la metà che conta davvero. */
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Anteprima dei modelli di messaggio: la cornice simula la larghezza di un client desktop o di un telefono. */
.tpl-frame-desktop { width: 100%; max-width: 680px; height: 620px; background: #fff; }
.tpl-frame-mobile { width: 375px; max-width: 100%; height: 620px; background: #fff; }

/* Anteprima di un messaggio in un riquadro isolato (campagne, approvazioni): altezza minima per leggerlo senza scorrere. */
.mail-preview { min-height: 18rem; }

/* Designer dei messaggi: palette, tela con la resa del server, proprietà del blocco. Solo token: il tema e la modalità scura li governano. */
.mc-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) 340px; gap: var(--s-4); align-items: start; margin-bottom: var(--s-5); }
.mc-palette, .mc-props { border: 1px solid var(--ab-linea); border-radius: var(--r-2); padding: var(--s-3); background: var(--ab-carta); position: sticky; top: var(--s-4); max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; }
.mc-palette-item { display: block; width: 100%; text-align: left; margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--ab-linea); border-radius: var(--r-1); background: var(--ab-fondo-2); color: var(--ab-inchiostro); cursor: grab; }
.mc-palette-item:hover, .mc-palette-item:focus-visible { border-color: var(--brand-primario); color: var(--brand-primario); }
.mc-palette-item:disabled { cursor: not-allowed; opacity: .5; }
.mc-canvas { border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-fondo-2); padding: var(--s-3); min-width: 0; }
.mc-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.mc-stage { max-width: 640px; margin: 0 auto; }
.mc-block { position: relative; border: 2px solid transparent; border-radius: var(--r-1); cursor: pointer; background: var(--ab-carta); }
.mc-block:hover { border-color: var(--ab-linea); }
.mc-block:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: 1px; }
.mc-block.selezionato { border-color: var(--brand-primario); }
.mc-block.trascinato { opacity: .45; }
.mc-block.fisso { cursor: default; }
.mc-frame { display: block; width: 100%; border: 0; min-height: 24px; pointer-events: none; }
.mc-overlay { position: absolute; inset: 0; }
.mc-etichetta { position: absolute; top: 0; left: 0; z-index: 1; padding: 0 var(--s-2); font-size: var(--t-micro); background: var(--brand-primario); color: #fff; border-bottom-right-radius: var(--r-1); opacity: 0; }
.mc-block:hover .mc-etichetta, .mc-block.selezionato .mc-etichetta, .mc-block:focus-visible .mc-etichetta { opacity: 1; }
.mc-slot { height: 10px; margin: 2px 0; border-radius: var(--r-1); transition: height .1s; }
.mc-slot.attivo { height: 28px; background: var(--ab-carta); border: 2px dashed var(--brand-primario); }
.mc-vuoto { text-align: center; padding: var(--s-7) var(--s-4); color: var(--ab-inchiostro-3); border: 2px dashed var(--ab-linea); border-radius: var(--r-2); }
@media (max-width: 1100px) { .mc-layout { grid-template-columns: 1fr; } .mc-palette, .mc-props { position: static; max-height: none; } .mc-palette { display: flex; flex-wrap: wrap; gap: var(--s-2); } .mc-palette-item { width: auto; margin: 0; } }

/* Segment builder: le condizioni come chip. Nessun colore di significato: i chip dicono cosa, non quanto va bene. */
.chip-gruppo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip { display: inline-block; padding: 1px var(--s-4); border: 1px solid var(--ab-linea); border-radius: 999px; background: var(--ab-fondo-2); color: var(--ab-inchiostro); font-size: var(--t-tabella); line-height: 1.6; }
.chip-op { font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; color: var(--ab-inchiostro-2); }
.chip-par { color: var(--ab-inchiostro-3); font-size: var(--t-medio); }
.chip-tolta { text-decoration: line-through; color: var(--ab-inchiostro-2); }
.chip-aggiunta::before { content: "+ "; font-weight: 700; }
.chip-tolta::before { content: "\2212 "; font-weight: 700; text-decoration: none; display: inline-block; }
.chip-valore { cursor: pointer; }
.chip-valore:hover, .chip-valore:focus-visible { border-color: var(--brand-primario); color: var(--brand-primario); }
.segmento-conteggio { font-size: var(--t-medio); }

/* ---- Designer dei workflow ----------------------------------------------------------------------------------------------------------------
   Flusso da sinistra a destra come negli strumenti di automazione: palette per gruppi, tela che si trascina e si ingrandisce, proprietà a destra.
   Nella tela il colore indica il TIPO di nodo (testata e tessera della palette): è un'eccezione deliberata alla regola «un solo significato», limitata al designer.
   Fuori dai nodi vale la regola: blu = selezione/azione, ambra = da completare. Solo posizione e misure dei nodi stanno nello stile: sono geometria. */
:root { --wf-trigger: #2f8a57; --wf-wait: #b7791f; --wf-branch: #6b46c1; --wf-task: #2f6fb0; --wf-email: #3fb0e6; --wf-notify: #0f9d8a; --wf-event: #d6457f; --wf-end: #3b4350; --wf-si: #2f8a57; --wf-no: #cf3f4a; --wf-rifiuto: #cf3f4a; --wf-raggio: 10px; }
html[data-theme="dark"] { --wf-trigger: #3aa96c; --wf-wait: #c98f2e; --wf-branch: #8663d6; --wf-task: #4a8bd0; --wf-email: #52bdea; --wf-notify: #2bb5a1; --wf-event: #e0638f; --wf-end: #566070; --wf-si: #3aa96c; --wf-no: #e0646d; --wf-rifiuto: #e0646d; }
.wf-testata { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-carta); }
.wf-titolo { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.wf-titolo h1 { font-size: var(--t-titolo); }
.wf-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 330px; gap: var(--s-4); align-items: start; margin-bottom: var(--s-6); }
.wf-palette, .wf-props { border: 1px solid var(--ab-linea); border-radius: var(--r-2); padding: var(--s-4); background: var(--ab-carta); position: sticky; top: var(--s-4); max-height: calc(100vh - 100px); overflow: auto; }
.wf-gruppo { margin: var(--s-4) 0 var(--s-3); }
.wf-gruppo:first-child { margin-top: 0; }
.wf-palette-item { display: flex; align-items: center; gap: var(--s-4); width: 100%; text-align: left; margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-carta); color: var(--ab-inchiostro); cursor: pointer; }
.wf-palette-item:hover, .wf-palette-item:focus-visible { border-color: var(--brand-primario); }
.wf-palette-item:disabled { cursor: not-allowed; opacity: .5; }
.wf-icona { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--r-2); background: color-mix(in srgb, var(--wf-end) 14%, transparent); color: var(--wf-end); flex: none; }
.wf-icona.tipo-wait { background: color-mix(in srgb, var(--wf-wait) 16%, transparent); color: var(--wf-wait); }
.wf-icona.tipo-branch { background: color-mix(in srgb, var(--wf-branch) 16%, transparent); color: var(--wf-branch); }
.wf-icona.tipo-task { background: color-mix(in srgb, var(--wf-task) 16%, transparent); color: var(--wf-task); }
.wf-icona.tipo-email { background: color-mix(in srgb, var(--wf-email) 16%, transparent); color: var(--wf-email); }
.wf-centro { min-width: 0; }
.wf-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.wf-area { position: relative; }
.wf-view { border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-fondo-2); overflow: auto; height: calc(100vh - 250px); min-height: 560px; cursor: grab; }
.wf-view.panoramica { cursor: grabbing; user-select: none; }
.wf-stage { position: relative; transform-origin: 0 0; background-image: radial-gradient(var(--ab-linea-forte) 1px, transparent 1px); background-size: 22px 22px; }
.wf-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wf-edge { fill: none; stroke: var(--ab-inchiostro); stroke-width: 3; }
.wf-edge.porta-si { stroke: var(--wf-si); }
.wf-edge.porta-no { stroke: var(--wf-no); }
.wf-edge.porta-rifiuto { stroke: var(--wf-rifiuto); }
.wf-edge.selezionato { stroke-width: 4.5; }
.wf-edge.sim { stroke: var(--brand-primario); stroke-width: 3.5; }
.wf-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.wf-edge-x { cursor: pointer; pointer-events: all; }
.wf-edge-x circle { fill: var(--ab-carta); stroke: var(--wf-no); stroke-width: 2; }
.wf-edge-x text { fill: var(--wf-no); font-size: 13px; font-weight: 700; }
.wf-edge-temp { fill: none; stroke: var(--brand-primario); stroke-width: 2.5; stroke-dasharray: 6 4; }
.wf-node { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; border: 2px solid var(--wf-end); border-radius: var(--wf-raggio); background: var(--ab-carta); color: var(--ab-inchiostro); cursor: grab; user-select: none; touch-action: none; overflow: visible; }
.wf-node:focus-visible { outline: 2px solid var(--brand-primario); outline-offset: 3px; }
.wf-node.selezionato { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primario) 28%, transparent); }
.wf-node.trascinato { opacity: .85; cursor: grabbing; }
.wf-node.da-completare { border-style: dashed; }
.wf-node.simulato { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primario) 35%, transparent); }
.wf-node.disattivato { opacity: .55; }
.wf-node.attivo::after { content: ""; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--wf-si); animation: wf-pulsa 1.6s ease-out infinite; }
@keyframes wf-pulsa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wf-si) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.wf-node.bloccato { cursor: default; }
.tipo-trigger { border-color: var(--wf-trigger); } .tipo-wait { border-color: var(--wf-wait); } .tipo-branch { border-color: var(--wf-branch); } .tipo-task { border-color: var(--wf-task); }
.tipo-email { border-color: var(--wf-email); } .tipo-notify { border-color: var(--wf-notify); } .tipo-event { border-color: var(--wf-event); } .tipo-end { border-color: var(--wf-end); }
.wf-node-testa { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: calc(var(--wf-raggio) - 2px) calc(var(--wf-raggio) - 2px) 0 0; background: var(--wf-end); color: #fff; font-size: var(--t-base); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wf-node-testa .wf-icona { width: 28px; height: 28px; border-radius: var(--wf-raggio); background: rgba(255, 255, 255, .22); color: #fff; }
.tipo-trigger .wf-node-testa { background: var(--wf-trigger); } .tipo-wait .wf-node-testa { background: var(--wf-wait); } .tipo-branch .wf-node-testa { background: var(--wf-branch); } .tipo-task .wf-node-testa { background: var(--wf-task); }
.tipo-email .wf-node-testa { background: var(--wf-email); } .tipo-notify .wf-node-testa { background: var(--wf-notify); } .tipo-event .wf-node-testa { background: var(--wf-event); } .tipo-end .wf-node-testa { background: var(--wf-end); }
.wf-pill { padding: 0 var(--s-3); border-radius: 999px; background: rgba(255, 255, 255, .24); font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; text-transform: none; font-variant-numeric: tabular-nums; }
.wf-pill:first-of-type { margin-left: auto; }
.wf-inizio { text-transform: uppercase; letter-spacing: .06em; }
.wf-node-corpo { padding: var(--s-4) var(--s-5); font-size: var(--t-tabella); color: var(--ab-inchiostro-2); overflow: hidden; }
.wf-nome { font-size: var(--t-medio); font-weight: 600; color: var(--ab-inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--s-2); }
.wf-sub { font-size: var(--t-mini); color: var(--ab-inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.wf-kv { display: flex; justify-content: space-between; gap: var(--s-4); line-height: 1.55; }
.wf-kv > span:first-child { color: var(--ab-inchiostro-3); }
.wf-kv > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.wf-presa { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ab-carta); background: var(--ab-inchiostro); box-shadow: 0 0 0 2px var(--ab-inchiostro); transform: translateY(-50%); pointer-events: none; }
.wf-presa.entrata { left: -12px; }
.wf-presa.uscita { right: -12px; }
.wf-port { position: absolute; right: -12px; width: 22px; height: 22px; padding: 0; border: 3px solid var(--ab-carta); border-radius: 50%; background: var(--ab-inchiostro); box-shadow: 0 0 0 2px var(--ab-inchiostro); cursor: crosshair; transform: translateY(-50%); }
.wf-port:hover, .wf-port:focus-visible { background: var(--brand-primario); box-shadow: 0 0 0 2px var(--brand-primario); }
.wf-port:not(.collegata) { background: var(--ab-carta); border-color: var(--ab-inchiostro-3); box-shadow: 0 0 0 2px var(--ab-inchiostro-3); }
.wf-port.si { background: var(--wf-si); box-shadow: 0 0 0 2px var(--wf-si); }
.wf-port.no, .wf-port.rifiuto { background: var(--wf-no); box-shadow: 0 0 0 2px var(--wf-no); }
.wf-port.si:not(.collegata), .wf-port.no:not(.collegata), .wf-port.rifiuto:not(.collegata) { background: var(--ab-carta); }
.wf-port-etichetta { position: absolute; left: var(--s-5); display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-base); color: var(--ab-inchiostro); transform: translateY(-50%); pointer-events: none; white-space: nowrap; }
.wf-port-etichetta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ab-inchiostro-3); }
.wf-port-etichetta.si::before { background: var(--wf-si); } .wf-port-etichetta.no::before, .wf-port-etichetta.rifiuto::before { background: var(--wf-no); }
.wf-zoom { position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%); display: flex; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-carta); box-shadow: var(--ab-ombra-menu); }
.wf-node.corrente { box-shadow: 0 0 0 5px color-mix(in srgb, var(--wf-branch) 40%, transparent); }
.wf-minimap { position: absolute; right: var(--s-6); bottom: var(--s-6); width: 200px; border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-carta); box-shadow: var(--ab-ombra-menu); cursor: pointer; overflow: hidden; }
.wf-minimap svg { display: block; width: 100%; height: auto; }
.wf-mini { fill: var(--wf-end); opacity: .85; }
.wf-mini.tipo-trigger { fill: var(--wf-trigger); } .wf-mini.tipo-wait { fill: var(--wf-wait); } .wf-mini.tipo-branch { fill: var(--wf-branch); } .wf-mini.tipo-task { fill: var(--wf-task); } .wf-mini.tipo-email { fill: var(--wf-email); } .wf-mini.tipo-notify { fill: var(--wf-notify); } .wf-mini.tipo-event { fill: var(--wf-event); }
.wf-mini-view { fill: color-mix(in srgb, var(--brand-primario) 12%, transparent); stroke: var(--brand-primario); stroke-width: 12; }
.wf-vuoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-9); color: var(--ab-inchiostro-3); pointer-events: none; }
.wf-props-testa { display: flex; align-items: center; gap: var(--s-3); margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-4); padding: var(--s-4); border-bottom: 1px solid var(--ab-linea); background: var(--ab-fondo-2); font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-inchiostro-2); }
.wf-props-vuoto { text-align: center; padding: var(--s-9) var(--s-4); }
.wf-simulazione li { margin-bottom: var(--s-3); }
.wf-simulazione .ora { color: var(--ab-inchiostro-3); font-variant-numeric: tabular-nums; }
.wf-problemi button { border: 0; background: none; padding: 0; color: var(--ab-inchiostro); text-align: left; cursor: pointer; }
.wf-problemi button:hover { color: var(--brand-primario); text-decoration: underline; }
@media (max-width: 1200px) { .wf-layout { grid-template-columns: 1fr; } .wf-palette, .wf-props { position: static; max-height: none; } }

/* ---- Editor dei moduli ----------------------------------------------------------------------------------------------------------------------
   Tre colonne: impostazioni e testi, campi con il loro pannello, anteprima. Il campo selezionato è blu, un campo da completare ha il bordo ambra. */
.fm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(320px, .9fr); gap: var(--s-4); align-items: start; margin-bottom: var(--s-6); }
.fm-colonna { min-width: 0; }
.fm-campo { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-carta); cursor: pointer; }
.fm-campo:hover, .fm-campo:focus-visible { border-color: var(--brand-primario); }
.fm-campo.selezionato { border-color: var(--brand-primario); box-shadow: 0 0 0 3px var(--ab-focus); }
.fm-campo.da-completare { border-color: var(--ab-bordo-ambra); background: var(--ab-velo-ambra); }
.fm-tipo { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: var(--r-2); background: var(--ab-velo-blu); color: var(--brand-primario); flex: none; }
.fm-testo { flex: 1; min-width: 0; }
.fm-azioni { display: flex; gap: var(--s-2); }
.fm-anteprima { position: sticky; top: var(--s-4); }
.fm-cornice { border: 1px solid var(--ab-linea); border-radius: var(--r-2); background: var(--ab-fondo-2); padding: var(--s-3); }
.fm-cornice iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; border-radius: var(--r-2); }
.fm-cornice.telefono iframe { width: 375px; max-width: 100%; margin: 0 auto; }
@media (max-width: 1300px) { .fm-layout { grid-template-columns: 1fr; } .fm-anteprima { position: static; } }

/* Pagina Licenza: il campo del seriale ha una larghezza sua dal tablet in su */
@media (min-width: 768px) { .licenza-chiave { flex: 0 1 22rem; } }