/* COPIA da depy/static/css/impostazioni.css (commit 1360520, 10/11/2026). Non modificare qui:
   se cambia in Depy si ricopia (vedi web/css/depy/LEGGIMI.md). */
/* DEPY - Impostazioni e Profilo (cfg-*, pf-*, ph-*). */
/* ============================================================
   IMPOSTAZIONI E PROFILO: LA STESSA PAGINA

   Le due aree sono nate in momenti diversi e si vedeva: il Profilo
   aveva un margine negativo che lo tirava in alto e a sinistra per
   attaccare la vecchia fascia colorata al bordo, mentre le
   Impostazioni stavano dentro il riquadro normale. Risultato: due
   larghezze, due centraggi, due punti di partenza. Qui il Profilo
   torna nel riquadro come tutti, e da li' in giu' le due pagine si
   misurano uguali.
   ============================================================ */
.cfg-pagina .profile-page { width: auto; margin: 0; padding: 0; max-width: none; }
.cfg-pagina .cfg-guscio { max-width: 1280px; margin: 0 auto; padding: 0; }

/* La testata: stessa altezza, stesso stacco, stessa misura del titolo,
   sia che sopra ci sia l'icona di una sezione sia che ci sia il tondo
   con le iniziali. */
.cfg-pagina .dp-head,
.cfg-pagina .pf-head { margin: 2px 0 20px; min-height: 48px; }
.cfg-pagina .dp-head-testo h1,
.cfg-pagina .dp-head-testo h3,
.cfg-pagina .pf-head h3 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; margin: 0; }
.cfg-pagina .dp-head-testo p,
.cfg-pagina .pf-head .pf-meta { font-size: .86rem; color: var(--testo-2); margin: 2px 0 0; }

/* Le scritte piccole: una misura e un colore per tutte. Erano la nota
   sotto il titolo di un riquadro, l'aiuto sotto un campo, il
   "text-muted" di Bootstrap e due o tre varianti scritte a mano, ognuna
   con il suo corpo e il suo grigio. */
.cfg-pagina .pf-card-head p,
.cfg-pagina .hb-rq-testa p,
.cfg-pagina .rq-spiega,
.cfg-pagina .aiuto,
.cfg-pagina .form-text,
.cfg-pagina .text-muted,
.cfg-pagina small,
.cfg-pagina .small {
    font-size: .84rem; line-height: 1.45; color: var(--testo-2);
}
.cfg-pagina .pf-card-head p,
.cfg-pagina .hb-rq-testa p { margin: 3px 0 0; }
.cfg-pagina .aiuto b, .cfg-pagina .aiuto strong,
.cfg-pagina small b, .cfg-pagina small strong { font-weight: 600; color: var(--primario); }
[data-bs-theme="dark"] .cfg-pagina .aiuto b,
[data-bs-theme="dark"] .cfg-pagina .aiuto strong,
[data-bs-theme="dark"] .cfg-pagina small b,
[data-bs-theme="dark"] .cfg-pagina small strong { color: var(--testo); }
/* I titoli dei riquadri: una misura sola, come nel mockup. */
.cfg-pagina .pf-card-head h5,
.cfg-pagina .hb-rq-testa h3 { font-size: .95rem; font-weight: 600; margin: 0; }

/* I pulsanti: qui dentro nessuno resta grigio. Chi non ha la pillola
   addosso la prende comunque, cosi' un pulsante dimenticato in un
   angolo non stona con gli altri. */
.cfg-pagina .btn:not(.btn-close) {
    height: 38px; padding: 0 16px; border-radius: var(--r-md);
    font-size: var(--fs-base); font-weight: 600; box-shadow: none;
    display: inline-flex; align-items: center; gap: .4rem;
}
.cfg-pagina .btn-sm { height: 34px; padding: 0 13px; font-size: .84rem; }

/* ============================================================
   PAGINA PROFILO / PREFERENZE
   ============================================================ */
/* Account/Profilo: full-width, negativizza padding del <main class="p-4"> */
.profile-page {
    width: auto;
    /* nessun margine TOP: la hero attacca sotto la topbar */
    margin: -1.5rem -1.5rem 0;
    padding: 0 1.25rem 1.5rem;
}
/* Hero senza radius agli angoli superiori per l'effetto edge-to-edge */
@media (max-width: 575.98px) {
    .profile-page { margin: -1rem 0 0; padding: 0 1rem 1rem; }
    }


/* Favoriti: griglia di card */
.favorites-section { margin-bottom: 1.5rem; }
.favorites-section-title {
    font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--testo-2); font-weight: 600; margin-bottom: 0.6rem;
    padding-bottom: 0.35rem; border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-bs-theme="dark"] .favorites-section-title { border-bottom-color: var(--bordo); }

.favorites-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
}
.favorite-card {
    position: relative;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--superficie);
    color: var(--testo);
    margin: 0;
}
[data-bs-theme="dark"] .favorite-card { border-color: var(--bordo); }
.favorite-card:hover { border-color: var(--blu-500); transform: translateY(-1px); box-shadow: var(--ombra-2); }
.favorite-card .favorite-check { display: none; }
.favorite-card .favorite-icon { font-size: 1.1rem; color: var(--testo-2); flex-shrink: 0; }
.favorite-card .favorite-label { flex: 1; font-size: var(--fs-base); line-height: 1.2; }
.favorite-card .favorite-badge {
    color: var(--blu-500); opacity: 0; transition: opacity 0.15s ease;
    font-size: var(--fs-md);
}
.favorite-card.is-selected {
    background: rgba(var(--blu-500-rgb), 0.08); border-color: var(--blu-500);
}
.favorite-card.is-selected .favorite-icon { color: var(--blu-500); }
.favorite-card.is-selected .favorite-badge { opacity: 1; }
[data-bs-theme="dark"] .favorite-card.is-selected { background: rgba(var(--blu-500-rgb), 0.18); }

/* Account info list */

/* Theme picker */
:is(.theme-option, .contrasto-option) {
    background: transparent; border: 2px solid rgba(0,0,0,0.10);
    border-radius: var(--r-md); padding: 0.85rem; cursor: pointer;
    transition: all 0.15s ease;
    display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
    color: inherit;
}
:is(.theme-option, .contrasto-option):hover { border-color: var(--blu-500); transform: translateY(-2px); box-shadow: var(--ombra-2); }
:is(.theme-option, .contrasto-option).is-selected { border-color: var(--blu-500); box-shadow: 0 0 0 3px rgba(var(--blu-500-rgb),0.15); }
[data-bs-theme="dark"] :is(.theme-option, .contrasto-option) { border-color: var(--bordo); }


/* Sticky footer per Salva — ancorato in fondo alla viewport, sempre visibile */
.prefs-sticky-actions {
    position: fixed;
    left: var(--sidebar-width); right: 0; bottom: 0;
    background: var(--superficie);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: var(--ombra-2);
    z-index: var(--z-barra);
    padding: 0.65rem 1.25rem;
    transition: left 0.3s ease;   /* segue l'animazione a fisarmonica della sidebar */
}
/* Quando la sidebar è collassata (mobile o desktop), la barra usa tutta la larghezza */
html.menu-sganciato .prefs-sticky-actions { left: 0; }
.prefs-sticky-inner {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; max-width: 100%;
}
.prefs-sticky-spacer { height: 72px; }   /* spazio per non far coprire l'ultimo contenuto */

/* Esce solo quando hai cambiato qualcosa, e dice quante cose.

   Sta gia' giu' da prima che la pagina si disegni: la classe con-js
   sta sull'<html> e ce la mette una riga di copione dentro al <head>,
   cosi' non c'e' nessun momento in cui la barra si vede e poi sparisce.
   Se il copione non partisse, con-js non ci sarebbe e la barra
   resterebbe visibile come una volta: non si rischia di non poter
   salvare. */
/* SOLO nelle Impostazioni e nel Profilo (.cfg-pagina). Le altre pagine
   con questa barra - la ricezione merce, le schede di utenti, causali,
   tipi documento, fornitori e anagrafiche - la tengono sempre in vista:
   li' i pulsanti in fondo sono il modo di andare avanti, non un
   «salva le modifiche», e nasconderli li aveva fatti sparire. */
.con-js .cfg-pagina .prefs-sticky-actions {
    transform: translateY(110%);
    transition: transform .18s ease-out, left .3s ease;
}
.con-js .cfg-pagina .prefs-sticky-actions.e-su { transform: none; }
.con-js .cfg-pagina .prefs-sticky-spacer { height: 0; }
.prefs-conta { margin-right: auto; font-size: var(--fs-base); line-height: 1.3; }
/* I pulsanti della barra sono quelli del mockup: pillole, non i
   rettangoli di Bootstrap. */
.prefs-sticky-inner .hbt-grande { height: 42px; padding: 0 20px; font-size: var(--fs-base); }
.prefs-conta b { font-weight: 600; }
.prefs-conta span { display: block; font-size: var(--fs-sm); color: var(--testo-2); }
/* Da telefono e tablet: sopra la barra di navigazione in basso e a tutta
   larghezza. La stessa regola sta in commesse.css, ma questo foglio arriva
   dopo e la sovrascriveva con la posizione da computer (da 260px, sotto il
   menu in basso). La scritta si stringe a una riga. */
@media (max-width: 991.98px) {
    .prefs-sticky-actions {
        left: 0; right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: calc(var(--z-barra) - 1);
        padding: .55rem .75rem;
    }
    html.menu-sganciato .prefs-sticky-actions { left: 0; }
    .prefs-sticky-inner { gap: .4rem; }
    .prefs-conta { font-size: var(--fs-sm); min-width: 0; }
    .prefs-conta span { display: none; }
    .prefs-sticky-inner .hbt-grande { height: 40px; padding: 0 14px; }
}

/* =============================================
   IMPOSTAZIONI E PROFILO: il guscio

   Qui la barra laterale non c'e'. Le sue voci - magazzino, ordini,
   anagrafiche - con le impostazioni non c'entrano, e tenerle visibili
   mentre uno sta sistemando i dati dell'azienda e' solo un invito ad
   andarsene. Al suo posto, il menu delle sezioni dell'area, come
   scheda bianca dentro la pagina: stesso bordo, stessi angoli e stessa
   ombra di tutti gli altri riquadri.
   ============================================= */
/* Niente margini da togliere: il menu delle sezioni sta nella barra a
   sinistra, come in tutto il resto del programma. Questa classe serve
   solo a vestire i campi di queste due aree. */

/* Non a tutto schermo: su un monitor grande una riga di modulo lunga
   milleduecento punti non si legge, l'occhio deve tornare indietro ogni
   volta. Sta al centro, come il foglio di un documento. */
/* Il menu sta nella barra a sinistra, qui c'e' solo la roba: il
   contenuto puo' respirare un po' di piu' di prima, ma non a tutto
   schermo - una riga di modulo lunga milleduecento punti non si legge. */
.cfg-guscio { max-width: 1280px; margin: 0 auto; }
.cfg-roba { min-width: 0; }

.cfg-menu {
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-lg);
    box-shadow: var(--ombra-2); overflow: hidden;
    /* Si ferma sotto la barra in cima, che adesso resta anche lei. */
    position: sticky; top: 76px;
}

/* Il riquadro dove si carica un'immagine: il tratteggio del mockup.
   Il riquadro stesso e' il pulsante - ci si clicca sopra e si apre la
   finestra dei file - perche' un rettangolo vuoto con scritto "Nessun
   logo" sembra una cosa da riempire, ed e' giusto che lo sia. */
.cfg-carica {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 100%; min-height: 118px; padding: 14px;
    border: 1px dashed var(--bordo-forte); border-radius: var(--r-md);
    /* I colori di Bootstrap, non i nostri: cambiano da soli quando
       cambia il tema, e questo riquadro al buio restava bianco. */
    background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
    font-size: var(--fs-sm); text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cfg-carica:hover { border-color: var(--primario); background: var(--bs-secondary-bg); }
.cfg-carica > i { font-size: 1.3rem; }
.cfg-carica.e-pieno { border-style: solid; background: var(--bs-body-bg); padding: 10px; }
.cfg-carica img { max-width: 100%; max-height: 96px; object-fit: contain; }
/* Nel registro: il verbo con la sua iconcina colorata, dentro la
   cella. Verde per quello che nasce, blu per quello che cambia, rosso
   per quello che si butta: gli stessi colori del resto del programma. */
.el-fatto { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.el-fatto .cfg-fatto-ico { width: 26px; height: 26px; flex: 0 0 26px; font-size: var(--fs-sm); }

/* ============================================================
   LE PILLOLE DEI CODICI

   Su quali codici Depy ottimizza: prima era un campo di testo con le
   virgole, dove "2, K, M" non diceva a colpo d'occhio cos'era acceso e
   una virgola di troppo contava come codice vuoto. Il valore vero resta
   la stessa riga separata da virgole, in un campo nascosto: cambia come
   si guarda e come si tocca, non come si salva.
   ============================================================ */
.pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 34px; padding: 0 14px; border-radius: var(--r-pill);
    border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-2);
    font-size: .85rem; font-weight: 500; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.pill:hover { border-color: var(--bordo-forte); background: var(--velo); }
/* La spunta c'e' solo su quelli accesi: su quelli spenti occupa il posto
   senza vedersi, se no le pillole ballano quando le accendi. */
.pill i { opacity: 0; font-size: var(--fs-sm); }
.pill.on { background: var(--hb-lavoro-ico); border-color: var(--blu-500); color: var(--blu-500); font-weight: 600; }
.pill.on i { opacity: 1; }
.pill.e-aggiungi { border-style: dashed; color: var(--testo-2); }
.pill.e-aggiungi i { opacity: 1; }
[data-bs-theme="dark"] .pill { border-color: var(--bordo-forte); color: var(--testo); }
[data-bs-theme="dark"] .pill:hover { background: var(--superficie); }
[data-bs-theme="dark"] .pill.on { background: rgba(var(--primario-rgb),.4); color: var(--blu-200); }

/* ---- gli interruttori con la loro spiegazione sotto ----
   L'etichetta e la spiegazione stanno in colonna accanto al tasto: prima
   la spiegazione era un form-text fuori dall'etichetta e finiva sotto a
   tutto, staccata dalla frase a cui apparteneva. */
.cfg-switch { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; margin: 0; min-height: 0; }
.cfg-switch + .cfg-switch { border-top: 1px solid var(--bordo); }
.cfg-switch .form-check-input { flex: 0 0 auto; margin: 1px 0 0; float: none; }
.cfg-switch .form-check-label { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; cursor: pointer; }
.cfg-switch .form-check-label span {
    display: block; font-weight: 400; font-size: var(--fs-sm);
    color: var(--testo-2); margin-top: 2px; line-height: 1.45;
}
.cfg-switch .form-check-input:disabled { opacity: .75; }
.cfg-switch .form-check-input:disabled ~ .form-check-label { cursor: default; }

/* ---- il registro: righe basse e apribili ----
   In un registro si scorre: una riga alta il doppio vuol dire meta
   delle cose sullo schermo. Il dettaglio sta in una riga nascosta sotto
   quella cliccata, cosi non si cambia pagina per leggere una data. */
.el-lista tbody tr.el-stretta td { padding-top: 8px; padding-bottom: 8px; cursor: pointer; }
.el-quando { white-space: nowrap; }
.el-quando .el-mini { margin-left: 6px; }
.el-lista tbody tr.el-stretta .el-mini { display: inline; font-size: var(--fs-sm); }
.el-lista tbody tr.el-dettaglio { display: none; }
.el-lista tbody tr.el-stretta.e-aperta + tr.el-dettaglio { display: table-row; }
.el-lista tbody tr.el-stretta.e-aperta td { background: var(--velo); }
.el-dentro {
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    padding: 10px 2px 14px; font-size: var(--fs-sm); color: var(--testo-2);
}
.el-dentro b { font-weight: 600; color: var(--primario); margin-right: 5px; }
[data-bs-theme="dark"] .el-dentro b { color: var(--testo); }
.el-dentro code {
    flex: 1 1 100%; display: block; margin-top: 4px; padding: 8px 10px;
    background: var(--velo); border-radius: var(--r-sm); font-size: var(--fs-sm);
    white-space: pre-wrap; word-break: break-word; color: var(--testo-2);
}
[data-bs-theme="dark"] .el-dentro code { background: var(--superficie); }

/* ---- i cartoncini di scelta (tema, dove arrivano gli avvisi) ----
   Sotto a ogni nome c e scritto quando conviene: un quadrato di colore
   con l etichetta sotto non dice niente a chi non l ha gia provato. */
.cfg-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
/* Le misure sono quelle del mockup, prese dai valori calcolati: bordo
   sottile, dodici e quattordici di spazio dentro, il nome in grassetto
   pieno e la spiegazione due punti piu' piccola. */
.cfg-scelta {
    border: 1px solid var(--bordo); border-radius: var(--r-md); padding: 12px 14px;
    background: var(--superficie); text-align: left; cursor: pointer; display: block; width: 100%;
    transition: background .15s, border-color .15s;
}
.cfg-scelta strong { display: block; font-size: var(--fs-base); font-weight: 700; line-height: 1.3; }
.cfg-scelta strong i { margin-right: .25rem; }
.cfg-scelta span { display: block; font-size: .76rem; color: var(--testo-2); margin-top: 3px; line-height: 1.45; }
.cfg-scelta:hover { border-color: var(--bordo-forte); background: var(--velo); }
.cfg-scelta.e-on, .cfg-scelta.active, .cfg-scelta.is-selected, .cfg-scelta.is-active {
    border-color: var(--blu-500); background: var(--hb-lavoro-ico);
}
.cfg-scelta.e-on strong i, .cfg-scelta.is-selected strong i { color: var(--blu-500); }
/* La vecchia veste del tema - griglia stretta, bordo doppio, quadrati di
   colore - non deve piu' arrivare addosso ai cartoncini. */
.pf-tema.cfg-scelte .cfg-scelta { border-width: 1px; min-height: 0; flex-direction: column; }
.pf-tema.cfg-scelte .anteprima { display: none; }
/* Quello che non si puo spegnere non fa finta di essere un pulsante. */
.cfg-scelta.e-fisso { cursor: default; }
.cfg-scelta.e-fisso:hover { border-color: var(--blu-500); background: var(--hb-lavoro-ico); }
[data-bs-theme="dark"] .cfg-scelta { border-color: var(--bordo-forte); }
[data-bs-theme="dark"] .cfg-scelta:hover { background: var(--superficie); }
[data-bs-theme="dark"] .cfg-scelta.e-on, [data-bs-theme="dark"] .cfg-scelta.active,
[data-bs-theme="dark"] .cfg-scelta.is-selected,
[data-bs-theme="dark"] .pf-tema .cfg-scelta.is-active { background: rgba(var(--primario-rgb),.4); border-color: var(--blu-500); }
[data-bs-theme="dark"] .cfg-scelta strong { color: var(--testo); }
/* I due gruppi di cartoncini portavano addosso la veste vecchia: il tema
   una griglia a tre colonne fisse strette e quadrati di colore, le
   azioni un bordo doppio e una colonna sola larga tutta la pagina. Le
   classi restano perche le usa il copione, ma la grafica e questa, con
   le misure prese dal mockup. */
.cfg-scelte.pf-tema, .cfg-scelte.ph-modi {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px; margin: 0;
    /* Il tema aveva un tetto di 520 punti rimasto dalla veste vecchia:
       il terzo cartoncino andava a capo mentre quelli accanto si
       allargavano a mezza pagina. */
    max-width: 860px;
}
.cfg-scelta:is(.theme-option, .contrasto-option), .cfg-scelta.ph-modo {
    border: 1px solid var(--bordo); border-radius: var(--r-md); padding: 12px 14px;
    min-height: 0; height: auto; display: block; text-align: left;
    background: var(--superficie); box-shadow: none;
}
.cfg-scelta.ph-modo:has(input:checked),
.cfg-scelta:is(.theme-option, .contrasto-option).is-selected, .cfg-scelta.ph-modo.is-selected,
.cfg-scelta:is(.theme-option, .contrasto-option).active, .cfg-scelta.ph-modo.active {
    border-color: var(--blu-500); background: var(--hb-lavoro-ico);
}
[data-bs-theme="dark"] .cfg-scelta:is(.theme-option, .contrasto-option),
[data-bs-theme="dark"] .cfg-scelta.ph-modo { border-color: var(--bordo-forte); }
[data-bs-theme="dark"] .cfg-scelta:is(.theme-option, .contrasto-option).is-selected,
[data-bs-theme="dark"] .cfg-scelta.ph-modo.is-selected {
    background: rgba(var(--primario-rgb),.4); 
}
/* La spunta tonda in alto a destra non serve piu: la cornice dice gia
   quale hai scelto. */

/* Il pallino del radio dentro un cartoncino non serve: la cornice dice
   gia quale hai scelto, e due segnali per la stessa cosa si pestano. */
.cfg-scelta input[type="radio"], .cfg-scelta input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cfg-scelta { position: relative; }

/* Il riquadro dell app: il quadratino con la D, il testo e il pulsante
   sulla stessa riga, come nel mockup. */
.cfg-app-riga { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* l'icona vera dell'app, la stessa che finisce sul telefono */
.cfg-app-icona {
    width: 54px; height: 54px; flex: 0 0 54px; border-radius: var(--r-lg);
    display: block; object-fit: cover; box-shadow: var(--ombra-1, 0 1px 3px rgba(0,0,0,.12));
}
.cfg-app .hbt { margin-left: auto; white-space: nowrap; }
.cfg-app-dice { flex: 1 1 220px; font-size: .86rem; color: var(--testo-2); line-height: 1.5; }

.cfg-dove-arrivano { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.cfg-dove-arrivano .form-label { display: block; margin-bottom: 8px; }

/* Il foglio dell anteprima della firma: resta chiaro anche di notte,
   perche una email su carta bianca si legge, ma lo dichiara con una
   cornice invece di sembrare un buco nella pagina. */
.cfg-foglio {
    min-height: 150px; padding: 14px; border-radius: var(--r-md);
    border: 1px solid var(--bordo); background: var(--superficie); color: var(--blu-700);
    font-size: var(--fs-base); overflow: auto;
}
.cfg-foglio em { color: var(--testo-debole); }
[data-bs-theme="dark"] .cfg-foglio { border-color: var(--bordo-forte); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }

/* Il riquadro delle cose serie: un filo di rosso sul bordo, perche quello
   che si tocca li dentro si sente altrove. */
.cfg-serio { border-left: 3px solid var(--no); }

/* ---- la riga della prova d'invio, in fondo al riquadro della posta ---- */
.cfg-prova {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo);
}
.cfg-prova .form-control { flex: 0 1 240px; }
.cfg-prova .aiuto { flex: 1 1 200px; }

/* Dove finisce quell immagine: scritto accanto all etichetta, perche
   «Logo» e «Logo scuro» da soli non dicono quale va dove. */
.cfg-dove { font-weight: 400; color: var(--testo-2); font-size: var(--fs-sm); }
.cfg-consiglio { display: block; margin-top: 4px; color: var(--testo-debole); font-size: var(--fs-xs); line-height: 1.4; }

/* Il campo vero resta nella pagina ma non si vede: e' lui che il modulo
   manda al server, e lo apre il riquadro qui sopra. */
.cfg-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cfg-carica-az { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cfg-carica-az .hb-bt-chiaro, .cfg-carica-az .hbt-chiaro { height: 32px; font-size: var(--fs-sm); cursor: pointer; margin: 0; }
.cfg-togli {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--fs-sm); color: var(--testo-2); cursor: pointer; margin: 0;
}
.cfg-togli input { margin: 0; }

/* (il fondo lo da' Bootstrap: vedi .cfg-carica) */
.cfg-menu-testa { padding: 14px 16px 10px; border-bottom: 1px solid var(--bordo); }
.cfg-menu-testa strong { display: block; font-size: .95rem; color: var(--primario); }
.cfg-menu-testa span {
    display: block; font-size: var(--fs-sm); color: var(--testo-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «Torna alla home» e' la via d'uscita da quest'area: scritto in grigio
   piccolo non si vedeva. Adesso e' un pulsante vero, con la freccia in
   un tondino, e si stacca dalle voci delle sezioni. */
.cfg-menu-torna {
    display: flex; align-items: center; gap: .55rem;
    margin: 10px 8px; padding: 9px 11px;
    font-size: .86rem; font-weight: 600; color: var(--blu-500);
    text-decoration: none; border-radius: var(--r-sm);
    background: var(--hb-lavoro-ico); border: 1px solid var(--blu-100);
    transition: background .15s, border-color .15s;
}
.cfg-menu-torna i {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--superficie); font-size: var(--fs-sm);
}
.cfg-menu-torna:hover { background: var(--blu-100); border-color: var(--blu-200); color: var(--blu-500); }
[data-bs-theme="dark"] .cfg-menu-torna { background: rgba(var(--primario-rgb),.35); border-color: var(--blu-500); color: var(--blu-200); }
.cfg-voci { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cfg-voce {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: 9px 11px; border-radius: var(--r-sm); text-decoration: none;
    font-size: var(--fs-base); color: var(--testo-2);
}
.cfg-voce > i { flex: 0 0 18px; width: 18px; font-size: var(--fs-md); color: var(--testo-2); margin-top: 1px; }
.cfg-voce > span { flex: 1 1 auto; min-width: 0; }
.cfg-voce small {
    display: block; font-size: var(--fs-xs); color: var(--testo-2);
    font-weight: 400; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfg-voce:hover { background: var(--velo); color: var(--primario); }
.cfg-voce.e-qui { background: var(--hb-lavoro-ico); color: var(--blu-500); font-weight: 600; }
.cfg-voce.e-qui > i, .cfg-voce.e-qui small { color: var(--blu-500); }

[data-bs-theme="dark"] .cfg-menu-testa, [data-bs-theme="dark"] .cfg-menu-torna { border-color: var(--bordo); }
[data-bs-theme="dark"] .cfg-menu-testa strong { color: var(--testo); }
[data-bs-theme="dark"] .cfg-voce { color: var(--testo); }
[data-bs-theme="dark"] .cfg-voce:hover { color: #fff; }
[data-bs-theme="dark"] .cfg-voce.e-qui { background: rgba(var(--primario-rgb),.4); color: var(--blu-200); }

/* I campi, le etichette e le righe di aiuto come nel mockup. Valgono
   solo qui dentro (.cfg-pagina = Impostazioni e Profilo): sono pagine
   di moduli, e un modulo si legge meglio con l'etichetta piccola e in
   grassetto sopra una casella alta e tranquilla. */
.cfg-pagina .form-label,
.cfg-pagina .pf-card label:not(.form-check-label) {
    font-size: var(--fs-sm); font-weight: 600; color: var(--primario); margin-bottom: 4px;
}
.cfg-pagina .form-control,
.cfg-pagina .form-select,
.cfg-pagina textarea.form-control {
    min-height: 40px; padding: 8px 12px; font-size: var(--fs-base);
    border: 1px solid var(--bordo); border-radius: var(--r-md);
    color: var(--primario); background: var(--superficie);
}
.cfg-pagina textarea.form-control { min-height: 76px; }
.cfg-pagina .form-control:focus,
.cfg-pagina .form-select:focus {
    border-color: var(--primario);
    box-shadow: 0 0 0 4px rgba(var(--primario-rgb),.10);
}
.cfg-pagina .form-control:disabled,
.cfg-pagina .form-control[readonly] { background: var(--velo); color: var(--testo-2); }
.cfg-pagina .form-text,
.cfg-pagina .aiuto {
    font-size: .76rem; color: var(--testo-2); margin-top: 4px; line-height: 1.45;
}
/* Il titolo della sezione, della misura del mockup. */
.cfg-pagina .dp-titolo h2 { font-size: var(--fs-xl); font-weight: 700; }
.cfg-pagina .dp-head { margin-bottom: 16px; }
.cfg-pagina .pf-head h3 { font-size: var(--fs-xl); }
/* Gli interruttori: piu' grandi e con la scritta che non si stringe. */
.cfg-pagina .form-switch .form-check-input { width: 2.6em; height: 1.45em; margin-top: .1em; }
.cfg-pagina .form-check-label { font-size: var(--fs-base); }

[data-bs-theme="dark"] .cfg-pagina .form-control,
[data-bs-theme="dark"] .cfg-pagina .form-select { border-color: var(--bordo-forte); color: var(--testo); }

/* Da telefono la scheda sparisce: restano le sezioni nella tendina in
   cima, che c'era gia'. Una colonna da 250 punti su uno schermo stretto
   si mangia mezza pagina. */
@media (max-width: 991.98px) {
    .cfg-guscio { grid-template-columns: minmax(0, 1fr); }
    .cfg-menu { display: none; }
}
.cfg-pagina .pf-avatar {
    width: 46px; height: 46px; flex: 0 0 46px; font-size: 1.05rem;
    border-radius: var(--r-lg); background: var(--hb-lavoro-ico); color: var(--blu-500);
}
.cfg-pagina .pf-head h3 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; margin: 0; }
.cfg-pagina .pf-head .pf-meta { font-size: .86rem; color: var(--testo-2); margin-top: 2px; }


[data-bs-theme="dark"] .prefs-sticky-actions { border-top-color: var(--bordo); box-shadow: var(--ombra-2); }

.filter-dd .filter-dd-btn:hover {
    border-color: rgba(var(--blu-500-rgb),0.5);
}
.filter-dd .filter-dd-btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--blu-500-rgb),0.15);
    border-color: var(--blu-300);
    outline: 0;
}
/* Rimuove eventuale caret bootstrap dropdown se stile applicato altrove */
.filter-dd .filter-dd-btn::after { display: none; }
.filter-dd-menu {
    min-width: 320px;
    max-width: 400px;
    max-height: 360px;
    overflow-y: auto;
    border-radius: var(--r-md);
    border-color: rgba(0,0,0,0.12);
    box-shadow: var(--ombra-4);
}
.filter-dd-item {
    padding: 0.35rem 0.5rem;
    border-radius: var(--r-sm);
    margin-bottom: 2px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.filter-dd-item:hover { background: rgba(var(--blu-500-rgb),0.06); }
.filter-dd-item .form-check-label { cursor: pointer; padding-left: 0.25rem; }
.filter-dd-checks {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
[data-bs-theme="dark"] .filter-dd .filter-dd-btn {
    background: var(--velo);
    color: rgba(255,255,255,0.85);
    border-color: var(--bordo);
}
[data-bs-theme="dark"] .filter-dd .filter-dd-btn:hover {
    background: var(--velo);
}
[data-bs-theme="dark"] .filter-dd-menu { background: var(--superficie); border-color: var(--bordo); }
[data-bs-theme="dark"] .filter-dd-item:hover { background: rgba(var(--blu-500-rgb),0.15); }

/* ===== Profilo & Preferenze ===== */
.pf-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.pf-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--blu-700); color: #fff; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-head h3 { margin: 0; font-weight: 700; }
.pf-head .pf-meta { color: var(--testo-2); font-size: var(--fs-base); }
/* La scatola del Profilo e' la card del resto del sito: stesso bordo,
   stessi angoli, stessa ombra, stesso titoletto. Prima erano due
   scatole diverse per la stessa cosa. */
.pf-card {
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-lg);
    box-shadow: var(--ombra-2); margin-bottom: 1rem;
}
.pf-card-head { padding: 13px 18px; border-bottom: 1px solid var(--bordo); }
.pf-card-head h5 {
    margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35;
    display: flex; align-items: center; gap: .5rem;
}
.pf-card-head h5 > i { color: var(--testo-2); font-size: var(--fs-md); }
.pf-card-head p { margin: 6px 0 0; color: var(--testo-2); font-size: .84rem; line-height: 1.5; }
.pf-card-body { padding: 16px 18px; }
.pf-card-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--bordo); display: flex; justify-content: flex-end; gap: .5rem; }
.pf-widget { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--bordo); border-radius: var(--r-md); cursor: pointer; margin: 0; }
.pf-widget.is-active { border-color: var(--blu-200); background: var(--blu-50); }
.pf-widget i { color: var(--testo-2); }
/* La vecchia griglia del tema: la tiene chi non ha i cartoncini nuovi.
   Dove ci sono (.cfg-scelte) vince la regola piu su, che non ha tetto. */
.pf-tema:not(.cfg-scelte) { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 520px; }
.pf-tema button { border: 2px solid var(--bordo); border-radius: var(--r-md); background: var(--superficie); padding: .75rem; cursor: pointer; }
.pf-tema button.is-selected { border-color: var(--blu-700); background: var(--blu-50); }
.pf-tema .anteprima { height: 44px; border-radius: var(--r-sm); margin-bottom: .5rem; border: 1px solid var(--bordo); }
 [data-bs-theme="dark"] .pf-widget.is-active, [data-bs-theme="dark"] .pf-tema button.is-selected { background: var(--blu-800); }

/* Dentro Profilo la pagina prende tutta la larghezza (stava nel blocco delle
   aree con sezioni proprie; qui perche' il file di Impostazioni si carica dopo). */
.profile-page { width: 100%; max-width: none; }

/* =============================================
   PROFILO > HOME (ph-*): tipo di home, azioni rapide, promemoria, opzioni
   ============================================= */
.ph-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ph-modo {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    margin: 0; padding: 12px; border: 2px solid var(--bordo); border-radius: var(--r-lg); cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.ph-modo:hover { border-color: var(--blu-200); }
.ph-modo.is-selected { border-color: var(--blu-700); background: var(--bs-primary-bg-subtle); }
.ph-modo input { position: absolute; opacity: 0; pointer-events: none; }
.ph-modo:has(input:focus-visible) { outline: 3px solid rgba(var(--primario-rgb), .35); outline-offset: 2px; }


/* Azioni rapide: anteprima, elenco ordinabile */


[data-bs-theme="dark"] .ph-modo.is-selected { background: var(--blu-800); }

.pf-widget .sh-action-ico i { color: inherit; }

/* ---- Classi costruite nei template con un suffisso variabile (dg-s{{ w }},
   role-{{ ruolo }}, anteprima-{{ tema }}): la pulizia del 22/10/2026 le
   aveva prese per morte. ---- */
.role-badge { padding: 0.4em 0.75em; font-weight: 500; border-radius: var(--r-pill); font-size: var(--fs-sm); }
.role-badge i { margin-right: 4px; }
.role-superadmin { background: rgba(var(--no-rgb),0.15); color: var(--rosso-500); border: 1px solid rgba(var(--no-rgb),0.35); }
.role-admin { background: rgba(var(--blu-500-rgb), 0.15); color: var(--blu-500); border: 1px solid rgba(var(--blu-500-rgb), 0.35); }
.role-user { background: rgba(108, 117, 125, 0.15); color: var(--testo-2); border: 1px solid rgba(108, 117, 125, 0.35); }
.role-tenant { background: rgba(var(--primario-rgb),0.12); color: var(--blu-700); border: 1px solid rgba(var(--primario-rgb),0.30); }
.role-active { background: rgba(var(--ok-rgb),0.15); color: var(--verde-600); border: 1px solid rgba(var(--ok-rgb),0.35); }
[data-bs-theme="dark"] .role-admin { color: var(--blu-300); }
[data-bs-theme="dark"] .role-tenant { color: var(--blu-300); }
/* La spunta tonda in alto a destra non serve piu: la cornice dice gia
   quale hai scelto. */
.cfg-scelta .ph-modo-check { display: none; }
.pf-tema .anteprima-chiaro { background: linear-gradient(90deg, #fff 0 30%, #f3f4f6 30%); }
.pf-tema .anteprima-scuro { background: linear-gradient(90deg, #1f2937 0 30%, #111827 30%); }
.pf-tema .anteprima-sistema { background: linear-gradient(90deg, #fff 0 50%, #111827 50%); }
.ph-modo-check { position: absolute; top: 10px; right: 10px; font-size: 1.25rem; color: var(--blu-700); opacity: 0; transition: opacity .15s; }
.ph-modo.is-selected .ph-modo-check { opacity: 1; }
.ph-modo-testo strong { display: block; font-size: var(--fs-md); }
.ph-modo-testo small { color: var(--bs-secondary-color); }


/* ===== RITAGLIO DELLE IMMAGINI (rt-*): la finestra che si apre quando
   logo, timbro o firma non hanno le proporzioni del posto in cui vanno ===== */
.rt-velo { position: fixed; inset: 0; z-index: var(--z-velo); display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16,24,40,.5); opacity: 0; transition: opacity .15s; }
.rt-velo.e-su { opacity: 1; }
.rt-velo[hidden] { display: none; }
.rt-finestra { width: min(780px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-lg); box-shadow: var(--ombra-4); }
.rt-testa { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--bordo); }
.rt-testa h3 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--primario); }
.rt-testa p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--testo-2); }
.rt-x { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--velo); color: var(--testo-2); flex: none; }
.rt-x:hover { background: var(--bordo); color: var(--testo); }
.rt-scena { position: relative; margin: 16px auto 8px; max-width: 100%; overflow: hidden; border-radius: var(--r-sm); background: repeating-conic-gradient(var(--superficie-2) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; }
.rt-scena canvas { display: block; max-width: 100%; }
.rt-riquadro { position: absolute; box-sizing: border-box; border: 2px solid var(--accento); box-shadow: 0 0 0 9999px rgba(16,24,40,.55); cursor: move; touch-action: none; }
.rt-riquadro:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.rt-riquadro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, transparent 33%, rgba(255,255,255,.35) 33%, rgba(255,255,255,.35) calc(33% + 1px), transparent 0, transparent 66%, rgba(255,255,255,.35) 66%, rgba(255,255,255,.35) calc(66% + 1px), transparent 0), linear-gradient(to bottom, transparent 33%, rgba(255,255,255,.35) 33%, rgba(255,255,255,.35) calc(33% + 1px), transparent 0, transparent 66%, rgba(255,255,255,.35) 66%, rgba(255,255,255,.35) calc(66% + 1px), transparent 0); pointer-events: none; }
.rt-comandi { display: flex; align-items: center; gap: 12px; padding: 6px 18px 12px; font-size: var(--fs-sm); color: var(--testo-2); }
.rt-comandi input[type=range] { flex: 1; accent-color: var(--primario); }
.rt-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--bordo); background: var(--velo); }
.rt-dice { font-size: var(--fs-sm); color: var(--testo-2); }
.rt-bt { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767.98px) { .rt-scena { margin: 12px 8px 6px; } .rt-bt .hbt { flex: 1; justify-content: center; } }

/* Impostazioni DEPY: il logo per il buio si guarda su fondo scuro */
.cfg-carica.ip-scuro { background: var(--blu-700); border-color: var(--blu-700); }
/* un elenco dentro un riquadro (gli amministratori): niente doppio bordo */
.card > .el-lista.e-in-card { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

/* I colori dell'azienda: due scelte a sinistra, l'anteprima a destra */
.cl-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cl-campo { margin-bottom: 16px; }
.cl-campo label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 4px; }
.cl-riga { display: flex; align-items: center; gap: 8px; }
.cl-riga input[type="color"] { flex: none; width: 44px; height: 40px; padding: 2px; border: 1px solid var(--bordo-forte); border-radius: var(--r-sm); background: var(--superficie); cursor: pointer; }
.cl-riga input[type="text"] { width: 120px; font-family: monospace; }
.cl-esito { display: block; min-height: 1.2em; margin-top: 4px; font-size: var(--fs-xs); color: var(--testo-2); }
.cl-esito.e-ok { color: var(--ok); }
.cl-esito.e-no { color: var(--no); }
.cl-esito .hbt { margin-left: 6px; }
/* l'anteprima: un pezzo di Depy con i colori scelti */
.cl-gruppo { margin: 4px 0 10px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }
.cl-campo + .cl-gruppo { margin-top: 20px; }
.cl-anteprima { --cl-primario: var(--primario); --cl-accento: var(--accento); --cl-conferma: var(--ok); --cl-errore: var(--no); --cl-attenzione: var(--attenzione); --cl-sfondo: var(--sfondo);
    position: sticky; top: calc(var(--topbar-h) + 16px); border: 1px solid var(--bordo); border-radius: var(--r-md); overflow: hidden; background: var(--cl-sfondo); }
.cl-a-barra { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--cl-primario); color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.cl-a-corpo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
.cl-a-voce { padding: 6px 8px; border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--testo-2); }
.cl-a-voce.e-scelta { color: var(--testo); font-weight: 600; box-shadow: inset 3px 0 0 var(--cl-accento); }
.cl-a-foglio { min-width: 0; border-radius: var(--r-sm); background: var(--superficie); }
.cl-a-testa { padding: 6px 8px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--cl-primario); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.cl-a-riga { padding: 6px 8px; border-bottom: 1px solid var(--bordo); font-size: var(--fs-xs); }
.cl-a-bt { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 8px; }
.cl-a-bt span { padding: 4px 10px; border-radius: var(--r-pill); color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.cl-a-bt .e-p { background: var(--cl-primario); }
.cl-a-bt .e-c { background: var(--cl-conferma); }
.cl-a-bt .e-e { background: var(--cl-errore); }
.cl-a-bt .e-a { background: var(--cl-attenzione); color: var(--ambra-testo); }
@media (max-width: 767.98px) { .cl-griglia { grid-template-columns: minmax(0, 1fr); } }

/* Grandezza del testo: l'«Aa» di ogni scelta e' in px, cosi' mostra la
   grandezza vera anche quando la pagina e' gia' ingrandita */
.cfg-scelta strong .pf-aa { display: inline-block; min-width: 1.7em; margin: 0; font-weight: 700; line-height: 1; color: var(--testo); }
.cfg-scelta strong .pf-aa-1 { font-size: 15px; } .cfg-scelta strong .pf-aa-2 { font-size: 16px; }
.cfg-scelta strong .pf-aa-3 { font-size: 18px; } .cfg-scelta strong .pf-aa-4 { font-size: 20px; }