:root {
    --blu: #1b4f72;
    --blu-scuro: #123350;
    --grigio-chiaro: #f4f6f8;
    --grigio-bordo: #d7dde3;
    --testo: #23303c;
    --errore: #b3261e;
    --successo: #1e7d32;
}

* {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Colori degli elementi HTML dell'interfaccia (freccia, "Vai a...", schede, riquadri, pulsanti, menu) che
   seguono il tema DevExpress scelto dall'utente: Site.Master mette sul body la classe "tema-<nome>"
   (Infrastruttura/Temi.cs). Valori predefiniti = Office2010Blue.
   ------------------------------------------------------------------ */
:root {
    --qb-primario: #1f5bc4;
    --qb-scuro: #123a8c;
    --qb-chiaro: #eef3fb;
    --qb-chiaro2: #e6eefb;
    --qb-sfondo-tenue: #f3f6fb;
    --qb-bordo: #c5d6ec;
    --qb-bordo-forte: #9fb8de;
}

/* Stessi valori, per un elemento che deve mostrare il tema predefinito anche quando l'utente ne usa un altro
   (anteprima e striscia dei colori della pagina Utenti/Stile.aspx). */
.tema-office2010blue {
    --qb-primario: #1f5bc4;
    --qb-scuro: #123a8c;
    --qb-chiaro: #eef3fb;
    --qb-chiaro2: #e6eefb;
    --qb-sfondo-tenue: #f3f6fb;
    --qb-bordo: #c5d6ec;
    --qb-bordo-forte: #9fb8de;
}

body.tema-office2010silver,
.tema-office2010silver {
    --qb-primario: #5a6f87;
    --qb-scuro: #3b4a5c;
    --qb-chiaro: #f2f3f5;
    --qb-chiaro2: #eaecef;
    --qb-sfondo-tenue: #f7f8f9;
    --qb-bordo: #d6dbe1;
    --qb-bordo-forte: #bdc5cf;
}

body.tema-office2010black,
.tema-office2010black {
    --qb-primario: #3f4a56;
    --qb-scuro: #22282f;
    --qb-chiaro: #f0f1f1;
    --qb-chiaro2: #e6e7e9;
    --qb-sfondo-tenue: #f5f6f7;
    --qb-bordo: #cfd2d5;
    --qb-bordo-forte: #b2b7bb;
}

body.tema-office365,
.tema-office365 {
    --qb-primario: #0072c6;
    --qb-scuro: #005a9e;
    --qb-chiaro: #ebf4fa;
    --qb-chiaro2: #deedf8;
    --qb-sfondo-tenue: #f2f8fc;
    --qb-bordo: #bfdcf1;
    --qb-bordo-forte: #99c7e8;
}

body.tema-moderno,
.tema-moderno {
    --qb-primario: #1279c6;
    --qb-scuro: #0d5a94;
    --qb-chiaro: #ecf4fa;
    --qb-chiaro2: #e0eef8;
    --qb-sfondo-tenue: #f3f8fc;
    --qb-bordo: #c4def1;
    --qb-bordo-forte: #a0c9e8;
}

body.tema-material,
.tema-material {
    --qb-primario: #3f51b5;
    --qb-scuro: #2c3a8c;
    --qb-chiaro: #f0f1f9;
    --qb-chiaro2: #e6e8f5;
    --qb-sfondo-tenue: #f5f6fb;
    --qb-bordo: #cfd4ec;
    --qb-bordo-forte: #b2b9e1;
}

body.tema-materialcompact,
.tema-materialcompact {
    --qb-primario: #3f51b5;
    --qb-scuro: #2c3a8c;
    --qb-chiaro: #f0f1f9;
    --qb-chiaro2: #e6e8f5;
    --qb-sfondo-tenue: #f5f6fb;
    --qb-bordo: #cfd4ec;
    --qb-bordo-forte: #b2b9e1;
}

body.tema-metropolis,
.tema-metropolis {
    --qb-primario: #d9711c;
    --qb-scuro: #a7530f;
    --qb-chiaro: #fcf4ed;
    --qb-chiaro2: #faede1;
    --qb-sfondo-tenue: #fdf8f4;
    --qb-bordo: #f6dcc6;
    --qb-bordo-forte: #f0c6a4;
}

body.tema-metropolisblue,
.tema-metropolisblue {
    --qb-primario: #3a76c4;
    --qb-scuro: #275896;
    --qb-chiaro: #eff4fa;
    --qb-chiaro2: #e5edf7;
    --qb-sfondo-tenue: #f5f8fc;
    --qb-bordo: #ceddf0;
    --qb-bordo-forte: #b0c8e7;
}

body.tema-ios,
.tema-ios {
    --qb-primario: #007aff;
    --qb-scuro: #0062cc;
    --qb-chiaro: #ebf4ff;
    --qb-chiaro2: #deeeff;
    --qb-sfondo-tenue: #f2f8ff;
    --qb-bordo: #bfdeff;
    --qb-bordo-forte: #99caff;
}

body.tema-mulberry,
.tema-mulberry {
    --qb-primario: #8b2a6c;
    --qb-scuro: #651e4e;
    --qb-chiaro: #f6eef3;
    --qb-chiaro2: #f0e3ec;
    --qb-sfondo-tenue: #f9f4f8;
    --qb-bordo: #e2cada;
    --qb-bordo-forte: #d1aac4;
}

body.tema-aqua,
.tema-aqua {
    --qb-primario: #2a8fbd;
    --qb-scuro: #1d6a8c;
    --qb-chiaro: #eef6fa;
    --qb-chiaro2: #e3f0f6;
    --qb-sfondo-tenue: #f4f9fc;
    --qb-bordo: #cae3ee;
    --qb-bordo-forte: #aad2e5;
}

body.tema-softorange,
.tema-softorange {
    --qb-primario: #e3732b;
    --qb-scuro: #b5561a;
    --qb-chiaro: #fdf4ee;
    --qb-chiaro2: #fbede3;
    --qb-sfondo-tenue: #fef8f4;
    --qb-bordo: #f8dcca;
    --qb-bordo-forte: #f4c7aa;
}

body.tema-devex,
.tema-devex {
    --qb-primario: #3d6a9e;
    --qb-scuro: #2a4d75;
    --qb-chiaro: #eff3f7;
    --qb-chiaro2: #e6ecf2;
    --qb-sfondo-tenue: #f5f8fa;
    --qb-bordo: #cedae7;
    --qb-bordo-forte: #b1c3d8;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--testo);
    background: var(--grigio-chiaro);
}

.topbar {
    background: #fff;
    color: var(--testo);
    border-bottom: 1px solid var(--grigio-bordo);
}

.topbar-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--blu);
    text-decoration: none;
}

/* Logo orizzontale nella barra in alto (immagine a doppia risoluzione: 450x120, mostrata alta 44px). */
.brand-logo {
    display: block;
    height: 44px;
    width: auto;
}


.mainnav {
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}

.mainnav a {
    color: #dce6f0;
    text-decoration: none;
    font-size: 0.95rem;
}

.mainnav a:hover {
    color: #fff;
    text-decoration: underline;
}

.logout-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-link {
    background: none;
    border: none;
    color: #dce6f0;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 0;
}

/* Spazi compatti in tutte le pagine: poco margine sotto la barra del menu e intorno al titolo. */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.6rem 1.5rem 2rem;
    box-sizing: border-box;
}

/* Titolo delle pagine: leggero e nel colore scuro del tema, per non pesare più di menu e pulsanti. */
h1 {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--qb-scuro);
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.1rem;
    margin-top: 0;
}

.card {
    background: #fff;
    border: 1px solid var(--grigio-bordo);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    max-width: 420px;
}


.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--grigio-bordo);
    border-radius: 4px;
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--blu);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--blu-scuro);
}

.btn-secondary {
    margin-left: 0.75rem;
    color: var(--blu);
    text-decoration: none;
}

.field-error {
    color: var(--errore);
    font-size: 0.8rem;
}

.validation-summary ul {
    color: var(--errore);
    margin: 0 0 1rem;
    padding-left: 1.1rem;
}

.alert {
    padding: 0.65rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success {
    background: #e7f5ea;
    color: var(--successo);
    border: 1px solid #bfe3c6;
}

.alert-error {
    background: #fbe9e7;
    color: var(--errore);
    border: 1px solid #f1c3bd;
}

.alert-info {
    background: #eaf2fb;
    color: #1b4e82;
    border: 1px solid #bcd7f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--grigio-bordo);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--grigio-bordo);
    font-size: 0.9rem;
}

.data-table th {
    background: #eef2f5;
    font-weight: 600;
}

.quick-links {
    padding-left: 1.1rem;
}

.inline-form {
    display: inline;
    margin-left: 0.5rem;
}

.filtro-form {
    max-width: 320px;
    margin-bottom: 1.25rem;
}

.filtro-form label {
    margin-bottom: 0.25rem;
}

.assegnazioni-columns {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.assegnazioni-columns .card {
    flex: 1 1 380px;
    max-width: none;
}

.assegnazioni-columns .card form.inline-form {
    display: block;
    margin: 0 0 0.75rem;
}

.riconciliazione-filtro {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.riconciliazione-filtro label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

/* I tre riquadri "Periodo"/"Filtro movimenti"/"Altro" sopra le griglie — su richiesta dell'utente,
   tre groupbox affiancati orizzontalmente al posto dell'unica card bianca che prima li conteneva
   tutti insieme (stesso <fieldset>/<legend> nativi già usati per "Dati Riconciliazione": la legend
   si posiziona da sola a cavallo del bordo superiore, niente trucchi CSS aggiuntivi). Colori neutri
   (sfondo bianco, bordo grigio) come la vecchia .card che sostituiscono, non azzurri come "Dati
   Riconciliazione" (quello resta l'unico riquadro "informativo" in stile alert-info). */
.riconciliazione-filtro-gruppo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--grigio-bordo);
    border-radius: 8px;
    padding: 0.6rem 1rem 0.85rem;
    margin: 0;
    min-width: 0;
}

.riconciliazione-filtro-gruppo legend {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--testo);
    padding: 0 0.5rem;
    margin-left: 0.5rem;
}

/* Le griglie Banca/Contabilità restano affiancate sulla stessa riga anche con molte colonne o su
   schermi stretti: niente wrap, ogni riquadro scorre in orizzontale per conto proprio invece di
   andare a capo sotto l'altro. */
.riconciliazione-griglie {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.riconciliazione-griglie > .card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

/* Toolbar sopra ciascuna griglia Banca/Contabilità (somma selezionati + pulsanti Nuovo/Modifica/
   Elimina che agiscono sulla riga corrente) — porta la barra del DBNavigator dell'originale Delphi,
   al posto dei link Modifica/Elimina per riga. */
.riconciliazione-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Titolo (Banca/Contabilità) e somma dei selezionati sulla stessa riga dei pulsanti. */
.riconciliazione-toolbar-titolo {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

/* "Diff. Banca-Contabilità" accanto alla somma dei selezionati (solo movimenti non riconciliati). */
.riconciliazione-differenza {
    margin-left: 0.75rem;
}

.riconciliazione-differenza-ko strong {
    color: #c62828;
}

.riconciliazione-toolbar-titolo h2 {
    margin: 0;
}

.riconciliazione-toolbar-bottoni {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.riga-riconciliata {
    background: #f2f8fd; /* azzurro molto tenue */
    color: #4f6278;
}

/* Riepilogo Entrate/Uscite/Saldo/N. Mov. sotto ciascuna griglia Banca/Contabilità — porta la barra
   di totali a piè di griglia dell'originale Delphi (Tfm_Riconciliazione), ricalcolata sui soli
   movimenti attualmente visibili (rispetta il filtro "Mostra" e la vista abbinamento). */
.riconciliazione-saldi {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.riconciliazione-saldo-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.riconciliazione-saldo-etichetta {
    font-size: 0.78rem;
    font-weight: 600;
}

.riconciliazione-saldo-valore {
    border: 1px solid var(--grigio-bordo);
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    background: #fff;
    font-size: 0.9rem;
    min-width: 90px;
    text-align: right;
}

/* Nel riepilogo Entrate/Uscite/Saldo/N. Mov. subito sotto ciascuna griglia (.riconciliazione-saldi),
   etichetta e valore affiancati sulla stessa riga invece che etichetta sopra/valore sotto — la barra
   "Dati Riconciliazione" più sotto (.riconciliazione-datiriconciliazione-valori) riusa le stesse classi
   .riconciliazione-saldo-item/-etichetta/-valore ma resta in colonna, non essendo "in fondo alla
   griglia" bensì un riquadro a parte sotto entrambe le griglie. */
.riconciliazione-saldi .riconciliazione-saldo-item {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
}

/* Barra "Dati Riconciliazione" sotto le due griglie — porta il riquadro azzurro dell'originale
   Delphi con Saldo/Movimenti da riconciliare/Saldo riconciliato per Banca e Contabilità. Stesso
   colore di sfondo di .alert-info, riusa le classi .riconciliazione-saldo-item/-etichetta/-valore
   per le singole caselle. I due gruppi Banca/Contabilità dentro
   .riconciliazione-datiriconciliazione-valori usano `flex: 1 1 0` con lo stesso gap di
   .riconciliazione-griglie, esattamente come le due card Banca/Contabilità sopra — così il gruppo
   Contabilità (dopo il separatore) occupa la metà destra della riga, allineandosi alla seconda
   griglia invece di restare accodato a sinistra insieme al gruppo Banca.
   L'elemento è ora un <fieldset>/<legend> HTML nativo invece di due <div> (su richiesta
   dell'utente: "dagli l'aspetto di un groupbox"), per riprodurre il vero effetto "groupbox" del
   Delphi originale (TGroupBox: bordo che corre tutto intorno al riquadro, con la scritta incassata/
   che taglia la linea del bordo in alto a sinistra) — cosa che due <div> impilati non possono fare
   da soli, perché il bordo del contenitore passerebbe sotto l'etichetta invece di "aprirsi" per
   farle spazio. <legend> ha questo comportamento incorporato nel browser (viene posizionata a
   cavallo del bordo superiore del <fieldset>, escludendola dal suo layout flex/grid), quindi non
   serve nessun trucco CSS aggiuntivo: bastano il reset dei default del browser per <fieldset>
   (che avrebbe altrimenti un bordo/padding/margine propri, tipicamente un incavo 3D grigio) e un
   po' di padding orizzontale sulla legend per staccarla leggermente dal bordo, come in un vero
   groupbox. */
.riconciliazione-datiriconciliazione {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #e4effa; /* stesso celeste dell'area vuota delle griglie (tema Office2010Blue) */
    border: 1px solid #8ba0bc; /* stesso bordo delle griglie */
    border-radius: 8px;
    padding: 0.6rem 1.25rem 0.8rem;
    margin: 0 0 1rem;
    min-width: 0;
}

.riconciliazione-datiriconciliazione-etichetta {
    font-weight: 700;
    color: #1b4e82;
    padding: 0 0.5rem;
    margin-left: 0.5rem;
}

.riconciliazione-datiriconciliazione-valori {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.riconciliazione-datiriconciliazione-gruppo {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
}

/* Contenuto dei groupbox "Periodo" e "Movimenti" in Riconciliazione/Movimenti.aspx: stessa altezza
   (quella del pulsante Aggiorna da 32px), così i due riquadri risultano allineati. */
.qb-filtro-riga {
    height: 30px;
}

/* Spazio fra un campo e il successivo (es. fra "Dal" e "Al"). */
table.qb-filtro-riga td {
    padding: 0 0.75rem 0 0;
}

div.qb-filtro-riga {
    display: flex;
    align-items: center;
}

/* Box (popup) dei messaggi di conferma/errore della master page. */
.popup-messaggio .alert {
    margin: 0;
}

/* Popup "Saldo iniziale" in Riconciliazione/Movimenti.aspx. */
.popup-saldo-nota {
    margin: 0 0 0.6rem;
    font-size: 0.9em;
}

.popup-saldo-campi td {
    padding: 0.2rem 0.6rem 0.2rem 0;
}

.popup-saldo-errore {
    color: #c62828;
    margin: 0.6rem 0 0;
}

.popup-messaggio-comandi {
    text-align: center;
    margin-top: 0.9rem;
}

.riconciliazione-datiriconciliazione-separatore {
    width: 1px;
    align-self: stretch;
    background: #8ba0bc;
}

/* ------------------------------------------------------------------
   Adattamenti per i controlli DevExpress ASP.NET (versione Web Forms)
   ------------------------------------------------------------------ */

/* Il menu principale (ASPxMenu) sta nella barra blu: sfondo trasparente e testo chiaro, come i link
   della vecchia barra di navigazione. */
/* Menu principale (ribbon) nella barra superiore bianca: occupa lo spazio tra il nome e l'utente. */
/* Menu principale nella barra in alto: voci con menu a tendina (Site.Master). */
.topbar .menu-principale {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topbar-inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.menu-voce {
    position: relative;
}

.menu-titolo {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: #33414f;
    cursor: pointer;
}

/* Pulsante pieno blu con icona, per l'azione principale (es. "Salva" in ImportazioniStandard/Scheda.aspx). */
.qb-pulsante-pieno {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border: 1px solid var(--qb-primario);
    border-radius: 6px;
    background: var(--qb-primario);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

.qb-pulsante-pieno:hover {
    background: var(--qb-scuro);
    border-color: var(--qb-scuro);
}

/* Pulsanti come elementi button: stesso carattere della pagina; disabilitati, sbiaditi e senza effetti. */
button.qb-pulsante-chiaro,
button.qb-pulsante-pieno {
    font-family: inherit;
}

button.qb-pulsante-chiaro[disabled],
button.qb-pulsante-pieno[disabled] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* ImportazioniStandard/Scheda.aspx: avviso delle modifiche non salvate e pulsanti, allineati a destra sotto
   l'associazione. */
.standard-comandi {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
}

.standard-avviso {
    margin-right: auto;
    color: #CC3300;
    font-style: italic;
}

/* Pulsante chiaro con icona (bianco, bordo azzurro), es. "Scegli file di esempio" in ImportazioniStandard/Scheda.aspx. */
.qb-pulsante-chiaro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--qb-bordo);
    border-radius: 6px;
    background: #fff;
    color: var(--qb-scuro) !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}

.qb-pulsante-chiaro:hover {
    background: var(--qb-chiaro);
    border-color: var(--qb-bordo-forte);
}

/* Controllo di caricamento DevExpress presente nella pagina ma invisibile: la scelta del file si apre da un
   pulsante esterno (DialogTriggerID). Non display:none, altrimenti il controllo non si inizializza. */
.qb-upload-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Voce di menu senza tendina (link diretto). */
a.menu-titolo {
    text-decoration: none;
}

.menu-titolo:hover,
.menu-voce:focus-within > .menu-titolo,
.menu-voce.aperto > .menu-titolo {
    background: var(--qb-chiaro);
}

.menu-voce.attiva > .menu-titolo {
    background: var(--qb-chiaro2);
    color: var(--qb-scuro);
    font-weight: 600;
}

.menu-freccia {
    opacity: 0.6;
}

/* La tendina: compare al passaggio del mouse, con la tastiera (focus) o al clic (classe "aperto"). */
.menu-tendina {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    min-width: 230px;
    padding: 0.35rem;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--grigio-bordo);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.menu-tendina-destra {
    left: auto;
    right: 0;
}

/* Ponte invisibile fra voce e tendina: il menu non si chiude passando con il mouse nello spazio fra i due. */
.menu-tendina::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}

@media (hover: hover) {
    .menu-voce:hover > .menu-tendina {
        display: block;
    }
}

.menu-voce:focus-within > .menu-tendina,
.menu-voce.aperto > .menu-tendina {
    display: block;
}

.menu-tendina a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    color: #33414f;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.menu-tendina a:hover {
    background: var(--qb-chiaro);
    color: var(--qb-scuro);
}

.menu-icona-svg {
    flex: none;
    color: #5b6b7c;
}

.menu-tendina a:hover .menu-icona-svg {
    color: var(--qb-scuro);
}

/* Menu dell'utente a destra. */
.menu-utente {
    margin-left: auto;
}

.menu-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0d7a35;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.menu-nome {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .menu-nome {
        display: none;
    }
}

.topbar .btn-esci,
.topbar .btn-esci .dx-vam {
    color: var(--blu);
}

/* Le etichette DevExpress sopra i campi, come le <label> della versione precedente. */
.form-group label.dxeBase,
.form-group span.dxeBase {
    display: block;
    margin-bottom: 0.25rem;
}

/* Link "Annulla" accanto al pulsante Salva dei form. */
.link-annulla {
    margin-left: 1rem;
}

/* Filtri sopra le griglie (combo azienda, combo collaboratore). */
.filtro-form .dxeBase {
    margin-bottom: 0.25rem;
}

/* "Parametri di riconciliazione" (Riconciliazione/Automatica.aspx, porta fm_OpzioniQuadratura): un
   riquadro per gruppo di criteri, uno sotto l'altro, con le domande sopra ai rispettivi radio button. */
.parametri-gruppo {
    display: block;
    max-width: 760px;
    margin: 0 0 1rem;
}

.parametri-domanda {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Popup di modifica delle griglie (e FormLayout): la regola globale "label { display:block }"
   mandava a capo l'asterisco dei campi obbligatori. Caption e "*" restano sulla stessa riga. */
[class*="dxgvEditFormCaption"] label,
[class*="dxgvEditFormCaption"] span,
[class*="dxflCaption"] label,
label[class*="dxflCaption"] {
    display: inline;
    margin-bottom: 0;
}

[class*="dxgvEditFormCaption"] {
    white-space: nowrap;
}

/* Link sotto i pulsanti delle pagine di accesso (Password dimenticata?, Torna all'accesso). */

/* Conti/Default.aspx: griglia dei conti a sinistra, anni abilitati del conto selezionato a destra.
   Su schermi stretti le due griglie vanno una sotto l'altra. */
.conti-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.conti-master {
    flex: 1 1 auto;
    min-width: 0;
}

.conti-anni {
    flex: 0 0 260px;
}

@media (max-width: 900px) {
    .conti-layout {
        flex-direction: column;
    }

    .conti-anni {
        flex-basis: auto;
        width: 100%;
    }
}

/* Ordini/Default.aspx: anni della licenza a sinistra, conti assegnati all'anno selezionato a destra.
   Su schermi stretti le due griglie vanno una sotto l'altra. */
.ordini-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ordini-anni {
    flex: 0 0 260px;
}

.ordini-conti {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .ordini-layout {
        flex-direction: column;
    }

    .ordini-anni {
        flex-basis: auto;
        width: 100%;
    }
}

/* Utenti/Default.aspx: griglia degli utenti a sinistra, conti assegnati all'utente selezionato a destra.
   Su schermi stretti le due griglie vanno una sotto l'altra. */
.utenti-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.utenti-master {
    flex: 1 1 auto;
    min-width: 0;
}

.utenti-conti {
    flex: 0 0 420px;
}

@media (max-width: 1100px) {
    .utenti-layout {
        flex-direction: column;
    }

    .utenti-conti {
        flex-basis: auto;
        width: 100%;
    }
}

/* Importazione/Storico.aspx: date delle importazioni a sinistra, movimenti a destra. */
.storico-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.storico-date {
    flex: 0 0 180px;
}

.storico-movimenti {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .storico-layout {
        flex-direction: column;
    }

    .storico-date {
        flex-basis: auto;
        width: 100%;
    }
}

/* Messaggio al posto di un elenco vuoto (es. associazione campi non ancora registrata). */
.nota-vuota {
    padding: 0.5rem 0;
    font-style: italic;
    color: #555;
}

/* Importazione/Nuova.aspx: pulsanti sotto l'elenco dell'associazione campi. */
.associazione-comandi {
    text-align: center;
    margin-top: 0.75rem;
}

.associazione-nomefile {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #555;
}

.anteprima-tabella {
    margin-top: 0.4rem;
    max-height: 220px;
    overflow: auto;
    /* Larghezza contenuta nella pagina: le tabelle dei controlli DevExpress che la contengono si allargano
       al contenuto; con width 0 + min-width 100% il riquadro non le allarga e la tabella scorre dentro. */
    width: 0;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #a3c0e8;
    background: #fff;
}

.anteprima-tabella:empty {
    display: none;
}

.anteprima-tabella table {
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
}

.anteprima-tabella th,
.anteprima-tabella td {
    border: 1px solid #dde6f3;
    padding: 2px 6px;
    text-align: left;
}

.anteprima-tabella th {
    position: sticky;
    top: 0;
    background: #e4effa;
    font-weight: 600;
}

/* Nota sopra l'anteprima: riga in cui è stata trovata l'intestazione del file. */
.anteprima-nota {
    margin: 0.3rem 0.4rem;
    font-size: 0.8rem;
    color: #15428b;
}
/* "Lettura avanzata" (Azure) nella nota dell'anteprima di un PDF letto con l'OCR: pulsante chiaro piccolo. */
.anteprima-nota .anteprima-avanzata {
    margin-left: 4px;
    padding: 1px 9px;
    font-size: 0.8rem;
}

/* Importazione/Nuova.aspx: riepilogo dell'ultima importazione. */
.esito-importazione {
    margin-top: 0.75rem;
}

.esito-importazione h3 {
    margin: 0 0 0.5rem;
}

.esito-tabella td {
    padding: 2px 12px 2px 0;
}

/* Intestazione comune delle pagine di un conto (Importazione/Storico.aspx e Nuova.aspx,
   Riconciliazione/Movimenti.aspx e VerificaIntegrita.aspx): su una sola riga il pulsante Torna, il conto con
   la descrizione e, a destra, i comandi della pagina. Va a capo se la finestra è stretta. */
.qb-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.6rem;
    min-height: 36px;
}

.qb-testata h1 {
    margin: 0;
}

/* ImportazioniStandard/Scheda.aspx: riga sotto l'intestazione con etichetta e descrizione. */
.standard-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0.25rem 0 0.75rem;
}

.standard-etichetta {
    font-weight: normal;
    margin: 0;
}

/* Nome del file e pulsante di scelta, nella barra del titolo del riquadro del file. */
.standard-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: normal;
}

/* Invito a scegliere il file, nel riquadro del file prima della scelta. */
.standard-invito {
    margin: 0.4rem 0;
}

/* Riquadro con barra del titolo (HTML semplice, stesso aspetto con ogni tema): ImportazioniStandard/Scheda.aspx. */
.qb-riquadro {
    border: 1px solid var(--qb-bordo);
    border-radius: 8px;
    background: #fff;
    min-width: 0;
    /* Carattere esplicito: dentro i pannelli DevExpress (es. ASPxCallbackPanel) altrimenti si eredita quello del tema. */
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
}

.qb-riquadro-titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Stessa altezza con o senza pulsanti nella barra (es. "Proponi in automatico"). */
    min-height: 46px;
    box-sizing: border-box;
    padding: 6px 12px;
    background: var(--qb-chiaro);
    border-bottom: 1px solid var(--qb-bordo);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--qb-scuro);
}

.qb-riquadro-corpo {
    padding: 10px 12px;
}

/* ImportazioniStandard/Scheda.aspx: associazione e pulsanti a sinistra, file e anteprima a destra; stessa
   dimensione del testo; su schermi stretti uno sotto l'altro. */
.standard-layout {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

/* A sinistra l'associazione e i pulsanti (larga quanto serve); a destra il riquadro del file (il resto della
   larghezza), alto quanto la colonna di sinistra: l'anteprima lo riempie. */
.standard-col-associazione {
    flex: 0 0 auto;
}

.standard-col-file {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.standard-anteprima {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.standard-anteprima .qb-riquadro-corpo {
    flex: 1 1 auto;
    position: relative;
    min-height: 220px;
}

/* La tabella dell'anteprima occupa tutto il corpo del riquadro e scorre dentro (non allunga la colonna). */
.standard-anteprima .anteprima-tabella {
    position: absolute;
    inset: 10px 12px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 0;
    border: none;
}

.standard-layout .anteprima-tabella table,
.standard-layout .anteprima-nota {
    font-size: inherit;
}

@media (max-width: 1100px) {
    .standard-layout {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ImportazioniStandard/Scheda.aspx: associazione dei campi, una riga per campo della procedura con il menu
   delle colonne del file e la ✕ per togliere l'associazione. */
.associazione-tabella {
    border-collapse: collapse;
}

.associazione-tabella th {
    text-align: left;
    font-weight: 600;
    color: #5a6878;
    padding: 2px 10px 4px 0;
}

.associazione-tabella td {
    padding: 3px 10px 3px 0;
}

.associazione-campo {
    font-weight: 600;
    min-width: 150px;
}

.associazione-obbligatorio {
    color: #CC3300;
}

.associazione-tabella select {
    min-width: 220px;
    padding: 2px 4px;
    border: 1px solid #9fb0c8;
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

.associazione-togli {
    border: none;
    background: none;
    color: #c33;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
}

.standard-file .associazione-nomefile {
    margin-top: 0;
}

.qb-testata-conto {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--qb-scuro);
}

/* Conto dopo il titolo della pagina (Importazione/Storico.aspx), separato da una linea verticale sottile. */
.qb-testata-separato {
    padding-left: 1rem;
    border-left: 1px solid #dde4ee;
}

/* Icona dentro un pulsante chiaro DevExpress (es. "Nuova importazione"): un po' di spazio dal testo. */
.qb-pulsante-chiaro .qb-ico { margin-right: 6px; }

.qb-testata-descrizione {
    font-weight: normal;
    color: #5a6878;
}
/* Riconciliazione: banca + IBAN + descrizione su una riga sola, con lunghezza massima ("…" oltre; testo intero nel
   suggerimento), così i filtri e "Vai a Importazioni" non vanno a capo. */
.qb-testata-conto-breve {
    display: inline-block;
    max-width: min(26rem, 30vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.qb-testata-tipo {
    font-weight: 600;
    color: #CC3300;
}

/* Gruppo di filtri o comandi nella riga dell'intestazione (Riconciliazione/Movimenti.aspx: periodo, tipo di
   movimenti, icone), separato dal precedente da una linea verticale sottile. */
.qb-testata-gruppo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid #dde4ee;
}

.qb-testata-icone {
    gap: 0.35rem;
}

.qb-testata-comandi {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Intestazione: freccia tonda per tornare indietro (all'elenco dei conti o allo storico). */
.qb-torna {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--qb-bordo);
    background: #fff;
    color: var(--qb-scuro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.qb-torna:hover {
    background: var(--qb-chiaro);
    border-color: var(--qb-bordo-forte);
}

/* Intestazione: "Vai a ..." (Importazioni o Riconciliazione dello stesso conto), pulsante blu pieno. */
.qb-vai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--qb-primario);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none !important;
    white-space: nowrap;
}

.qb-vai:hover {
    background: var(--qb-scuro);
}

/* Schede (link semplici, ognuno ricarica la pagina): Importazione/Storico.aspx, Movimenti Banca / Contabilità.
   La scheda attiva ha la classe "attiva"; sotto, .qb-schede-contenuto fa da riquadro unito alle schede. */
.qb-schede {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--qb-primario);
}

.qb-schede a {
    padding: 6px 18px;
    border: 1px solid var(--qb-bordo);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    background: var(--qb-sfondo-tenue);
    color: #5a6878;
    font-weight: 600;
    text-decoration: none;
}

.qb-schede a:hover {
    background: var(--qb-chiaro2);
    color: var(--qb-scuro);
}

.qb-schede a.attiva {
    background: var(--qb-primario);
    border-color: var(--qb-primario);
    color: #fff;
}

.qb-schede-contenuto {
    border: 1px solid var(--qb-bordo);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px;
}

/* ------------------------------------------------------------------
   Cruscotto iniziale (Default.aspx): stesso stile delle altre pagine (riquadri .qb-riquadro con la barra del
   titolo, colori del tema --qb-*); l'arancio segna ciò che è da fare (da quadrare, da riconciliare).
   ------------------------------------------------------------------ */
.cruscotto {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.cruscotto-intestazione h1 { margin: 0; }
.cruscotto-sottotitolo {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: #5a6878;
}

/* Riquadri di riepilogo: striscia a sinistra nel colore del tema, arancio se c'è qualcosa da fare. */
.cruscotto-riquadri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.cruscotto-riquadro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 10px 16px;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    border-radius: 8px;
    color: inherit !important;
    text-decoration: none !important;
}
.cruscotto-riquadro::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--qb-primario);
}
.cruscotto-riquadro:hover { border-color: var(--qb-primario); }
.cruscotto-riquadro-titolo {
    font-size: 0.78rem;
    font-weight: 600;
    color: #5a6878;
}
.cruscotto-riquadro-valore {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--qb-scuro);
}
.cruscotto-riquadro-valore small {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5a6878;
}
.cruscotto-riquadro-nota { font-size: 0.78rem; color: #5a6878; }
.cruscotto-riquadro-avviso::before { background: #e8a33c; }
.cruscotto-riquadro-avviso .cruscotto-riquadro-valore { color: #9a5b00; }
.cruscotto-riquadro-avviso:hover { border-color: #e8a33c; }

/* "Ultimi conti lavorati": quattro schede affiancate. */
.cruscotto-schede {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.scheda {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    border-radius: 8px;
}
.scheda-testata { display: flex; align-items: flex-start; gap: 8px; }
.scheda-nome { min-width: 0; }
.scheda-nome > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scheda-banca { font-size: 0.95rem; font-weight: 700; color: var(--qb-scuro); }
/* Ultimi conti lavorati: IBAN accanto alla banca; sotto azienda e descrizione. */
.scheda-iban { margin-left: 4px; font-size: 0.75rem; color: #5a6878; }
.scheda-dettaglio { font-size: 0.75rem; color: #5a6878; }
.scheda-stato {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 9px;
    border: 1px solid;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.scheda-stato-verde { color: #1e7a3c; background: #e8f5ec; border-color: #b6dcc2; }
.scheda-stato-giallo { color: #8a6500; background: #fff8e1; border-color: #f0dc9c; }
.scheda-stato-rosso { color: #b3261e; background: #fdecec; border-color: #f3c2be; }
.scheda-numeri {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    text-align: center;
}
.scheda-numeri div { padding: 4px 2px; border-radius: 6px; background: var(--qb-chiaro); }
.scheda-numeri span { display: block; font-size: 0.68rem; color: #5a6878; }
.scheda-numeri strong { color: var(--qb-scuro); }
.scheda-riga { display: flex; justify-content: space-between; font-size: 0.75rem; color: #5a6878; }
.cruscotto-barra {
    height: 8px;
    margin-top: 3px;
    border-radius: 4px;
    background: var(--qb-chiaro2);
    overflow: hidden;
}
.cruscotto-barra-valore { height: 100%; background: var(--qb-primario); }
.scheda-piede {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 7px;
    border-top: 1px solid #eef2f7;
}
.scheda-nota { margin-right: auto; font-size: 0.72rem; color: #5a6878; }
.scheda-icona {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.scheda-icona:hover { background: var(--qb-chiaro); }

/* "Priorità dei lavori" e "Situazione" affiancati. */
.cruscotto-lavoro {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}
.cruscotto-titolo-nota { margin-left: auto; font-weight: normal; font-size: 0.8rem; color: #5a6878; }

/* Barre al 100% (Default.aspx.cs, MostraGrafico): riconciliati nel colore del tema, da riconciliare in arancio. */
.grafico-lavoro { display: flex; flex-direction: column; gap: 9px; }
.grafico-legenda { display: flex; gap: 1rem; font-size: 0.78rem; color: #5a6878; }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.grafico-riga {
    display: grid;
    grid-template-columns: minmax(90px, 170px) 1fr 44px;
    align-items: center;
    gap: 10px;
}
.grafico-conto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grafico-barra {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--qb-chiaro2);
}
.grafico-barra span { height: 100%; }
.grafico-ric { background: var(--qb-primario); }
.grafico-daric { background: #e8a33c; }
.grafico-perc { text-align: right; font-weight: 700; color: var(--qb-scuro); }

/* "Situazione": anno corrente e tutti gli anni, ciambella + numeri. */
.situazione-colonne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.situazione-titolo {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5a6878;
}
.avanzamento-corpo { display: flex; align-items: center; gap: 10px; }
.avanzamento-ciambella { width: 84px; height: 84px; flex: none; }
.ciambella-fondo { stroke: var(--qb-chiaro2); }
.ciambella-arco { stroke: var(--qb-primario); }
.ciambella-valore { fill: var(--qb-scuro); }
.ciambella-testo { fill: #5a6878; }
.avanzamento-dati {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 10px;
    margin: 0;
    font-size: 0.78rem;
}
.avanzamento-dati dt { color: #5a6878; }
.avanzamento-dati dd { margin: 0; text-align: right; font-weight: 700; color: var(--qb-scuro); }
.cruscotto-avviso {
    margin-top: 10px;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid #f0cf9c;
    background: #fff4e5;
    color: #9a5b00;
    font-size: 0.78rem;
}

/* "Cosa fare adesso" accanto a "Ultimi conti lavorati" (2 schede): stessa altezza; l'elenco scorre dentro il riquadro. */
.cruscotto-riga-lavoro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: stretch;
}
.cruscotto-riga-lavoro > .qb-riquadro { display: flex; flex-direction: column; min-width: 0; }
.cruscotto-riga-lavoro > .qb-riquadro > .qb-riquadro-corpo { flex: 1; }
.cruscotto-riga-lavoro .cruscotto-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cosafare-corpo { position: relative; min-height: 220px; padding: 0 !important; }
.cosafare-lista { position: absolute; inset: 0; overflow-y: auto; }
.cosafare-riga { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e6edf6; }
.cosafare-riga:last-child { border-bottom: 0; }
.cosafare-testo { flex: 1; min-width: 0; font-size: 0.85rem; }
.cosafare-testo b { color: var(--qb-scuro); }
.cosafare-testo small { display: block; color: #5a6878; font-size: 0.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cosafare-azione { flex: none; padding: 3px 10px !important; font-size: 0.78rem !important; }
.cosafare-vuoto { padding: 16px 12px; color: #5a6878; font-size: 0.85rem; }
@media (max-width: 1100px) {
    .cruscotto-riga-lavoro { grid-template-columns: 1fr; }
    .cosafare-corpo { min-height: 0; }
    .cosafare-lista { position: static; max-height: 300px; }
}
@media (max-width: 640px) {
    .cruscotto-riga-lavoro .cruscotto-schede { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .cruscotto-riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cruscotto-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cruscotto-lavoro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .cruscotto-riquadri,
    .cruscotto-schede,
    .situazione-colonne { grid-template-columns: 1fr; }
}

/* =====================================================================================================
   Pagine di accesso (Login, Recupero password, Imposta password): stile del sito www.quadrabanca.it
   (fondo beige caldo, carattere Gotu) con il simbolo del logo in filigrana e la barra blu/verde sulla scheda.
   ===================================================================================================== */

/* Gotu (Google Fonts, licenza OFL). Prima il file nel progetto (Content/fonts/Gotu-Regular.woff2: funziona
   anche senza internet), se manca quello di Google. */
@font-face {
    font-family: "Gotu";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Gotu-Regular.woff2") format("woff2"),
         url("https://fonts.gstatic.com/s/gotu/v18/o-0FIpksx3QOpHoBiw.woff2") format("woff2");
}

/* Solo le pagine con la scheda di accesso: niente barra in alto, fondo beige con la filigrana, scheda al centro. */
body:has(.login-box) {
    background: #efeee7 url("logo/QuadraBanca_filigrana.png") no-repeat center center fixed;
    background-size: min(620px, 90vw) auto;
}

body:has(.login-box) .topbar {
    display: none;
}

body:has(.login-box) .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
    background: #fff;
    padding: 2.25rem 2rem 1.75rem;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(67, 65, 63, 0.12);
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
    color: #43413f;
}

/* Barra in cima alla scheda: blu per 3/5, verde per 2/5 (colori del logo). */
.login-box::before,
.login-box::after {
    content: "";
    position: absolute;
    top: 0;
    height: 5px;
}

.login-box::before {
    left: 0;
    width: 60%;
    background: #123a8c;
}

.login-box::after {
    right: 0;
    width: 40%;
    background: #0d7a35;
}

.login-box h1 {
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 1.35rem;
    text-align: center;
    color: #43413f;
    margin: 0 0 1.25rem;
}

/* Logo al posto del titolo nella pagina di accesso. */
.login-box h1.login-logo {
    margin: 0.25rem 0 0.25rem;
}

.login-logo img {
    width: 100%;
    max-width: 230px;
    height: auto;
}

.login-sottotitolo {
    text-align: center;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.login-box .form-group {
    margin-bottom: 0.9rem;
}

/* Etichette, campi e pulsante DevExpress ristilati (il tema scelto dall'utente resta per il resto del sito). */
.login-box .form-group label.dxeBase,
.login-box .form-group span.dxeBase {
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
    color: #43413f;
    margin-bottom: 0.3rem;
}

.login-box [class*="dxeTextBox"] {
    border: 1px solid #dcd9cf !important;
    border-radius: 6px;
    background: #fbfaf6 !important;
}

.login-box [class*="dxeTextBox"] input {
    background: transparent !important;
    padding: 0.45rem 0.5rem !important;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.95rem;
    color: #23303c;
}

.login-box [class*="dxeFocused"] {
    border-color: #123a8c !important;
    box-shadow: 0 0 0 2px rgba(18, 58, 140, 0.15);
}

.login-box .login-pulsante,
.login-box .login-pulsante[class*="dxbButton"] {
    margin-top: 0.75rem;
    background: #123a8c !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 6px;
    cursor: pointer;
}

.login-box .login-pulsante:hover {
    background: #0e2f73 !important;
}

.login-box .login-pulsante,
.login-box .login-pulsante .dx-vam,
.login-box .login-pulsante span {
    color: #fff !important;
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
}

.login-box .login-pulsante .dxb {
    padding: 0.55rem 0.75rem !important;
}

.login-link {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    text-align: center;
}

.login-link a,
.login-link a[class*="dxeHyperlink"] {
    color: #123a8c !important;
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
}

/* Sotto la scheda: copyright e link al sito di vendita. */
.login-piede {
    margin: 1.25rem 0 0;
    font-family: "Gotu", "Segoe UI", Arial, sans-serif;
    font-size: 0.75rem;
    color: #8a867d;
    text-align: center;
}

.login-piede a {
    color: inherit;
}

/* Importazione/Nuova.aspx, popup dei movimenti da importare: avvisi (OCR, quadratura) e righe da verificare. */
.avvisi-importa {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #fff4e5;
    border: 1px solid #e8b46a;
    border-radius: 6px;
    color: #7a4a00;
    font-size: 0.85rem;
    white-space: pre-line;
}

.riga-da-verificare td {
    background-color: #fff3c4 !important;
}

/* Utenti/Stile.aspx: due riquadri, i temi a sinistra (una voce per tema con la striscia dei suoi colori) e
   l'anteprima a destra (classe tema-... sul pannello: i colori sono quelli del tema selezionato). */
.stile-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.stile-temi { flex: 0 0 270px; }
.stile-anteprima-riquadro { flex: 1 1 0; min-width: 0; }
.stile-temi .qb-riquadro-corpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stile-voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border: 1px solid #dfe6f0;
    border-radius: 7px;
    background: #fff;
    color: #2b3742 !important;
    text-decoration: none !important;
}
.stile-voce:hover { border-color: #b8c7dc; }
.stile-voce.selezionata {
    border-color: var(--qb-primario);
    box-shadow: 0 0 0 2px var(--qb-chiaro2);
}
.stile-colori {
    display: flex;
    flex: none;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.stile-colori span { width: 14px; height: 22px; }
.stile-colori span:nth-child(1) { background: var(--qb-primario); }
.stile-colori span:nth-child(2) { background: var(--qb-scuro); }
.stile-colori span:nth-child(3) { background: var(--qb-chiaro2); }
.stile-nome { font-weight: 600; font-size: 0.8rem; }
.stile-uso {
    margin-left: auto;
    padding: 0 7px;
    border-radius: 9px;
    border: 1px solid #b6dcc2;
    background: #e8f5ec;
    color: #1e7a3c;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.stile-nome-tema { margin-left: auto; font-weight: normal; color: #5a6878; }

/* Anteprima: un pezzo di pagina con il tema selezionato. */
.stile-anteprima {
    padding: 12px;
    border-radius: 6px;
    background: #f6f8fb;
}
.stile-titolo-esempio {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--qb-scuro);
}

@media (max-width: 900px) {
    .stile-layout { flex-direction: column; }
    .stile-temi { flex-basis: auto; }
}

/* Riquadri (gruppi) dei form DevExpress più compatti in tutte le pagine: meno spazio sopra e sotto.
   "dxflGroupBox_" è il riquadro, non la sua didascalia ("dxflGroupBoxCaption_"). */
[class*="dxflGroupBox_"] {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.dxflItem,
[class*="dxflItem_"] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Barra dei filtri (es. Riconciliazione/Movimenti): riquadri "Periodo" e "Movimenti" ancora più bassi, con un
   piccolo stacco sotto i campi e prima dei riquadri che seguono. */
.qb-filtri {
    margin-bottom: 0.6rem !important;
}

.qb-filtri [class*="dxflGroupBox_"] {
    padding-top: 0.55rem !important;
    padding-bottom: 0.4rem !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0 !important;
}

.qb-filtri [class*="dxflGroup_"],
.qb-filtri [class*="dxflGroupCell_"],
.qb-filtri [class*="dxflItem_"],
.qb-filtri .dxflItem {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== Icone a linea dei comandi di griglia (modifica, elimina, nuovo, assegna) =====
   Il disegno è una maschera SVG e il colore è quello di sfondo: così seguono il tema (--qb-*).
   Nelle griglie si usano con <Image><SpriteProperties CssClass="qb-ico qb-ico-..." /></Image>. */
.qb-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--qb-scuro);
    -webkit-mask: var(--qb-ico-svg) center / 16px 16px no-repeat;
    mask: var(--qb-ico-svg) center / 16px 16px no-repeat;
    transition: background-color .12s;
}
.qb-ico:hover,
a:hover > .qb-ico { background-color: var(--qb-primario); }
.qb-ico-elimina { background-color: #7b8794; }
.qb-ico-elimina:hover { background-color: #c62828; }

.qb-ico-modifica { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.2 4.3a2.4 2.4 0 0 1 3.4 0l1.1 1.1a2.4 2.4 0 0 1 0 3.4L9.3 19.2l-5 1.3 1.3-5z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M13.5 6l4.5 4.5' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M5.6 15.5l-1.3 5 5-1.3z' fill='black'/%3E%3C/svg%3E"); }
.qb-ico-elimina { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='2.4' rx='1.2' fill='black'/%3E%3Cpath d='M9.5 5V3.8c0-.5.4-.8.8-.8h3.4c.5 0 .8.4.8.8V5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M6 8.5l.9 10.6A2 2 0 0 0 8.9 21h6.2a2 2 0 0 0 2-1.9L18 8.5' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10.2 11.5v6M13.8 11.5v6' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-ico-nuovo { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Assegna conti: quadrato arrotondato con il "+" */
.qb-ico-assegna { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M12 8v8M8 12h8' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Icone delle pagine di un conto: le stesse nei comandi di Riconciliazione\Default e nei pulsanti "Vai a ...". */
.qb-ico-importazioni { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8 12.5h3M8 16h3'/%3E%3Cpath d='M15 11.5v6.5m0 0l-2.2-2.2m2.2 2.2l2.2-2.2'/%3E%3C/svg%3E"); }
/* Riconcilia: due colonne (banca e contabilità) collegate */
.qb-ico-riconcilia { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='7' height='16' rx='1.5'/%3E%3Crect x='14.5' y='4' width='7' height='16' rx='1.5'/%3E%3Cpath d='M4.8 8h2.4M4.8 11h2.4M16.8 8h2.4M16.8 11h2.4'/%3E%3Cpath d='M9.5 9.5h5M9.5 14.5h5'/%3E%3C/svg%3E"); }
/* Verifica integrità: bilancia */
.qb-ico-verifica { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M5 7h14'/%3E%3Cpath d='M5 7l-2.5 6a2.5 2.5 0 0 0 5 0z'/%3E%3Cpath d='M19 7l-2.5 6a2.5 2.5 0 0 0 5 0z'/%3E%3C/svg%3E"); }
/* Anagrafica conti: carta/conto */
.qb-ico-conti { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
/* Ordini: ricevuta */
.qb-ico-ordini { --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v16l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 9h6M9 13h6'/%3E%3C/svg%3E"); }
/* Dentro il pulsante blu "Vai a ..." l'icona è bianca come il testo. */
.qb-vai .qb-ico,
.qb-vai:hover .qb-ico { background-color: #fff; cursor: inherit; }

/* Pulsanti per passare a un'altra pagina dello stesso conto ("Vai a ..."): chiari con bordo, per distinguerli
   dai pulsanti scuri che creano qualcosa ("Nuovo ...", "Nuova importazione"). */
.qb-vai.qb-vai-chiaro {
    padding: 4px 11px;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    color: var(--qb-scuro) !important;
}
.qb-vai.qb-vai-chiaro:hover { background: var(--qb-chiaro); }
.qb-vai.qb-vai-chiaro .qb-ico,
.qb-vai.qb-vai-chiaro:hover .qb-ico { background-color: var(--qb-scuro); }

/* Salva e Annulla (popup di modifica delle griglie, Profilo, Stile, Nuova importazione):
   un po' più grandi, Salva nel colore del tema, Annulla grigio. */
.qb-ico-salva,
.qb-ico-annulla {
    width: 20px;
    height: 20px;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    margin: 0 2px;
}
.qb-ico-salva { background-color: var(--qb-primario); --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3.5h10.3l4.7 4.7v10.3a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Crect x='7.5' y='3.5' width='7.5' height='4.5' rx='.8' fill='black'/%3E%3Crect x='7' y='13' width='10' height='7.5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E"); }
.qb-ico-salva:hover { background-color: var(--qb-scuro); }
.qb-ico-annulla { background-color: #7b8794; --qb-ico-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.8' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qb-ico-annulla:hover { background-color: var(--qb-scuro); }
/* Pulsanti DevExpress disabilitati: icona sbiadita. */
.dxbDisabled .qb-ico,
.dxbDisabled_Office365 .qb-ico,
[class*="dxbDisabled"] .qb-ico { opacity: .35; cursor: default; }

/* Pulsanti DevExpress (RenderMode="Link") e pulsanti dei popup di modifica delle griglie con lo stile
   di .qb-pulsante-pieno / .qb-pulsante-chiaro: si annullano colori e spaziature del tema DevExpress. */
.qb-pulsante-pieno,
.qb-pulsante-pieno *,
.qb-pulsante-pieno:hover * { color: #fff !important; text-decoration: none !important; }
.qb-pulsante-chiaro * { color: var(--qb-scuro) !important; text-decoration: none !important; }
.qb-pulsante-chiaro:hover { background: var(--qb-chiaro); }
.qb-pulsante-pieno .dxb,
.qb-pulsante-chiaro .dxb { padding: 0 !important; border: 0 !important; background: none !important; }
/* Il tema DevExpress toglie sfondo, bordo e spaziatura ai pulsanti "link": qui si rimettono con !important. */
[class*="dx"].qb-pulsante-pieno,
[class*="dx"].qb-pulsante-chiaro,
.qb-pulsante-griglia {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    cursor: pointer;
}
[class*="dx"].qb-pulsante-pieno,
.qb-pulsante-griglia.qb-pulsante-pieno {
    background: var(--qb-primario) !important;
    border: 1px solid var(--qb-primario) !important;
}
[class*="dx"].qb-pulsante-pieno:hover,
.qb-pulsante-griglia.qb-pulsante-pieno:hover {
    background: var(--qb-scuro) !important;
    border-color: var(--qb-scuro) !important;
}
[class*="dx"].qb-pulsante-chiaro,
.qb-pulsante-griglia.qb-pulsante-chiaro {
    background: #fff !important;
    border: 1px solid var(--qb-bordo) !important;
}
[class*="dx"].qb-pulsante-chiaro:hover,
.qb-pulsante-griglia.qb-pulsante-chiaro:hover {
    background: var(--qb-chiaro) !important;
}
/* Due pulsanti affiancati (Conferma / Annulla, Salva / Annulla): un po' di spazio tra i due. */
.qb-pulsante-pieno + .qb-pulsante-chiaro,
.qb-pulsante-chiaro + .qb-pulsante-pieno { margin-left: 0.5rem; }
.qb-pulsante-griglia { margin-left: 8px; font-family: "Segoe UI", Arial, sans-serif !important; }

/* ===== Moduli a riquadri (Utenti/Profilo.aspx) ===== */
/* Etichette in una colonna di larghezza fissa, caselle allineate accanto. */
.qb-campi {
    display: grid;
    grid-template-columns: 140px minmax(180px, 1fr);
    gap: 9px 12px;
    align-items: center;
}
.qb-campi > label { color: #33414f; }
.qb-obbligatorio { color: #c62828; margin-left: 2px; }
/* Nota sotto una casella (es. "Lascia vuoto per non modificarla."). */
.qb-aiuto { font-size: 0.8rem; color: #5a6878; margin-top: -5px; }

/* Piccole etichette arrotondate (Ruolo, Stato). */
.qb-etichetta {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 10px;
    border: 1px solid var(--qb-bordo);
    background: #fff;
    color: var(--qb-scuro);
    font-size: 0.75rem;
    font-weight: 600;
}
.qb-etichetta-ok { background: #e8f5ec; border-color: #b6dcc2; color: #1e7a3c; }
.qb-etichetta-avviso { background: #fff4e5; border-color: #f0cf9c; color: #9a5b00; }

.profilo-colonna {
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profilo-etichette { display: inline-flex; gap: 6px; }
.profilo-comandi { display: flex; justify-content: flex-end; gap: 0.5rem; }

@media (max-width: 560px) {
    .qb-campi { grid-template-columns: 1fr; }
    .qb-campi > span:empty { display: none; }
    .qb-aiuto { margin-top: -6px; }
}

/* ===== Importazione/Nuova.aspx: stessa disposizione di ImportazioniStandard/Scheda.aspx (.standard-layout) ===== */
/* Colonna di sinistra larga quanto serve all'associazione (come nella Scheda); i riquadri uno sotto l'altro. */
.nuova-col-associazione {
    flex: 0 0 auto;
    min-width: 380px;
    max-width: 100%;
}
.nuova-col-associazione .qb-riquadro + .qb-riquadro,
.nuova-col-associazione .standard-comandi + .qb-riquadro {
    margin-top: 0.75rem;
}
@media (max-width: 1100px) {
    .nuova-col-associazione { flex-basis: auto; }
}
/* Senza file scelto la colonna dell'associazione non si vede: resta solo il riquadro del file. */
.nuova-col-nascosta {
    display: none !important;
}

/* Pulsanti DevExpress con lo stile pieno/chiaro quando sono disattivati (es. "Importa movimenti" senza file). */
[class*="dxbDisabled"].qb-pulsante-pieno,
[class*="dxbDisabled"].qb-pulsante-chiaro {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Importazione/Nuova.aspx: interruttore "Standard / Personalizzata" nella barra dell'associazione (due pulsanti uniti). */
.nuova-interruttore {
    display: inline-flex;
    border: 1px solid var(--qb-primario);
    border-radius: 7px;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.8rem;
}
.nuova-interruttore a {
    padding: 3px 12px;
    color: var(--qb-primario) !important;
    background: #fff;
    text-decoration: none !important;
}
.nuova-interruttore a + a { border-left: 1px solid var(--qb-primario); }
.nuova-interruttore a:hover { background: var(--qb-chiaro); }
.nuova-interruttore a.attivo,
.nuova-interruttore a.attivo:hover {
    background: var(--qb-primario);
    color: #fff !important;
    cursor: default;
}

/* Fascia sotto la barra: menu delle importazioni standard o "Proponi in automatico". */
.nuova-fascia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 8px 12px;
    border-bottom: 1px solid #e3e9f2;
    background: #fbfcfe;
}
.nuova-fascia .qb-pulsante-chiaro { margin-left: auto; }
.nuova-fascia-etichetta { color: #5a6878; }
.nuova-standard {
    min-width: 220px;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid #9fb0c8;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}


/* Casella "Salva come nuova importazione standard" e descrizione (solo in "Personalizzata"). */
.nuova-salva-standard {
    margin-top: 0.75rem;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    border-radius: 6px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nuova-salva-standard label { display: inline-flex; align-items: center; gap: 6px; }
.nuova-salva-standard-descrizione { display: flex; align-items: center; gap: 8px; }
.nuova-salva-standard-descrizione input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    border: 1px solid #9fb0c8;
    border-radius: 3px;
    font: inherit;
}

/* Messaggi nella colonna dell'associazione (avvisi, note, esito): non allargano la colonna, che resta larga quanto
   la tabella dei campi; il testo va a capo su più righe. */
.nuova-col-associazione .nota-vuota,
.nuova-col-associazione .esito-importazione,
.nuova-col-associazione .nuova-salva-standard {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
}

/* ===== Riconciliazione/Automatica.aspx: opzioni della ricerca automatica in tre riquadri ===== */
.automatica-periodo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--qb-scuro);
}
.automatica-colonna {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.automatica-opzioni {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.automatica-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.automatica-riga label { margin-left: 4px; }
.automatica-etichetta { color: #5a6878; min-width: 140px; }
.automatica-rientro { margin-left: 22px; }
.automatica-nota { font-size: 0.8rem; color: #5a6878; }
.automatica-numero {
    width: 64px;
    padding: 2px 6px;
    border: 1px solid #9fb0c8;
    border-radius: 3px;
    text-align: right;
    font: inherit;
}
.automatica-numero:disabled { background: #f4f6f9; color: #9aa5b1; border-color: #d0d8e4; }
.automatica-rientro input:disabled + label { color: #9aa5b1; }
.automatica-comandi {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
}
/* Casella "Salva queste opzioni…": casella e testo sulla stessa riga. */
.automatica-salva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.85rem;
}
.automatica-salva label { display: inline; margin: 0; }

/* Popup di modifica delle griglie (Aziende, Conti, Utenti): DevExpress mette "Salva" prima di "Annulla" e l'ordine
   non si può cambiare dalle impostazioni. Il contenitore dei due pulsanti si dispone da destra a sinistra, così a video
   "Annulla" (chiaro) sta a sinistra e "Salva" (blu) a destra, come in tutte le altre pagine. */
:has(> .qb-pulsante-griglia) { direction: rtl; }
.qb-pulsante-griglia { direction: ltr; }

/* ===== Aiuto ===== */
/* Pulsante "?" in alto accanto all'utente (Site.Master) e pannello laterale. */
.qb-aiuto-btn {
    flex: none;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--qb-bordo);
    background: #fff;
    color: var(--qb-scuro);
    font: 700 15px "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}
.qb-aiuto-btn:hover,
.qb-aiuto-btn[aria-expanded="true"] { background: var(--qb-primario); border-color: var(--qb-primario); color: #fff; }
.qb-aiuto-btn.qb-aiuto-topbar { margin-left: auto; margin-right: -0.75rem; }
.qb-aiuto-topbar + .menu-utente { margin-left: 0; }
/* Finestrella mobile dell'aiuto: posizione e dimensioni impostate dallo script di Site.Master; si ridimensiona
   dall'angolo in basso a destra (resize). Classe diversa da .qb-aiuto, che è la nota sotto le caselle. */
.qb-guida-finestra {
    position: fixed;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 50vh;
    min-width: 260px;
    min-height: 140px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: both;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--qb-bordo);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(18, 58, 140, 0.22);
    font-family: "Segoe UI", Arial, sans-serif;
}
.qb-guida-finestra[hidden] { display: none; }
.qb-guida-finestra.ridotto { resize: none; height: auto !important; min-height: 0; }
.qb-guida-finestra.ridotto .qb-aiuto-corpo,
.qb-guida-finestra.ridotto .qb-aiuto-piede { display: none; }
.qb-aiuto-testa {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--qb-chiaro);
    border-bottom: 1px solid var(--qb-bordo);
    font-weight: 600;
    color: var(--qb-scuro);
}
.qb-aiuto-testa { cursor: move; user-select: none; touch-action: none; gap: 8px; }
.qb-aiuto-titolo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qb-aiuto-comandi { margin-left: auto; display: flex; gap: 2px; flex: none; }
.qb-aiuto-riduci,
.qb-aiuto-chiudi { width: 26px; height: 26px; border: 0; border-radius: 4px; background: none; font-size: 20px; line-height: 1; color: #5a6878; cursor: pointer; }
.qb-aiuto-riduci:hover,
.qb-aiuto-chiudi:hover { background: rgba(18, 58, 140, 0.08); color: var(--qb-scuro); }
.qb-aiuto-corpo { flex: 1; overflow: auto; padding: 0 14px 14px; }
.qb-aiuto-corpo > h2 { display: none; }
.qb-aiuto-piede { border-top: 1px solid var(--qb-bordo); padding: 8px 14px; font-size: 0.84rem; }
.qb-aiuto-piede a { color: var(--qb-primario); font-weight: 600; text-decoration: none; }

/* Testo dell'aiuto (pannello e guida completa). */
.aiuto-testo { font-size: 0.86rem; line-height: 1.45; color: #1d2b45; }
.aiuto-testo h3 { margin: 14px 0 4px; font-size: 0.92rem; color: var(--qb-scuro); }
.aiuto-testo p { margin: 0 0 6px; }
.aiuto-testo ol,
.aiuto-testo ul { margin: 0 0 6px; padding-left: 20px; }
.aiuto-testo li { margin: 3px 0; }
.aiuto-testo details { border: 1px solid var(--qb-bordo); border-radius: 6px; margin: 6px 0; }
.aiuto-testo summary { cursor: pointer; padding: 6px 10px; font-weight: 600; color: var(--qb-scuro); }
.aiuto-testo details p { margin: 0; padding: 0 10px 8px; }
.aiuto-testo a { color: var(--qb-primario); font-weight: 600; text-decoration: none; }
.aiuto-testo img { display: block; max-width: 100%; height: auto; margin: 6px 0 10px; border: 1px solid var(--qb-bordo); border-radius: 6px; }

/* Percorso nella guida in cima al pannello "?" (voci sopra l'argomento della pagina). */
.qb-aiuto-percorso { display: block; font-size: 0.75rem; font-weight: normal; color: #5a6878; }
.qb-aiuto-percorso:empty { display: none; }
.qb-aiuto-percorso a { color: var(--qb-primario); text-decoration: none; }
.qb-aiuto-percorso span { margin: 0 2px; }
.aiuto-testo .aiuto-vai { margin: 0; padding: 0 10px 8px; font-size: 0.8rem; }

/* Guida (Aiuto/Default.aspx): indice ad albero a sinistra, un argomento alla volta a destra. */
.aiuto-guida { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.aiuto-colonna-indice { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 24px); }
.aiuto-indice { overflow-y: auto; background: #fff;
    border: 1px solid var(--qb-bordo); border-radius: 8px; padding: 8px 0; font-family: "Segoe UI", Arial, sans-serif; }
.aiuto-cerca { display: flex; background: #fff; border: 1px solid var(--qb-bordo); border-radius: 8px; overflow: hidden; }
.aiuto-cerca input { flex: 1; min-width: 0; border: 0; padding: 7px 10px; font: 0.88rem "Segoe UI", Arial, sans-serif; outline: none; }
.aiuto-cerca button { border: 0; background: var(--qb-chiaro); color: var(--qb-scuro); padding: 0 10px; cursor: pointer; }
.aiuto-cerca button:hover { background: var(--qb-primario); color: #fff; }
.aiuto-risultati-numero { color: #5a6878; }
.aiuto-risultati { list-style: none; padding: 0 !important; }
.aiuto-risultati li { padding: 8px 0; border-bottom: 1px solid #e6edf6; }
.aiuto-risultati li > a { font-size: 0.95rem; }
.aiuto-risultato-percorso { display: block; font-size: 0.75rem; color: #5a6878; }
.aiuto-risultati p { margin: 2px 0 0; color: #334; }
.aiuto-risultati mark { background: #fff1b8; padding: 0 1px; }
.aiuto-indice details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.aiuto-indice details > summary::-webkit-details-marker { display: none; }
.aiuto-indice details > summary::before { content: "\25B8"; width: 14px; margin-left: 6px; color: #5a6878; font-size: 0.75rem; flex: none; }
.aiuto-indice details[open] > summary::before { content: "\25BE"; }
.aiuto-voce { display: block; flex: 1; padding: 5px 12px 5px 6px; color: var(--qb-scuro); text-decoration: none; font-size: 0.86rem; }
.aiuto-indice > .aiuto-voce { padding-left: 26px; }
.aiuto-voce:hover { background: var(--qb-chiaro); }
.aiuto-voce.attiva { background: var(--qb-chiaro); font-weight: 600; }
.aiuto-livello-0 { font-weight: 600; }
.aiuto-indice details details { margin-left: 14px; }
.aiuto-indice details > .aiuto-voce { padding-left: 34px; }
.aiuto-percorso { margin: 0 0 8px; font-size: 0.82rem; color: #5a6878; }
.aiuto-percorso a { color: var(--qb-primario); text-decoration: none; font-weight: 600; }
.aiuto-percorso span { margin: 0 4px; }
.aiuto-sezione { background: #fff; border: 1px solid var(--qb-bordo); border-radius: 8px; padding: 4px 18px 12px; }
.aiuto-sezione > h2 { margin: 12px 0 4px; font-size: 1.1rem; color: var(--qb-scuro); }
.aiuto-sezione-figli { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--qb-bordo); }
.aiuto-navigazione { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
@media (max-width: 800px) {
    .aiuto-guida { grid-template-columns: 1fr; }
    .aiuto-colonna-indice { position: static; max-height: none; }
}