html, body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f2f4f7;
}

.btg-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 56px;
    background: var(--btg-primario, #0B2E4F);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.btg-topbar__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .01em;
    padding-right: 20px;
    margin-right: 6px;
    border-right: 1px solid rgba(255, 255, 255, .14);
    flex: none;
}

.btg-topbar__brand:hover { color: #fff; }

/* ---------- menu a gruppi con dropdown ---------- */
.btg-nav { display: flex; align-items: stretch; flex: 1 1 0; min-width: 0; height: 100%; gap: 2px; }
.btg-nav__group { position: relative; display: flex; }

.btg-nav__group-btn {
    background: none; border: none; height: 100%; padding: 0 14px;
    color: #A9C1D8; font: inherit; font-weight: 600; font-size: .88rem; letter-spacing: .01em;
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    border-bottom: 2px solid transparent; transition: color .15s, background .15s;
}

.btg-nav__group-btn::after {
    content: ""; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor;
    opacity: .6; margin-top: 1px;
}

.btg-nav__group-btn:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.btg-nav__group-btn.active { color: #fff; border-bottom-color: var(--btg-accento, #00B8D9); }

.btg-nav__dropdown {
    position: absolute; top: 100%; left: 0; min-width: 210px;
    background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 12px 28px -8px rgba(11, 46, 79, .35);
    padding: 6px; display: flex; flex-direction: column; gap: 1px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.btg-nav__group:hover .btg-nav__dropdown,
.btg-nav__group:focus-within .btg-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.btg-nav__dropdown .btg-nav__link {
    color: var(--btg-primario, #0B2E4F); text-decoration: none; font-size: .88rem; font-weight: 500;
    padding: 8px 12px; border-radius: 6px; white-space: nowrap;
}
.btg-nav__dropdown .btg-nav__link:hover { background: #EAF6FA; }
.btg-nav__dropdown .btg-nav__link.active { background: #E1F5FA; color: #007A94; font-weight: 700; }

.btg-topbar__user { font-size: 0.85rem; opacity: 0.85; flex: none; white-space: nowrap; }
.btg-topbar__logout { background: none; border: none; color: #fff; text-decoration: underline; cursor: pointer; padding: 0; margin-left: 8px; font-size: 0.85rem; opacity: 0.85; }
.btg-topbar__logout:hover { opacity: 1; }

/* Il nome dell'utente si accorcia con i puntini ("Amministrat…") invece di spingere «Esci» fuori dalla barra: «Esci» resta sempre visibile. */
.btg-topbar__nome { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* Barra in alto compatta: con dieci gruppi di menu, orologio, campanella e utente la barra non entra sotto ~1650 px di larghezza (e a 125% di zoom
   su uno schermo da 2000 px lo spazio utile è circa 1600). Si stringono prima gli spazi dei pulsanti, poi il carattere, poi il nome del marchio. */
@media (max-width: 1720px) {
    .btg-nav__group-btn { padding: 0 9px; }
    .btg-topbar__brand { padding-right: 14px; }
}
@media (max-width: 1520px) {
    .btg-nav__group-btn { padding: 0 6px; font-size: .84rem; gap: 4px; }
    .btg-topbar { padding: 0 12px; }
    .btg-topbar__nome { max-width: 110px; }
}
@media (max-width: 1380px) {
    .btg-nav__group-btn { padding: 0 5px; font-size: .8rem; }
    .btg-topbar__brand span { display: none; }
    .btg-topbar__nome { max-width: 80px; }
}

.btg-content { padding: 20px; }

.btg-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.btg-page-header h1 { font-size: 1.3rem; color: var(--btg-primario, #0B2E4F); margin: 0; }
.btg-page-header p { margin: 4px 0 0; color: #5C7690; font-size: .88rem; }

.btg-riga-alert { background-color: #fdeaea !important; }
.btg-riga-warn { background-color: #fff6e0 !important; }

.btg-section { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); margin-bottom: 16px; }
.btg-section h2 { font-size: 1rem; margin: 0 0 10px 0; color: var(--btg-primario, #0B2E4F); }

/* grid, non flex: con flex-wrap una card "orfana" sull'ultima riga (nessun'altra
   card a fianco) si allarga con flex-grow a tutta la larghezza disponibile — lo
   sparkline di "Movimenti di magazzino" si stirava su pochi punti dati diventando
   un brutto zig-zag, visibile solo alle larghezze dove le 6 card non entrano tutte
   sulla stessa riga (es. zoom 100% ma non 90%). Con grid auto-fill le colonne hanno
   una larghezza fissa uguale per tutte le righe: una card sola sull'ultima riga
   resta della stessa larghezza delle altre, non si allarga. */
.btg-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.btg-kpi { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid var(--btg-accento, #00B8D9); position: relative; overflow: hidden; }
.btg-kpi--warning { border-left-color: #C2410C; }
.btg-kpi .btg-kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6B7A93; font-weight: 600; }
.btg-kpi .btg-kpi-value { font-size: 1.65rem; font-weight: 700; color: var(--btg-primario, #0B2E4F); margin-top: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.btg-kpi .btg-kpi-sub { font-size: .72rem; color: #9AA7B8; margin-top: 2px; }
.btg-kpi-badge { font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.btg-kpi-badge--up { background: #E6F6EC; color: #1E7B3B; }
.btg-kpi-badge--down { background: #FCEBE9; color: #A6362C; }
.btg-kpi-spark { height: 36px; margin-top: 6px; }

.btg-pianificazione-filtri { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.btg-pianificazione-filtri label { display: block; font-size: .78rem; color: #6B7A93; font-weight: 600; margin-bottom: 5px; }
.btg-pianificazione-filtri > div:not(#dx-filtro-pulisci) { width: 260px; }

/* ---- Schedulazione a capacità finita ---- */
.btg-sch-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.btg-sch-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: #6B7A93; align-items: center; }
.btg-sch-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.btg-sch-chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.btg-sch-scheduler { padding: 8px; }
.btg-sch-scheduler .dx-scheduler-group-header { width: 170px; min-width: 170px; }
.btg-sch-scheduler .dx-scheduler-timeline .dx-scheduler-cell-sizes-horizontal { width: 72px; min-width: 72px; }
.btg-sch-pianificata { background: #1F6FB2 !important; }
.btg-sch-incorso { background: #1E7B3B !important; }
.btg-sch-esterna { background: #7A5AA6 !important; }
.btg-sch-conflitto { background: repeating-linear-gradient(45deg, #C2410C, #C2410C 6px, #E2622B 6px, #E2622B 12px) !important; }
.btg-sch-ritardo { box-shadow: inset 4px 0 0 #E5484D; }
.btg-sch-chip.btg-sch-ritardo { background: #fff !important; border: 1px solid #C9D2DE; box-shadow: inset 4px 0 0 #E5484D; }
.btg-sch-chiuso { background: repeating-linear-gradient(135deg, #EEF1F5, #EEF1F5 3px, #E1E6ED 3px, #E1E6ED 6px); border: 1px solid #D5DBE4; }
.dx-scheduler-date-table-cell.btg-cella-chiusa { background: repeating-linear-gradient(135deg, #F3F5F8, #F3F5F8 3px, #E6EAF0 3px, #E6EAF0 6px); }
.btg-sch-appuntamento { font-size: .72rem; line-height: 1.25; padding: 1px 4px; overflow: hidden; color: #fff; }
.btg-sch-appuntamento strong { color: #fff; }
.btg-sch-risorsa { line-height: 1.2; }
.btg-sch-risorsa small { display: block; font-size: .68rem; color: #6B7A93; }
.btg-sch-risorsa .btg-sch-sovraccarico { color: #C2410C; font-weight: 700; }

.btg-alert {
    display: flex; align-items: center; gap: 10px; background: #FFF4E5; border: 1px solid #FBD9A6;
    color: #7A4A0A; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .88rem;
}
.btg-alert__icon { font-size: 1.1rem; }
.btg-alert__testo { flex: 1; }
.btg-alert__link { color: #7A4A0A; font-weight: 700; text-decoration: none; white-space: nowrap; }
.btg-alert__link:hover { text-decoration: underline; }

.btg-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.btg-home-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); text-decoration: none; color: var(--btg-primario, #0B2E4F); transition: transform .12s, box-shadow .12s; display: block; }
.btg-home-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(11,46,79,.25); }
.btg-home-card h3 { margin: 0 0 6px; font-size: 1rem; }
.btg-home-card p { margin: 0; font-size: .82rem; color: #5C7690; }

.btg-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.btg-board__colonna { flex: 1 1 240px; min-width: 240px; background: #F3F6F9; border-radius: 10px; padding: 10px; max-height: 70vh; display: flex; flex-direction: column; }
.btg-board__intestazione { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--btg-primario, #0B2E4F); font-size: .88rem; padding: 6px 8px 10px; border-top: 3px solid var(--btg-accento, #00B8D9); margin: -10px -10px 8px; padding-top: 10px; border-radius: 10px 10px 0 0; background: #fff; }
.btg-board__conteggio { background: #EEF1F5; color: #5C7690; font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.btg-board__lista { flex: 1; overflow-y: auto; min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.btg-board__card { background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: grab; display: flex; flex-direction: column; gap: 2px; }
.btg-board__card strong { color: var(--btg-primario, #0B2E4F); font-size: .86rem; }
.btg-board__card span { color: #6B7A93; font-size: .78rem; }
.btg-board__card.dx-sortable-drag-source { opacity: .4; }

.btg-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 20px 26px; }
.btg-footer span { font-size: 11.5px; color: #9AA7B8; }
.btg-footer img { height: 20px; width: auto; display: block; opacity: .9; }

.btg-campanella { position: relative; margin-left: 12px; }
.btg-campanella__btn { background: none; border: none; color: #fff; font-size: 1.15rem; cursor: pointer; position: relative; padding: 4px 6px; opacity: .9; }
.btg-campanella__btn:hover { opacity: 1; }
.btg-campanella__badge {
    position: absolute; top: -2px; right: -2px; background: #E6432E; color: #fff; font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.btg-campanella__pannello {
    position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-height: 420px; overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 28px -8px rgba(11,46,79,.4); z-index: 60;
}
.btg-campanella__intestazione { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #EEF1F5; color: var(--btg-primario, #0B2E4F); }
.btg-campanella__intestazione button { background: none; border: none; color: var(--btg-accento, #00B8D9); font-size: .76rem; font-weight: 600; cursor: pointer; }
.btg-campanella__elenco { padding: 4px; }
.btg-campanella__vuoto { padding: 24px 14px; text-align: center; color: #9AA7B8; font-size: .82rem; }
.btg-campanella__voce { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.btg-campanella__voce:hover { background: #F6F8FA; }
.btg-campanella__voce--non-letta { background: #EAF6FA; }
.btg-campanella__voce-titolo { font-size: .84rem; font-weight: 700; color: #0B2E4F; }
.btg-campanella__voce-testo { font-size: .78rem; color: #6B7A93; margin-top: 2px; }
.btg-campanella__voce-data { font-size: .7rem; color: #9AA7B8; margin-top: 4px; }

/* Pagine di login/MFA (Account/Login, MfaEnrollment, MfaVerifica, MfaRecoveryCodes):
   colori fissi apposta, NON le variabili --btg-primario/--btg-accento del tema — vedi
   docs/architettura.md ("scelta colori"): il brand di login resta stabile a
   prescindere da cosa un Amministratore sceglie in Sistema → Aspetto. */
.btg-login { display: flex; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.btg-login__brand {
    flex: 1 1 46%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px; color: #fff; box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(11,46,79,.92), rgba(11,46,79,.97)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
        #0B2E4F;
}
.btg-login__mark { display: flex; align-items: center; gap: 14px; }
.btg-login__mark svg { flex: none; }
.btg-login__wordmark { line-height: 1.15; }
.btg-login__wordmark strong { display: block; font-size: 23px; font-weight: 700; letter-spacing: .01em; }
.btg-login__wordmark span { display: block; font-size: 13px; color: #A9C1D8; font-weight: 500; letter-spacing: .03em; }

.btg-login__pitch { max-width: 32ch; }
.btg-login__pitch p { font-size: 17px; line-height: 1.5; color: #DCE8F2; margin: 0; }
.btg-login__brandfoot { font-size: 12.5px; color: #7C96B4; }

.btg-login__panel {
    flex: 1 1 54%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 24px; background: #F3F6F9; box-sizing: border-box;
}
.btg-login-box { background: #fff; border: 1px solid #E1E8EF; border-radius: 14px; box-shadow: 0 2px 8px rgba(11,46,79,.05), 0 16px 40px -20px rgba(11,46,79,.25); padding: 36px 34px; width: 100%; max-width: 340px; box-sizing: border-box; }
.btg-login-box h1 { font-size: 19px; margin: 0 0 4px; color: #0B2E4F; }
.btg-login-box .btg-login-sub { font-size: 13.5px; color: #6B7A93; margin: 0 0 24px; }
.btg-login-box label { display: block; font-size: 12.5px; font-weight: 600; color: #4C5A72; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.btg-login-box input {
    width: 100%; padding: 10px 12px; margin-bottom: 18px; border: 1px solid #D3DCE6; border-radius: 8px;
    font-size: 14.5px; box-sizing: border-box; background: #FAFBFC; transition: border-color .15s, background .15s;
}
.btg-login-box input:focus { outline: none; border-color: #00B8D9; background: #fff; }
.btg-login-box button {
    width: 100%; padding: 11px; background: #0B2E4F; color: #fff; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btg-login-box button:hover { background: #123A63; }
.btg-login-error { background: #FCEBE9; color: #A6362C; font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-bottom: 18px; }
.btg-login-hint { margin-top: 16px; font-size: 12px; color: #8493A8; text-align: center; }
.btg-login__poweredby { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #EEF1F5; }
.btg-login__poweredby span { font-size: 11px; color: #A2AFC0; text-transform: uppercase; letter-spacing: .04em; }
.btg-login__poweredby img { height: 20px; width: auto; display: block; }
.btg-login__versione { text-align: center; font-size: 11px; color: #A2AFC0; margin-top: 6px; }

/* MFA: QR + secret dell'enrollment, codici di recupero */
.btg-login-box--largo { max-width: 420px; }
.btg-mfa-qr { display: flex; justify-content: center; margin-bottom: 16px; }
.btg-mfa-qr img { width: 200px; height: 200px; border: 1px solid #E1E8EF; border-radius: 10px; padding: 10px; background: #fff; }
.btg-mfa-secret { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13.5px; letter-spacing: .06em; text-align: center; background: #F3F6F9; border-radius: 8px; padding: 10px; margin-bottom: 18px; word-break: break-all; color: #0B2E4F; }
.btg-mfa-codici { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.btg-mfa-codici span { font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; background: #F3F6F9; border-radius: 6px; padding: 8px 10px; text-align: center; color: #0B2E4F; letter-spacing: .03em; }
.btg-mfa-avviso { background: #FFF6E5; color: #8A5A00; font-size: 12.5px; padding: 10px 12px; border-radius: 8px; margin-bottom: 18px; line-height: 1.4; }
.btg-mfa-continua {
    display: block; width: 100%; padding: 11px; background: #0B2E4F; color: #fff; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; box-sizing: border-box; transition: background .15s;
}
.btg-mfa-continua:hover { background: #123A63; }

@media (max-width: 760px) {
    .btg-login { flex-direction: column; }
    .btg-login__brand { flex: none; padding: 32px 28px; }
    .btg-login__pitch { display: none; }
    .btg-login__panel { flex: none; padding: 32px 20px 40px; }
}

/* Abbonamento non attivo: tutto consultabile, niente modificabile (StatoLicenza). */
.btg-banner-sola-lettura {
    background: #A6362C;
    color: #fff;
    padding: 10px 20px;
    font-size: .9rem;
    text-align: center;
    line-height: 1.35;
}

.btg-banner-avviso {
    background: #FFF4E5;
    color: #7A4A08;
    padding: 8px 20px;
    font-size: .88rem;
    text-align: center;
    border-bottom: 1px solid #F0D9B0;
}

/* ---------- Home personalizzabile (indicatori e comandi a scelta dell'utente, vedi home.js) ---------- */
.btg-kpi[hidden], .btg-home-card[hidden] { display: none !important; }
.btg-home-testata { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.btg-home-btn { padding: 7px 14px; border: 1px solid #D3DCE6; background: #fff; color: var(--btg-primario, #0B2E4F); border-radius: 8px; font-weight: 600; font-size: .85rem; cursor: pointer; }
.btg-home-btn:hover { background: #F3F6F9; }
.btg-home-btn--primario { background: var(--btg-primario, #0B2E4F); color: #fff; border-color: var(--btg-primario, #0B2E4F); }
.btg-home-btn--primario:hover { background: var(--btg-primario, #0B2E4F); opacity: .9; }
.btg-home-btn--pericolo { color: #A6362C; margin-left: auto; }
.btg-home-modifica { background: #F0FAFC; border: 1px solid #BEE7EF; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.btg-home-modifica__testo { font-size: .88rem; color: #33475B; margin-bottom: 10px; }
.btg-home-modifica__elenchi { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
@media (max-width: 800px) { .btg-home-modifica__elenchi { grid-template-columns: 1fr; } }
.btg-home-modifica h4 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6B7A93; }
.btg-home-cerca { width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid #C9D2DE; border-radius: 6px; margin-bottom: 8px; font-size: .85rem; }
.btg-home-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.btg-home-chip { border: 1px solid #C9D2DE; background: #fff; border-radius: 16px; padding: 4px 12px; font-size: .8rem; cursor: pointer; color: #0B2E4F; }
.btg-home-chip:hover { border-color: var(--btg-accento, #00B8D9); background: #F0FAFC; }
.btg-home-chip small { color: #8896A8; }
.btg-home-nulla { font-size: .8rem; color: #8896A8; }
.btg-home-modifica__bottoni { display: flex; gap: 8px; margin-top: 12px; }
.btg-home--modifica .btg-kpi, .btg-home--modifica .btg-home-card { outline: 2px dashed var(--btg-accento, #00B8D9); outline-offset: 2px; cursor: grab; position: relative; }
.btg-home--modifica .btg-home-card:hover { transform: none; }
.btg-edit-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; z-index: 3; }
.btg-edit-tools button { width: 26px; height: 26px; border: 1px solid #C9D2DE; background: #fff; border-radius: 6px; cursor: pointer; font-size: .72rem; line-height: 1; padding: 0; color: #0B2E4F; }
.btg-edit-tools button:last-child { color: #A6362C; }
.btg-edit-tools button:hover { background: #F3F6F9; }
.btg-trascinato { opacity: .45; }
.btg-rilascio { outline-color: #F59E0B !important; background: #FFFBEB; }

/* Comandi di riga (matita, cestino, orologio «Storico») allineati a sinistra: così la matita sta sempre nello stesso punto, anche nelle righe che hanno l'orologio in più */
.dx-datagrid td.dx-command-edit,
.dx-treelist td.dx-command-edit { text-align: left !important; padding-left: 12px !important; }

/* La graffetta «Allegati» nella cella dei comandi: stessa dimensione e colore delle altre icone di riga */
.btg-graffetta { display: inline-flex; align-items: center; vertical-align: middle; }
.btg-graffetta svg { display: block; }

/* Popup di modifica (Ordine Cliente, Cliente, ecc.): quando il contenuto supera l'altezza
   massima, DevExtreme mostra una barra di scorrimento "overlay" (sta sopra il contenuto,
   non lo restringe) che altrimenti copre il bordo destro dei campi nella colonna di destra. */
.dx-popup-content .dx-form { padding-right: 16px; }

/* Schede (tabulatori) ben riconoscibili: barra di fondo, scheda attiva piena (colore del tema, testo bianco), le altre più scure al passaggio del mouse.
   Vale per tutti i pannelli a schede (dxTabPanel) e per le barre di schede autonome (Integrazioni, Andamento). */
.dx-tabpanel { border: 1px solid #B9C6D8; border-radius: 8px; overflow: hidden; background: #fff; }
.dx-tabpanel > .dx-tabpanel-tabs, #dx-tab-integrazioni .dx-tabs, #dx-andamento-tabs .dx-tabs { background: #DDE5F0; border-bottom: 2px solid var(--btg-primario, #0B2E4F); }
#dx-tab-integrazioni .dx-tabs, #dx-andamento-tabs .dx-tabs { border-radius: 8px 8px 0 0; }
.dx-tabpanel .dx-tabs .dx-tab, #dx-tab-integrazioni .dx-tab, #dx-andamento-tabs .dx-tab {
    color: #34496A; font-weight: 600; background: transparent; border: 0; border-right: 1px solid #C5D1E1; padding: 10px 20px;
}
.dx-tabpanel .dx-tabs .dx-tab:hover, #dx-tab-integrazioni .dx-tab:hover, #dx-andamento-tabs .dx-tab:hover { background: #C9D7E8; color: var(--btg-primario, #0B2E4F); }
.dx-tabpanel .dx-tabs .dx-tab.dx-tab-selected, #dx-tab-integrazioni .dx-tab.dx-tab-selected, #dx-andamento-tabs .dx-tab.dx-tab-selected {
    background: var(--btg-primario, #0B2E4F); color: #fff; border-right-color: var(--btg-primario, #0B2E4F);
}
.dx-tabpanel .dx-tabs .dx-tab.dx-tab-selected .dx-tab-text, #dx-tab-integrazioni .dx-tab.dx-tab-selected .dx-tab-text, #dx-andamento-tabs .dx-tab.dx-tab-selected .dx-tab-text { color: #fff; }