/* ==========================================================================
   MyVortex — Foglio di stile unico
   --------------------------------------------------------------------------
   TUTTA l'interfaccia sta qui dentro. Un solo <link> in tutte le pagine, emesso
   da vx_css_tag() in includes/ui/tema.php.

   Il tema diurno e notturno si ottiene ridefinendo i TOKEN nella sezione 1: le
   regole che seguono non nominano mai un colore, usano solo var(--vx-*). Per
   questo cambiare tema trasforma l'intera applicazione senza toccare altro.

   ORDINE DELLE SEZIONI — conta, chi viene dopo vince a parita di specificita:
     1  token (giorno e notte)          9  moduli
     2  base: campi, tabelle, pulsanti 10  pagine con stile proprio
     3  tipografia                     11  eccezioni di tema
     4  guscio di pagina               12  responsive (ultimo: vince su tutto)
     5  testata   6 menu laterale
     7  pulsanti  8 kit UI

   Le regole della sezione 10 sono agganciate alla classe della pagina sul
   <body> tramite :where(), che NON aggiunge specificita: ogni pagina conserva
   la forza che aveva quando il CSS stava nel suo <style>.

   NON si scrivono valori esadecimali qui dentro fuori dalla sezione 1
   (Regole 5.14 e 5.18). Le uniche eccezioni sono marcate nel punto in cui
   stanno: i colori dei marchi Google e Microsoft, e il riquadro bianco delle
   firme.
   ========================================================================== */


/* ==========================================================================
   TOKEN E BASE — colori, forma, campi di form
   (era includes/ui/vx-base.css)
   ========================================================================== */
/* ==========================================================================
   MyVortex — Layer di base condiviso
   --------------------------------------------------------------------------
   Questo foglio viene caricato PRIMA di ogni altro CSS (vedi includes/ui/tema.php)
   e ha due compiti:

     1. definire i token di colore, spaziatura e ombra per il tema diurno e
        notturno, così tutti i moduli parlano la stessa lingua;
     2. dare uno stile decente a QUALSIASI campo di form, anche quando la pagina
        non usa .vx-field / .vx-input / body.eventi-page.

   REGOLA D'ORO: quasi tutte le regole qui dentro sono scritte dentro :where(),
   che ha specificita ZERO. Significa che qualunque regola gia esistente nei CSS
   dei moduli vince sempre su questa. Il foglio riempie i buchi, non sovrascrive
   il lavoro fatto. Le uniche eccezioni (marcate con "OVERRIDE") sono gli stati
   di focus e i colori dei placeholder, dove la coerenza vale piu della liberta
   del singolo modulo.
   ========================================================================== */

/* ==========================================================================
   1. TOKEN — TEMA DIURNO
   Contrasti verificati su fondo bianco (#ffffff) secondo WCAG 2.1 AA.
   ========================================================================== */
:root {
    /* Superfici */
    --vx-bg: #f4f6fa;
    --vx-surface: #ffffff;
    --vx-surface2: #f7f9fc;
    --vx-surface3: #eef1f7;
    --vx-surface-hover: #eaeef6;

    /* Bordi */
    --vx-border: #e2e7f0;
    --vx-border-strong: #cbd3e1;

    /* Testo */
    --vx-text: #1e2634;          /* 14.9:1 su bianco */
    --vx-text-soft: #3f4a5c;     /*  9.3:1 su bianco */
    --vx-muted: #626c7e;         /*  5.6:1 su bianco — AA per testo normale */
    --vx-faint: #8a93a3;         /*  3.2:1 — solo decorativo o testo grande */

    /* Identita Vortex: l'indaco resta, ma diviso in due ruoli.
       --vx-accent  = riempimenti, gradienti, sfondi (non deve reggere testo)
       --vx-accent-strong = testo, link, icone su fondo chiaro (5.6:1 su bianco) */
    --vx-accent: #667eea;
    --vx-accent-strong: #4a55c4;
    --vx-accent-hover: #3c46ad;
    --vx-accent-soft: #eef0fd;
    --vx-accent2: #764ba2;
    --vx-accent2-soft: #f1ecfa;

    /* Il gradiente e il marchio della testata: un solo posto per cambiarlo. */
    --vx-gradient: linear-gradient(135deg, var(--vx-accent) 0%, var(--vx-accent2) 100%);

    /* Superficie in evidenza (card numerica principale, giorno corrente):
       fondo scuro con testo chiaro in entrambi i temi. */
    --vx-featured-bg: #111827;
    --vx-featured-text: #ffffff;
    /* La superficie in evidenza e' scura in entrambi i temi, quindi lo
       scostamento positivo e negativo ha bisogno di verdi e rossi chiari:
       --vx-success e --vx-danger sono pensati per fondo chiaro. */
    --vx-featured-ok: #86efac;
    --vx-featured-ko: #fca5a5;

    /* Menu laterale: **segue il tema**, chiaro di giorno e scuro di notte.
       Fino alla 1.64.0 restava scuro sempre (scelta di R6-novies): in tema
       diurno era una colonna nera accanto a una pagina chiara, e stonava.
       Mantiene token propri perche' ha contrasti suoi, non perche' e' fisso. */
    --vx-nav-bg: #f4f6fb;
    --vx-nav-text: #414b5f;
    --vx-nav-text-strong: #1f2733;
    --vx-nav-muted: #6b7688;
    --vx-nav-icon: #5b6ad4;
    --vx-nav-active: var(--vx-accent);
    --vx-nav-hover: rgba(102, 126, 234, .12);
    --vx-nav-sep: rgba(15, 23, 42, .08);
    /* Velatura in cima al pannello e fondi delle sezioni: cambiano di segno
       fra i due temi, quindi sono token e non valori scritti nelle regole. */
    --vx-nav-velo: rgba(15, 23, 42, .05);
    --vx-nav-sezione-attiva: rgba(15, 23, 42, .045);
    --vx-nav-titolo-hover: rgba(15, 23, 42, .06);

    /* Stati semantici: coppia "forte" (testo/bordo) + "tenue" (sfondo) */
    --vx-success: #1b7a3d;
    --vx-success-soft: #e8f6ed;
    --vx-danger: #c02626;
    --vx-danger-soft: #fdeceb;
    --vx-warning: #a35a00;
    --vx-warning-soft: #fff5e3;
    --vx-info: #1565a8;
    --vx-info-soft: #e9f3fb;

    /* Due token diversi per il testo sopra un fondo colorato. Non sono
       intercambiabili: sbagliarli e' il modo piu' rapido di rendere illeggibile
       un pulsante in tema notturno.

       --vx-on-accent  sta sopra superfici SCURE IN ENTRAMBI I TEMI: il gradiente
                       della testata, il menu laterale, la card in evidenza.
                       Resta bianco sempre.
       --vx-on-fill    sta sopra un riempimento PIENO di un token che cambia col
                       tema (--vx-accent, --vx-success, --vx-danger, --vx-warning,
                       --vx-muted). Di notte quei token si schiariscono, quindi
                       il testo sopra deve scurirsi. */
    --vx-on-accent: #ffffff;
    --vx-on-fill: #ffffff;

    /* Pastiglia chiara sulla testata (Logout, Torna indietro). Sta sopra il
       gradiente in entrambi i temi, quindi NON viene ridefinita per il notturno:
       se usasse --vx-surface / --vx-accent-hover, di notte diventerebbe testo
       chiaro su fondo chiaro. */
    --vx-header-pill-bg: #ffffff;
    --vx-header-pill-bg-hover: #eef0fd;
    --vx-header-pill-text: #3c46ad;

    /* Categorie del calendario e dei badge. Non sono stati semantici: sono
       identita di origine (una collaborazione non e' "un successo"). Ognuna ha
       il colore pieno per punto e bordo, il fondo tenue e il testo su quel fondo.
       Prima di R6-quaterdecies vivevano come 21 esadecimali sparsi e il tema
       notturno li scuriva con un filter: brightness(), che sbiadiva tutto. */
    --vx-cat-collaborazione: #667eea;
    --vx-cat-collaborazione-soft: #f0f2fe;
    --vx-cat-collaborazione-text: #34405a;
    --vx-cat-evento: #38a169;
    --vx-cat-evento-soft: #eaf7ef;
    --vx-cat-evento-text: #22543d;
    --vx-cat-staffing: #b7791f;
    --vx-cat-staffing-soft: #fdf5e4;
    --vx-cat-staffing-text: #5f4611;
    --vx-cat-aruba: #c05621;
    --vx-cat-aruba-soft: #fdf0e7;
    --vx-cat-aruba-text: #6b3410;
    --vx-cat-interno: #4a5568;
    --vx-cat-interno-soft: #f0f2f5;
    --vx-cat-interno-text: #2d3748;
    --vx-cat-personale: #7c3aed;
    --vx-cat-personale-soft: #f4ecfe;
    --vx-cat-personale-text: #4a1d96;
    --vx-cat-scadenza: #c53030;
    --vx-cat-scadenza-soft: #fdeeee;
    --vx-cat-scadenza-text: #742020;

    /* Forma */
    --vx-radius: 12px;
    --vx-radius-sm: 8px;
    --vx-radius-lg: 16px;
    --vx-radius-pill: 999px;

    /* Ombre a due strati: contorno netto + diffusione morbida */
    --vx-shadow-xs: 0 1px 2px rgba(20, 28, 45, .06);
    --vx-shadow: 0 1px 2px rgba(20, 28, 45, .05), 0 4px 14px rgba(20, 28, 45, .07);
    --vx-shadow-lg: 0 2px 4px rgba(20, 28, 45, .06), 0 12px 32px rgba(20, 28, 45, .12);

    /* Campi di form: un solo posto per cambiare l'aria dentro gli input */
    --vx-field-bg: #ffffff;
    --vx-field-bg-disabled: #f1f3f8;
    --vx-field-border: #cfd6e4;
    --vx-field-text: var(--vx-text);
    --vx-field-placeholder: #737d8f;
    --vx-field-radius: 8px;
    --vx-field-pad-y: 10px;
    --vx-field-pad-x: 12px;
    --vx-field-min-h: 42px;

    /* Anello di focus */
    --vx-focus: var(--vx-accent);
    --vx-focus-ring: 0 0 0 3px rgba(102, 126, 234, .26);
}

/* ==========================================================================
   2. TOKEN — TEMA NOTTURNO
   Ridefiniti qui; vx-tema.css continua a fare le sue sovrascritture di
   componente e resta compatibile perche i nomi dei token non cambiano.
   ========================================================================== */
html.vx-theme-night {
    --vx-bg: #0f141c;
    --vx-surface: #1a2230;
    --vx-surface2: #212b3a;
    --vx-surface3: #273243;
    --vx-surface-hover: #2a3448;

    --vx-border: #2e3a4d;
    --vx-border-strong: #435269;

    --vx-text: #e8edf5;
    --vx-text-soft: #cfd8e6;
    --vx-muted: #9aa6b8;
    --vx-faint: #78839a;

    --vx-accent: #8b9cff;
    --vx-accent-strong: #a6b3ff;
    --vx-accent-hover: #bfc8ff;
    --vx-accent-soft: #232c4a;
    --vx-accent2: #c4b5fd;
    --vx-accent2-soft: #2b2545;

    /* Il gradiente resta quello del marchio anche di notte: la testata e'
       identita, non superficie. */
    --vx-gradient: linear-gradient(135deg, #5b6ad4 0%, #64408f 100%);

    /* Menu laterale di notte: sono i valori che prima valevano sempre. */
    --vx-nav-bg: #111827;
    --vx-nav-text: #d1d5db;
    --vx-nav-text-strong: #e5e7eb;
    --vx-nav-muted: #9ca3af;
    --vx-nav-icon: #a5b4fc;
    --vx-nav-hover: rgba(102, 126, 234, .18);
    --vx-nav-sep: rgba(255, 255, 255, .06);
    --vx-nav-velo: rgba(255, 255, 255, .045);
    --vx-nav-sezione-attiva: rgba(255, 255, 255, .035);
    --vx-nav-titolo-hover: rgba(255, 255, 255, .06);

    --vx-featured-bg: #0b111c;
    --vx-featured-text: #ffffff;

    /* Di notte i riempimenti semantici sono chiari: il testo sopra si scurisce.
       --vx-on-accent resta bianco, perche' il gradiente e il menu sono scuri
       anche di notte. */
    --vx-on-fill: #0f141c;

    --vx-success: #5cd68b;
    --vx-success-soft: #14301f;
    --vx-danger: #f98a8a;
    --vx-danger-soft: #331717;
    --vx-warning: #f5be3f;
    --vx-warning-soft: #322611;
    --vx-info: #7cc0f0;
    --vx-info-soft: #12283a;

    /* Categorie: la tinta resta riconoscibile, il fondo diventa una velatura
       scura e il testo si schiarisce. Nessun filter, nessuno sbiadimento. */
    --vx-cat-collaborazione: #8b9cff;
    --vx-cat-collaborazione-soft: #232c4a;
    --vx-cat-collaborazione-text: #c7d2fe;
    --vx-cat-evento: #5cd68b;
    --vx-cat-evento-soft: #14301f;
    --vx-cat-evento-text: #a7e8c0;
    --vx-cat-staffing: #f5be3f;
    --vx-cat-staffing-soft: #322611;
    --vx-cat-staffing-text: #f8d98a;
    --vx-cat-aruba: #f59e5b;
    --vx-cat-aruba-soft: #331f10;
    --vx-cat-aruba-text: #fbc99a;
    --vx-cat-interno: #9aa6b8;
    --vx-cat-interno-soft: #232b38;
    --vx-cat-interno-text: #cfd8e6;
    --vx-cat-personale: #c4b5fd;
    --vx-cat-personale-soft: #2b2545;
    --vx-cat-personale-text: #ddd6fe;
    --vx-cat-scadenza: #f98a8a;
    --vx-cat-scadenza-soft: #331717;
    --vx-cat-scadenza-text: #fbb3b3;

    --vx-shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
    --vx-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .32);
    --vx-shadow-lg: 0 2px 6px rgba(0, 0, 0, .34), 0 16px 40px rgba(0, 0, 0, .45);

    --vx-field-bg: #222c3c;
    --vx-field-bg-disabled: #1b2330;
    --vx-field-border: #3a4761;
    --vx-field-placeholder: #7b8699;

    --vx-focus: #8b9cff;
    --vx-focus-ring: 0 0 0 3px rgba(139, 156, 255, .32);
}

/* ==========================================================================
   3. CAMPI DI FORM — il cuore di questo foglio
   Prima di questa regola, un <input> senza classe ereditava lo stile del
   browser: testo attaccato al bordo, angoli vivi, altezze diverse fra input e
   select. Ora ogni campo ha la stessa aria, ovunque si trovi.
   Tutto dentro :where(): specificita zero, non tocca chi ha gia il suo stile.
   ========================================================================== */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
    select,
    textarea
) {
    box-sizing: border-box;
    min-height: var(--vx-field-min-h);
    padding: var(--vx-field-pad-y) var(--vx-field-pad-x);
    border: 1px solid var(--vx-field-border);
    border-radius: var(--vx-field-radius);
    background-color: var(--vx-field-bg);
    color: var(--vx-field-text);
    font: inherit;
    line-height: 1.35;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Il textarea non deve avere altezza minima da input a riga singola. */
:where(textarea) {
    min-height: 96px;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}

/* Le select native su Windows restano compatte: un filo d'aria in piu a destra
   per non far toccare la freccia al testo. */
:where(select) {
    padding-right: 34px;
    cursor: pointer;
}

/* Campi compatti dentro le righe di tabella: li lasciamo respirare meno,
   altrimenti le tabelle di dettaglio diventano altissime. */
:where(td, th) :where(input, select, textarea) {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* --- OVERRIDE: placeholder e stato disabilitato ---------------------------
   Qui usiamo specificita normale, perche un placeholder grigio-su-grigio o un
   campo disabilitato indistinguibile sono difetti che vogliamo correggere
   anche dove il modulo ha gia scritto le sue regole. */
input::placeholder,
textarea::placeholder {
    color: var(--vx-field-placeholder);
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    background-color: var(--vx-field-bg-disabled);
    color: var(--vx-muted);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--vx-muted); /* Safari/iOS schiarisce i disabled */
    opacity: 1;
}

input[readonly],
textarea[readonly] {
    cursor: default;
}

/* --- OVERRIDE: un solo anello di focus in tutta l'app --------------------- */
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--vx-focus);
    box-shadow: var(--vx-focus-ring);
}

/* Campo in errore: basta aggiungere aria-invalid="true" o la classe .is-invalid. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.is-invalid {
    border-color: var(--vx-danger);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192, 38, 38, .22);
}

/* --- Caselle e interruttori ----------------------------------------------
   accent-color sostituisce il blu di sistema con l'indaco Vortex e funziona
   anche in tema notturno senza disegnare nulla a mano. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--vx-accent);
    width: 17px;
    height: 17px;
    cursor: pointer;
}

input[type="range"] { accent-color: var(--vx-accent); }

/* --- Campo file: il bottone di sistema e sempre il pezzo piu brutto ------- */
:where(input[type="file"]) {
    padding: 7px 10px;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 1px solid var(--vx-border-strong);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface2);
    color: var(--vx-text-soft);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--vx-surface-hover);
    border-color: var(--vx-accent);
    color: var(--vx-accent-strong);
}

/* --- Date, ore e ricerche in tema notturno --------------------------------
   Le icone native (calendario, orologio, croce di reset) sono nere: sul fondo
   scuro sparivano. Le invertiamo. */
html.vx-theme-night input[type="date"]::-webkit-calendar-picker-indicator,
html.vx-theme-night input[type="time"]::-webkit-calendar-picker-indicator,
html.vx-theme-night input[type="month"]::-webkit-calendar-picker-indicator,
html.vx-theme-night input[type="week"]::-webkit-calendar-picker-indicator,
html.vx-theme-night input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.vx-theme-night input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1) brightness(1.6);
    opacity: .75;
    cursor: pointer;
}

/* Il riempimento automatico di Chrome forza un fondo giallo/azzurro che
   spaccava il tema. Lo riportiamo ai nostri colori. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--vx-field-text);
    -webkit-box-shadow: 0 0 0 1000px var(--vx-field-bg) inset;
    caret-color: var(--vx-field-text);
    transition: background-color 9999s ease-out;
}

/* Etichette: peso e colore uniformi anche fuori da .vx-field. */
:where(label) {
    color: var(--vx-text-soft);
    font-weight: 600;
}

:where(fieldset) {
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    padding: 14px 16px;
    margin: 0 0 16px;
}

:where(legend) {
    padding: 0 6px;
    color: var(--vx-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ==========================================================================
   4. PULSANTI NATIVI SENZA CLASSE
   I <button> che non hanno ne .btn ne .vx-btn restavano grigi di sistema.
   ========================================================================== */
:where(button, input[type="submit"], input[type="button"], input[type="reset"]):not([class]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--vx-border-strong);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface);
    color: var(--vx-text-soft);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

:where(button, input[type="submit"], input[type="button"], input[type="reset"]):not([class]):hover {
    background: var(--vx-surface-hover);
    border-color: var(--vx-accent);
    color: var(--vx-accent-strong);
}

/* OVERRIDE: anello di focus visibile anche su link e pulsanti gia stilizzati.
   Si attiva solo con la tastiera, quindi non disturba l'uso col mouse. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vx-focus);
    outline-offset: 2px;
    border-radius: var(--vx-radius-sm);
}

/* ==========================================================================
   5. TABELLE
   Righe alternate leggerissime e passaggio del mouse: rendono leggibili gli
   elenchi lunghi senza aggiungere bordi.
   ========================================================================== */
:where(table) {
    border-collapse: collapse;
    width: 100%;
}

:where(th) {
    color: var(--vx-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vx-border);
    background: var(--vx-surface2);
}

:where(td) {
    padding: 11px 12px;
    border-bottom: 1px solid var(--vx-border);
    color: var(--vx-text);
    vertical-align: middle;
}

:where(tbody tr:last-child td) { border-bottom: none; }

:where(tbody tr) { transition: background .12s ease; }
:where(tbody tr:hover) { background: var(--vx-surface2); }

/* Numeri incolonnati: stessa larghezza per ogni cifra. */
:where(td, th).num,
:where(td, th)[data-num] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. DETTAGLI DI CONTORNO
   ========================================================================== */
:where(hr) {
    border: none;
    border-top: 1px solid var(--vx-border);
    margin: 20px 0;
}

:where(code, kbd, samp, pre) {
    background: var(--vx-surface3);
    color: var(--vx-text);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-size: .88em;
}

:where(code, kbd, samp) { padding: 2px 6px; }
:where(pre) { padding: 12px 14px; overflow-x: auto; }

::selection {
    background: var(--vx-accent);
    color: var(--vx-on-fill);
}

/* Barre di scorrimento in tinta col tema (Chrome/Edge + Firefox). */
* {
    scrollbar-color: var(--vx-border-strong) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--vx-border-strong);
    border: 3px solid transparent;
    border-radius: var(--vx-radius-pill);
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--vx-faint); background-clip: content-box; }

/* Chi ha disattivato le animazioni di sistema non le subisce. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   7. SCHERMI PICCOLI
   Su iOS un campo con font sotto i 16px fa zoomare la pagina a ogni tocco.
   ========================================================================== */
@media (max-width: 768px) {
    /* Specificita di elemento (non :where): deve battere la regola
       `input, select, textarea { font-size: 1rem }` di typography.css,
       altrimenti su iPhone la pagina zooma a ogni tocco su un campo. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }

    :where(input, select, textarea) {
        min-height: 44px;   /* bersaglio tocco consigliato */
    }

    :where(td, th) :where(input, select, textarea) {
        min-height: 38px;
    }
}


/* ==========================================================================
   TIPOGRAFIA
   (era includes/typography.css)
   ========================================================================== */
/**
 * Tipografia condivisa MyVortex (compatta su desktop, invariata su mobile)
 */
:root {
  --mv-header-height: 84px;
  --mv-content-gap: 16px;
  --mv-content-gap-x: 20px;
}

/*
 * Taglia di riferimento dell'intera interfaccia.
 *
 * Tutto il foglio e' scritto in `rem`, quindi questo numero decide quanto e'
 * grande MyVortex. Stava a 13px: su un gestionale che si usa tutta la giornata
 * era faticoso, e ritoccare le singole classi era un rattoppo che lasciava
 * fuori le decine di regole gia' scritte. Alzando la radice cresce tutto in
 * proporzione, testo e spaziature in rem, senza toccare altro.
 *
 * Chi vuole rimpicciolire o ingrandire l'interfaccia cambia SOLO questo valore.
 */
html {
  font-size: 15px;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

/* Header */
.header {
  padding: 10px 22px 10px 0;
}

.header h1,
.header h2 {
  font-size: 1.65rem;
  font-weight: 700;
}

.header-logo {
  height: 62px;
  max-height: 62px;
  max-width: 220px;
}

.user-info > div > div:first-child {
  font-size: 0.9375rem;
}

.user-info small {
  font-size: 0.78rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.78rem;
}

.logout-btn {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
}

.header-menu-btn {
  width: 40px;
  height: 40px;
}

.header-menu-btn span {
  width: 20px;
}

/* Sidebar */
.vg-menu-section-title {
  font-size: 0.78rem;
  padding: 14px 18px;
  letter-spacing: 0.04em;
}

.vg-menu-item {
  font-size: 0.9375rem;
  padding: 9px 13px;
  margin-bottom: 5px;
}

.vg-menu-item i {
  width: 19px;
  font-size: 0.95rem;
}

/* Titoli pagina */
.page-title h1,
.vx-page-title,
.content-header h1,
.page-header h1 {
  font-size: 1.5rem !important;
}

.welcome-card h2,
.card-header h2,
.section-title {
  font-size: 1.25rem;
}

h2,
.vx-h2 {
  font-size: 1.15rem;
}

h3,
.quick-actions h3,
.card h3 {
  font-size: 1.05rem;
}

/* Tabelle e form */
.table th,
.table td,
.vx-table th,
.vx-table td {
  font-size: 0.9375rem;
}

.form-group label,
label {
  font-size: 0.9375rem;
}

input,
select,
textarea {
  font-size: 1rem;
}

/* Bottoni */
.btn,
button.btn,
a.btn,
.vx-btn {
  font-size: 0.9375rem;
  min-height: 38px;
  padding: 8px 16px;
}

/* Login */
.login-header h1 {
  font-size: 1.65rem !important;
}

.login-brand-text p {
  font-size: 0.875rem !important;
}

/* Spazio sotto header (l'header sticky occupa già il suo spazio nel layout) */
.main-content,
.eventi-main {
  margin-top: 0 !important;
}

.main-content {
  padding-top: var(--mv-content-gap) !important;
  padding-left: var(--mv-content-gap-x) !important;
  padding-right: var(--mv-content-gap-x) !important;
}

.eventi-main {
  padding-top: var(--mv-content-gap) !important;
}

body > .container {
  margin-top: 0 !important;
  padding-top: var(--mv-content-gap) !important;
}

.vg-sidebar {
  top: var(--mv-header-height) !important;
  height: calc(100vh - var(--mv-header-height)) !important;
  padding-top: 12px !important;
}

@media (max-width: 768px) {
  :root {
    --mv-header-height: 56px;
    --mv-content-gap-x: 16px;
  }

  .header-logo {
    height: 36px;
    max-width: 110px;
  }

  .header h1,
  .header h2 {
    font-size: 1.05rem;
  }

  .page-title h1,
  .vx-page-title {
    font-size: 1.25rem !important;
  }
}

/* ==========================================================================
   GUSCIO DI PAGINA — body.eventi-page, contenitori, tabelle vx
   (era spaziweb/admin.css)
   ========================================================================== */
/* Gestione eventi — tema MyVortex
   I token NON si dichiarano qui: vivono in includes/ui/vx-base.css, che viene
   caricato prima di questo foglio. Fino a R6-quaterdecies questo file aveva un
   proprio :root che, arrivando dopo, sovrascriveva 16 token del tema diurno con
   valori diversi da quelli documentati: fra questi un giallo di avviso che su
   bianco arrivava solo a 2.9:1, sotto la soglia della Regola 5.14. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.eventi-page {
  margin: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vx-text);
  background: var(--vx-bg);
}

/* Collegamenti di testo. Le esclusioni sono gli <a> che NON sono testo su fondo
   di pagina: pulsanti, testata, e le pastiglie degli eventi di calendario, che
   hanno un colore di categoria proprio. Senza :not(.vx-cal__ev) questa regola,
   piu' specifica, sovrascriveva il colore di categoria e in tema notturno il
   testo scendeva a 1.8:1. */
body.eventi-page a:not(.vx-btn):not(.btn):not(.logout-btn):not(.header-title-link):not(.vx-cal__ev):not(.vg-menu-item) {
  color: var(--vx-accent-strong);
  text-decoration: none;
}

body.eventi-page a:not(.vx-btn):not(.btn):not(.logout-btn):not(.header-title-link):not(.vx-cal__ev):not(.vg-menu-item):hover {
  text-decoration: underline;
}

/* Header condiviso: stesso aspetto del resto di MyVortex */
body.eventi-page .header {
  color: var(--vx-on-accent);
}

body.eventi-page .header-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

body.eventi-page .header-title-link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  color: var(--vx-on-accent);
  text-decoration: none;
}

body.eventi-page .header-title-link h1 {
  color: var(--vx-on-accent);
  text-decoration: none;
}

body.eventi-page .header-title-link:hover {
  text-decoration: none;
  opacity: 0.96;
}

body.eventi-page .header h1 {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--vx-on-accent);
}

/* Niente menu hamburger flottante se c'è quello nell'header */
body.eventi-page .vg-menu-toggle {
  display: none !important;
}

.eventi-main {
  margin-top: 0;
  padding: 16px 20px 32px;
}

.eventi-container {
  max-width: 1140px;
  margin: 0 auto;
}

.vx-page-title {
  margin: 0 0 20px;
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--vx-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.vx-backlink {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--vx-muted);
}

.vx-backlink:hover {
  color: var(--vx-accent);
}

.vx-card {
  background: var(--vx-surface);
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius);
  box-shadow: var(--vx-shadow);
}

.vx-dash-stats .vx-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vx-dash-stats .vx-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vx-shadow);
}

.vx-dash-stats .vx-card > div:last-child {
  color: var(--vx-accent);
  font-weight: 700;
}

.vx-alert {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 16px;
  border-left: 4px solid transparent;
}

.vx-alert--error {
  color: var(--vx-danger);
  background: var(--vx-danger-soft);
  border-left-color: var(--vx-danger);
}

.vx-alert--ok {
  color: var(--vx-success);
  background: var(--vx-success-soft);
  border-left-color: var(--vx-success);
}

.vx-alert--info {
  color: var(--vx-info);
  background: var(--vx-info-soft);
  border-left-color: var(--vx-info);
}

.vx-btn,
body.eventi-page a.vx-btn,
body.eventi-page button.vx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border-radius: 10px;
  border: 2px solid var(--vx-faint);
  background: var(--vx-surface);
  color: var(--vx-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--vx-shadow-xs);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  -webkit-font-smoothing: antialiased;
}

.vx-btn:hover,
body.eventi-page a.vx-btn:hover,
body.eventi-page button.vx-btn:hover {
  text-decoration: none;
  background: var(--vx-surface2);
  border-color: var(--vx-muted);
  color: var(--vx-text);
  box-shadow: var(--vx-shadow);
}

.vx-btn:active,
body.eventi-page a.vx-btn:active,
body.eventi-page button.vx-btn:active {
  transform: translateY(1px);
}

.vx-btn:focus-visible,
body.eventi-page a.vx-btn:focus-visible,
body.eventi-page button.vx-btn:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

.vx-btn--primary,
body.eventi-page a.vx-btn--primary,
body.eventi-page button.vx-btn--primary {
  background: var(--vx-gradient);
  border-color: var(--vx-accent-hover);
  color: var(--vx-on-accent);
  box-shadow: var(--vx-shadow);
}

.vx-btn--primary:hover,
body.eventi-page a.vx-btn--primary:hover,
body.eventi-page button.vx-btn--primary:hover {
  background: linear-gradient(135deg, var(--vx-accent-hover) 0%, var(--vx-accent2) 100%);
  border-color: var(--vx-accent-hover);
  color: var(--vx-on-accent);
  box-shadow: var(--vx-shadow-lg);
}

.vx-btn--secondary,
body.eventi-page a.vx-btn--secondary,
body.eventi-page button.vx-btn--secondary {
  background: var(--vx-accent-soft);
  border-color: var(--vx-accent);
  color: var(--vx-accent-strong);
}

.vx-btn--secondary:hover,
body.eventi-page a.vx-btn--secondary:hover,
body.eventi-page button.vx-btn--secondary:hover {
  background: var(--vx-accent-strong);
  border-color: var(--vx-accent-strong);
  color: var(--vx-on-fill);
}

.vx-btn--success,
body.eventi-page a.vx-btn--success,
body.eventi-page button.vx-btn--success {
  background: var(--vx-success);
  border-color: var(--vx-success);
  color: var(--vx-on-fill);
  box-shadow: var(--vx-shadow);
}

.vx-btn--success:hover,
body.eventi-page a.vx-btn--success:hover,
body.eventi-page button.vx-btn--success:hover {
  background: var(--vx-success);
  border-color: var(--vx-success);
  color: var(--vx-on-fill);
}

.vx-btn--danger,
body.eventi-page a.vx-btn--danger,
body.eventi-page button.vx-btn--danger {
  background: var(--vx-danger-soft);
  border-color: var(--vx-danger);
  color: var(--vx-danger);
  box-shadow: var(--vx-shadow-xs);
}

.vx-btn--danger:hover,
body.eventi-page a.vx-btn--danger:hover,
body.eventi-page button.vx-btn--danger:hover {
  background: var(--vx-danger);
  border-color: var(--vx-danger);
  color: var(--vx-on-fill);
}

.vx-btn--sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.vx-btn[disabled],
body.eventi-page button.vx-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.vx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.vx-filters {
  margin: 0 0 18px;
  padding: 16px;
}

.vx-filters__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.vx-filters__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vx-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vx-filters__count {
  font-size: 0.82rem;
  color: var(--vx-muted);
}

.vx-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 12px;
}

.vx-filters-field {
  min-width: 0;
}

.vx-filters-field--wide {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .vx-filters-field--wide {
    grid-column: span 2;
  }
}

.vx-filters-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vx-muted);
}

/* La pulsantiera è l'ultimo figlio di `.vx-filters-grid`, quindi finiva in una
   cella larga come un campo (minimo 170px): «Applica» e «Azzera» non ci
   stavano affiancati e andavano a capo uno sotto l'altro, in tutte le pagine
   con i filtri. Occupando la riga intera stanno in fila, e i pulsanti si
   allineano ai campi invece di galleggiare in mezzo a loro. */
.vx-filters-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.vx-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border-radius: var(--vx-radius);
  border: 1px solid var(--vx-border);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow);
}

table.vx-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.vx-table th,
table.vx-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--vx-border);
  vertical-align: top;
}

table.vx-table th {
  background: var(--vx-surface2);
  color: var(--vx-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.vx-table tr:last-child td {
  border-bottom: none;
}

table.vx-table tbody tr:hover {
  background: var(--vx-surface2);
}

@media (max-width: 768px) {
  .vx-table-wrap,
  .vx-table-wrap--stack {
    overflow-x: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  table.vx-table,
  .vx-table--stack {
    min-width: 0 !important;
    display: block;
    width: 100%;
  }

  table.vx-table thead,
  .vx-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.vx-table tbody,
  .vx-table--stack tbody {
    display: block;
    width: 100%;
  }

  table.vx-table tbody tr,
  .vx-table--stack tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 14px;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-shadow);
  }

  table.vx-table tbody td,
  .vx-table--stack tbody td {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    gap: 8px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--vx-border);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  table.vx-table tbody td:last-child,
  .vx-table--stack tbody td:last-child {
    border-bottom: none;
  }

  table.vx-table tbody td::before,
  .vx-table--stack tbody td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vx-muted);
  }

  table.vx-table tbody td:not([data-label])::before,
  table.vx-table tbody td[colspan]::before,
  table.vx-table .vx-table__vuoto::before {
    content: none;
  }

  table.vx-table .vx-table__vuoto,
  table.vx-table td[colspan] {
    display: block;
    grid-template-columns: 1fr;
    text-align: left;
  }

  .vx-righe {
    display: block;
    width: 100%;
    min-width: 0;
  }
}

.vx-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 720px) {
  .vx-form-grid {
    grid-template-columns: 1fr;
  }
}

.vx-form-grid--hub-footer {
  grid-template-columns: 28px 1fr 1fr 1fr;
}

@media (max-width: 900px) {
  .vx-form-grid--hub-footer {
    grid-template-columns: 1fr;
  }
}

/* Elenco completo dei tipi testuali: prima mancavano email, tel, number, search,
   time e datetime-local, che restavano con lo stile grezzo del browser. */
body.eventi-page input[type="text"],
body.eventi-page input[type="password"],
body.eventi-page input[type="url"],
body.eventi-page input[type="email"],
body.eventi-page input[type="tel"],
body.eventi-page input[type="number"],
body.eventi-page input[type="search"],
body.eventi-page input[type="date"],
body.eventi-page input[type="time"],
body.eventi-page input[type="month"],
body.eventi-page input[type="week"],
body.eventi-page input[type="datetime-local"],
body.eventi-page input[type="file"],
body.eventi-page input:not([type]),
body.eventi-page select,
body.eventi-page textarea {
  width: 100%;
  max-width: 100%;
  /* L'altezza minima la decide vx-base.css, che distingue input, textarea e
     campi dentro le righe di tabella. */
  padding: var(--vx-field-pad-y) var(--vx-field-pad-x);
  border-radius: var(--vx-field-radius);
  border: 1px solid var(--vx-field-border);
  background: var(--vx-field-bg);
  color: var(--vx-field-text);
  font: inherit;
}

body.eventi-page input:focus,
body.eventi-page select:focus,
body.eventi-page textarea:focus {
  outline: none;
  border-color: var(--vx-focus);
  box-shadow: var(--vx-focus-ring);
}

.vx-form-login .vx-input,
.vx-admin-field .vx-input,
.users-inline-form .vx-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--vx-border);
  background: var(--vx-surface);
  font: inherit;
}

.vx-muted {
  color: var(--vx-muted);
  font-size: 0.88rem;
}

.vx-code {
  font-size: 0.82em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--vx-surface3);
  border: 1px solid var(--vx-border);
  color: var(--vx-text-soft);
}

.vx-scroll-x {
  overflow-x: auto;
  margin: 0 0 12px;
}

.hub-spec-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.8rem;
  border: 1px solid var(--vx-border);
  background: var(--vx-surface);
}

.hub-spec-table th,
.hub-spec-table td {
  padding: 8px;
  border: 1px solid var(--vx-border);
}

.hub-spec-table th {
  background: var(--vx-surface2);
}

.vx-panel {
  margin: 14px 0;
  padding: 14px;
  background: var(--vx-surface2);
  border: 1px solid var(--vx-border);
  border-left: 4px solid var(--vx-accent);
  border-radius: var(--vx-radius);
}

.vx-hr {
  border: none;
  border-top: 1px solid var(--vx-border);
  margin: 18px 0;
}

h2.vx-h2,
h3.vx-h3 {
  margin: 22px 0 10px;
  font-size: 1.1rem;
  color: var(--vx-text);
}

.badge-on {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--vx-success-soft);
  color: var(--vx-success);
}

.badge-off {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--vx-danger-soft);
  color: var(--vx-danger);
}


/* ==========================================================================
   TESTATA
   (era includes/ui/vx-header.css)
   ========================================================================== */
/* ==========================================================================
   MyVortex — Testata dell'applicazione
   --------------------------------------------------------------------------
   Estratto da includes/layout_header.php con R6-quaterdecies. Prima viveva in
   un blocco <style> dentro il PHP: non era memorizzabile in cache dal browser e
   nessuno lo trovava cercando fra i fogli.

   La testata e' una superficie di identita, non di contenuto: il gradiente e il
   bianco sopra restano gli stessi nei due temi. Per questo usa --vx-gradient e
   --vx-on-accent, non --vx-surface / --vx-text.
   ========================================================================== */

.header {
    background: var(--vx-gradient);
    color: var(--vx-on-accent);
    padding: 10px 22px 10px 0;
    box-shadow: var(--vx-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 24px 0 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Bersaglio di tocco 44px: Regola 5.17. */
.header-menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.header-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--vx-on-accent);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-menu-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.header-menu-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-menu-btn.open span:nth-child(2) {
    opacity: 0;
}

.header-menu-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header-brand-col {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.header-title-link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    overflow: hidden;
}

.header-logo {
    height: 62px;
    max-height: 62px;
    width: auto;
    max-width: 220px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    object-position: left center;
    margin: 0;
    padding: 0;
}

.header h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--vx-on-accent);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.78rem;
}

/* Il pulsante di uscita sta sul gradiente: fondo chiaro fisso e testo di
   accento. Non usa --vx-surface, che in tema notturno lo farebbe sparire. */
.logout-btn {
    background: var(--vx-header-pill-bg);
    color: var(--vx-header-pill-text);
    padding: 8px 16px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--vx-shadow);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.logout-btn:hover {
    background: var(--vx-header-pill-bg-hover);
    color: var(--vx-header-pill-text);
    box-shadow: var(--vx-shadow-lg);
    text-decoration: none;
}

.logout-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .header {
        padding: 0;
    }

    .header-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        min-height: 56px;
    }

    .header-left {
        flex: 1 1 auto;
        justify-content: flex-start;
        min-width: 0;
        overflow: hidden;
    }

    .header-logo {
        height: 36px;
        max-width: 110px;
    }

    .header h1 {
        font-size: 1.05rem;
    }

    .user-info {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
    }
}


/* ==========================================================================
   MENU LATERALE
   (era includes/ui/vx-sidebar.css)
   ========================================================================== */
/* ==========================================================================
   MyVortex — Menu laterale
   --------------------------------------------------------------------------
   Estratto da includes/layout_sidebar.php con R6-quaterdecies.

   Il menu resta SCURO anche in tema diurno: e' il cruscotto voluto con
   R6-novies. Per questo usa i token --vx-nav-*, non --vx-surface, che di giorno
   lo renderebbe chiaro come il resto della pagina.
   ========================================================================== */

.vg-menu-toggle {
    position: fixed;
    left: 20px;
    top: 100px;
    transform: translateY(-50%);
    background: var(--vx-accent);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    box-shadow: var(--vx-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: all .3s ease;
}

.vg-menu-toggle:hover {
    background: var(--vx-accent-hover);
    box-shadow: var(--vx-shadow-lg);
    transform: translateY(-50%) scale(1.05);
}

.vg-menu-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--vx-on-accent);
    border-radius: 2px;
    transition: all .3s ease;
}

.vg-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.vg-menu-toggle.open span:nth-child(2) { opacity: 0; }
.vg-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

.vg-sidebar {
    position: fixed;
    top: 84px;
    left: -300px;
    width: 280px;
    height: calc(100vh - 84px);
    background: var(--vx-nav-bg);
    box-shadow: var(--vx-shadow-lg);
    transition: left .32s cubic-bezier(.4, 0, .2, 1);
    z-index: 999;
    overflow-y: auto;
    padding-top: 8px;
    color: var(--vx-nav-text-strong);
}

.vg-sidebar.open { left: 0; }

.vg-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 998;
    display: none;
}

.vg-sidebar-overlay.open { display: block; }

/* --------------------------------------------------------------------------
   Sezioni del menu.
   Erano etichette maiuscole grigie, tutte uguali, separate da una riga piena e
   sempre chiuse: aperto il menu si vedevano diciassette righe di testo senza
   un appiglio. Ora ogni sezione ha la sua icona (leggibile anche da chiusa),
   il titolo è scritto normale, la sezione della pagina aperta si riconosce e
   si apre da sola, e la riga divisoria non attraversa più tutta la colonna.
   -------------------------------------------------------------------------- */
.vg-menu-section {
    margin: 0 8px;
    border-radius: 12px;
    transition: background .2s ease;
}

.vg-menu-section + .vg-menu-section { margin-top: 2px; }

.vg-menu-section.is-attiva { background: var(--vx-nav-sezione-attiva); }

/* Voce singola: nessun titolo da aprire, il collegamento e' la riga stessa.
   Prende lo stesso respiro di una sezione, cosi' la colonna resta allineata. */
.vg-menu-section--singola { padding: 2px 0; }
.vg-menu-section--singola .vg-menu-item { margin-bottom: 0; padding: 10px 12px; font-weight: 600; }

.vg-menu-section-title {
    position: relative;
    color: var(--vx-nav-text);
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    border-radius: 12px;
    transition: background .2s, color .2s;
}

.vg-menu-section-title:hover {
    background: var(--vx-nav-titolo-hover);
    color: var(--vx-nav-text-strong);
}

.vg-menu-section-title:focus-visible {
    outline: 2px solid var(--vx-focus);
    outline-offset: -2px;
}

/* Simbolo della sezione: è quello che rende scorribile un menu tutto chiuso. */
.vg-section-simbolo {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--vx-nav-icon);
    flex: 0 0 auto;
}

/* Il nome va a capo invece di essere troncato: «Amministrazione colla…» non
   dice niente, e i titoli di sezione sono pochi. */
.vg-section-nome {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vg-menu-section.is-attiva .vg-section-simbolo,
.vg-menu-section.is-attiva .vg-section-nome { color: var(--vx-nav-text-strong); }


/* Barra sul bordo sinistro della sezione aperta: dice dove si è senza urlare. */
.vg-menu-section.is-attiva .vg-menu-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--vx-nav-icon);
}

.vg-section-icon {
    flex: 0 0 auto;
    font-size: 11px;
    transition: transform .3s ease;
    color: var(--vx-nav-muted);
}

.vg-menu-section-title.collapsed .vg-section-icon { transform: rotate(-90deg); }
/* Apertura: `max-height` da sola parte veloce e si ferma di colpo, perche' il
   valore finale (1000px) e' molto piu' alto del contenuto reale e la maggior
   parte dell'animazione avviene nel vuoto. Con una curva che decelera, un tetto
   piu' vicino al vero e l'opacita' che accompagna, il movimento si legge. */
.vg-menu-section-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 8px;
    transition: max-height .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, padding .28s ease;
}

.vg-menu-section-content.expanded {
    max-height: 900px;
    opacity: 1;
    padding: 2px 8px 8px 8px;
}

.vg-menu-sub {
    margin: 4px 0 6px;
    border-radius: 10px;
}
.vg-menu-sub-title {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--vx-nav-text);
    padding: 8px 10px 8px 12px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    text-align: left;
}
.vg-menu-sub-title:hover {
    background: var(--vx-nav-hover);
    color: var(--vx-nav-text-strong);
}
.vg-sub-simbolo {
    width: 18px;
    text-align: center;
    color: var(--vx-nav-icon);
    font-size: 0.85rem;
}
.vg-sub-nome { flex: 1 1 auto; min-width: 0; }
.vg-sub-icon {
    font-size: 0.7rem;
    color: var(--vx-nav-icon);
    transition: transform .2s ease;
}
.vg-menu-sub-title.collapsed .vg-sub-icon { transform: rotate(-90deg); }
.vg-menu-sub-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
}
.vg-menu-sub-content.expanded {
    max-height: 480px;
    opacity: 1;
}
.vg-menu-sub-content .vg-menu-item {
    padding-left: 28px;
    font-size: 0.88rem;
}
.vg-menu-sub.is-attiva .vg-menu-sub-title {
    color: var(--vx-nav-text-strong);
}

/* Bersaglio di tocco: su telefono mobile.css porta la voce a 44px. */
.vg-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    margin-bottom: 4px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--vx-nav-text);
    font-size: 0.9375rem;
    transition: background .2s, color .2s;
}

/* Al passaggio del mouse il testo si rinforza restando nella scala del menu:
   --vx-on-accent e' pensato per superfici scure, e su un menu chiaro sparirebbe. */
.vg-menu-item:hover { background: var(--vx-nav-hover); color: var(--vx-nav-text-strong); }
.vg-menu-item i { width: 20px; text-align: center; color: var(--vx-nav-icon); font-size: .88rem; }
/* La voce corrente ha il riempimento pieno di accento, che di notte si
   schiarisce: testo e icona seguono --vx-on-fill, non --vx-on-accent. */
.vg-menu-item--active { background: var(--vx-nav-active); color: var(--vx-on-fill); }
.vg-menu-item--active i { color: var(--vx-on-fill); }

/* Fondo del pannello: una velatura appena percettibile invece del piatto,
   così la colonna si stacca dal contenuto anche senza ombra marcata. */
.vg-sidebar {
    background-image: linear-gradient(180deg, var(--vx-nav-velo), transparent 220px);
    padding-bottom: 24px;
}

@media (max-width: 768px) {
    .vg-sidebar { width: 100%; left: -100%; }
}


/* ==========================================================================
   PULSANTI
   (era includes/ui-buttons.css)
   ========================================================================== */
/**
 * Bottoni condivisi MyVortex (pagine fuori modulo eventi).
 * Contrasto elevato, stile allineato a spaziweb/admin.css
 */
.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  border: 2px solid var(--vx-faint);
  background: var(--vx-surface);
  color: var(--vx-text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--vx-shadow-xs);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  -webkit-font-smoothing: antialiased;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  text-decoration: none;
  background: var(--vx-surface2);
  border-color: var(--vx-muted);
  color: var(--vx-text);
  box-shadow: var(--vx-shadow);
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
  outline: 3px solid var(--vx-focus);
  outline-offset: 2px;
}

/* Pulsanti pieni: il testo sopra un riempimento di accento e' --vx-on-accent,
   non --vx-surface, altrimenti in tema notturno sparisce sul proprio fondo. */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background: var(--vx-gradient);
  border-color: var(--vx-accent-hover);
  color: var(--vx-on-accent);
  box-shadow: var(--vx-shadow);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, var(--vx-accent-hover) 0%, var(--vx-accent2) 100%);
  border-color: var(--vx-accent-hover);
  color: var(--vx-on-accent);
}

/* Pulsanti tenui: al passaggio del mouse il fondo diventa pieno e il testo
   passa al bianco. Un solo gesto, uguale per secondario, pericolo e avviso. */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  background: var(--vx-accent-soft);
  border-color: var(--vx-accent);
  color: var(--vx-accent-strong);
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
  background: var(--vx-accent-strong);
  border-color: var(--vx-accent-strong);
  color: var(--vx-on-fill);
}

.btn-success,
button.btn-success,
a.btn-success {
  background: var(--vx-success);
  border-color: var(--vx-success);
  color: var(--vx-on-fill);
}

.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
  background: var(--vx-success);
  border-color: var(--vx-success);
  color: var(--vx-on-fill);
  box-shadow: var(--vx-shadow);
}

.btn-danger,
button.btn-danger,
a.btn-danger {
  background: var(--vx-danger-soft);
  border-color: var(--vx-danger);
  color: var(--vx-danger);
}

.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover {
  background: var(--vx-danger);
  border-color: var(--vx-danger);
  color: var(--vx-on-fill);
}

.btn-warning,
button.btn-warning,
a.btn-warning {
  background: var(--vx-warning-soft);
  border-color: var(--vx-warning);
  color: var(--vx-warning);
}

.btn-warning:hover,
button.btn-warning:hover,
a.btn-warning:hover {
  background: var(--vx-warning);
  border-color: var(--vx-warning);
  color: var(--vx-on-fill);
}

.btn-sm,
button.btn-sm,
a.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn:disabled,
button.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.customize-btn {
  background: var(--vx-gradient);
  color: var(--vx-on-accent);
  border: 2px solid var(--vx-accent-hover);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--vx-shadow);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.customize-btn:hover {
  background: linear-gradient(135deg, var(--vx-accent-hover) 0%, var(--vx-accent2) 100%);
  box-shadow: var(--vx-shadow-lg);
}


/* ==========================================================================
   KIT UI — componenti vx-*
   (era includes/ui/vx-ui.css)
   ========================================================================== */
/* ==========================================================================
   MyVortex UI kit condiviso
   Estende spaziweb/admin.css con i componenti usati dai moduli
   Aruba, Fatturazione, Calendario, Comunicazioni, Staffing.
   ========================================================================== */

/* Titolo di pagina: sempre icona + testo, con la stessa spaziatura in ogni pagina. */
.vx-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
}

.vx-page-title i { color: var(--vx-accent); }

.vx-page-sub {
    margin: 0 0 20px 0;
    font-size: .88rem;
}

.vx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .88rem;
    color: var(--vx-muted);
}

.vx-breadcrumb a { color: var(--vx-text-soft); }

.vx-breadcrumb__sep { color: var(--vx-faint); }

.vx-vuoto { padding: 24px 0; }

.vx-footer-count {
    margin-top: 14px;
    font-size: .85rem;
}

.vx-alert--warn {
    background: var(--vx-warning-soft);
    color: var(--vx-warning);
    border: 1px solid var(--vx-warning);
}

.vx-alert ul {
    margin: 8px 0 0 18px;
}

/* ---------- Griglia card ---------- */
.vx-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-bottom: 20px;
}

.vx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.vx-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

@media (max-width: 900px) {
    .vx-grid--fixed-2 { grid-template-columns: 1fr; }
}

/* ---------- Card statistica ---------- */
.vx-stat {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(20, 28, 45, .05);
}

.vx-stat__label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vx-muted);
    margin: 0 0 6px;
}

.vx-stat__value {
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--vx-text);
    margin: 0;
}

.vx-stat__hint {
    margin: 6px 0 0;
    font-size: .82rem;
    color: var(--vx-muted);
}

.vx-stat--ok .vx-stat__value { color: var(--vx-success); }
.vx-stat--warn .vx-stat__value { color: var(--vx-warning); }
.vx-stat--err .vx-stat__value { color: var(--vx-danger); }

.vx-stat--featured {
    background: var(--vx-featured-bg);
    border-color: var(--vx-featured-bg);
    color: var(--vx-featured-text);
}

.vx-stat--featured .vx-stat__label,
.vx-stat--featured .vx-stat__hint { color: rgba(255,255,255,.68); }

.vx-stat--featured .vx-stat__value { color: var(--vx-featured-text); }

.vx-stat__delta {
    margin: 6px 0 0;
    font-size: .78rem;
    font-weight: 600;
}

.vx-stat__delta--pos { color: var(--vx-success); }
.vx-stat__delta--neg { color: var(--vx-danger); }
.vx-stat--featured .vx-stat__delta--pos { color: var(--vx-featured-ok); }
.vx-stat--featured .vx-stat__delta--neg { color: var(--vx-featured-ko); }

.vx-chart {
    position: relative;
    height: 240px;
    width: 100%;
}

.vx-anello-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 4px 12px;
}

.vx-anello {
    position: relative;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--vx-accent) calc(var(--p, 0) * 1%), var(--vx-surface3) 0);
    display: grid;
    place-items: center;
}

.vx-anello::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--vx-surface);
}

.vx-anello span {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vx-text);
}

.vx-anello__meta { min-width: 0; }
.vx-anello__meta strong { display: block; font-size: 1rem; color: var(--vx-text); }
.vx-anello__meta small { color: var(--vx-muted); }

/* ---------- Pannelli ---------- */
.vx-box {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(20, 28, 45, .05);
}

.vx-box__title {
    margin: 0 0 14px;
    font-size: 1.02rem;
    color: var(--vx-text);
    display: flex;
    align-items: center;
    gap: 9px;
}

.vx-box__title i { color: var(--vx-accent); }

.vx-box--soft { background: var(--vx-surface2); }

/* ---------- Definition list dati ---------- */
.vx-dl {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 8px 18px;
    margin: 0;
    font-size: .93rem;
}

.vx-dl dt,
.vx-dl dd { min-width: 0; }
.vx-dl dt { color: var(--vx-muted); }
.vx-dl dd { margin: 0; color: var(--vx-text); overflow-wrap: anywhere; word-break: normal; }

@media (max-width: 640px) {
    .vx-dl { grid-template-columns: 1fr; gap: 2px; }
    .vx-dl dd { margin-bottom: 10px; }
}

/* ---------- Badge stato ---------- */
.vx-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    white-space: nowrap;
}

.vx-badge--bozza { background: var(--vx-surface3); color: var(--vx-text-soft); }
.vx-badge--inviato,
.vx-badge--inviata { background: var(--vx-info-soft); color: var(--vx-info); }
.vx-badge--accettato,
.vx-badge--approvata,
.vx-badge--consegnata { background: var(--vx-success-soft); color: var(--vx-success); }
.vx-badge--rifiutato,
.vx-badge--rifiutata,
.vx-badge--scartata { background: var(--vx-danger-soft); color: var(--vx-danger); }
.vx-badge--scaduto,
.vx-badge--mancata_consegna { background: var(--vx-warning-soft); color: var(--vx-warning); }
.vx-badge--fatturato,
.vx-badge--pagata { background: var(--vx-accent2-soft); color: var(--vx-accent2); }
.vx-badge--annullato { background: var(--vx-surface3); color: var(--vx-muted); }
.vx-badge--confermato { background: var(--vx-success-soft); color: var(--vx-success); }
.vx-badge--proposto { background: var(--vx-info-soft); color: var(--vx-info); }
.vx-badge--no_show { background: var(--vx-danger-soft); color: var(--vx-danger); }
.vx-badge--attivo { background: var(--vx-success-soft); color: var(--vx-success); }
.vx-badge--in_pausa { background: var(--vx-warning-soft); color: var(--vx-warning); }
.vx-badge--completato { background: var(--vx-accent2-soft); color: var(--vx-accent2); }
.vx-badge--archiviato { background: var(--vx-surface3); color: var(--vx-muted); }

/* ---------- Tabelle righe documento ---------- */
.vx-righe {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.vx-righe th,
.vx-righe td {
    border-bottom: 1px solid var(--vx-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.vx-righe th {
    background: var(--vx-surface2);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vx-muted);
}

.vx-th-info {
    margin-left: 4px;
    color: var(--vx-faint);
    cursor: help;
    font-size: .9em;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
}

.vx-th-info:hover {
    color: var(--vx-accent);
}

.vx-righe td.vx-num,
.vx-righe th.vx-num { text-align: right; white-space: nowrap; }

.vx-righe input,
.vx-righe select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--vx-border);
    border-radius: 8px;
    font-size: .9rem;
    font-family: inherit;
}

.vx-riga-del {
    background: none;
    border: none;
    color: var(--vx-danger);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
}

/* ---------- Totali documento ---------- */
.vx-totali {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.vx-totali table { font-size: .95rem; }
.vx-totali td { padding: 5px 12px; }
.vx-totali td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.vx-totali tr.vx-totali__grand td {
    border-top: 2px solid var(--vx-border-strong);
    font-weight: 700;
    font-size: 1.05rem;
    padding-top: 9px;
}

/* ---------- Form generico ---------- */
.vx-form {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.vx-form--single { grid-template-columns: 1fr; }

.vx-field { display: flex; flex-direction: column; gap: 6px; }
.vx-field--full { grid-column: 1 / -1; }

.vx-field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vx-text-soft);
}

.vx-field input,
.vx-field select,
.vx-field textarea {
    padding: var(--vx-field-pad-y) var(--vx-field-pad-x);
    border: 1px solid var(--vx-field-border);
    border-radius: var(--vx-field-radius);
    font-size: .95rem;
    font-family: inherit;
    background: var(--vx-field-bg);
    color: var(--vx-field-text);
}

.vx-field input:focus,
.vx-field select:focus,
.vx-field textarea:focus {
    outline: none;
    border-color: var(--vx-focus);
    box-shadow: var(--vx-focus-ring);
}

.vx-field textarea { min-height: 110px; resize: vertical; }
.vx-field small { color: var(--vx-muted); font-size: .8rem; }

.vx-field--check {
    flex-direction: row;
    align-items: center;
    gap: 9px;
}

.vx-field--check input { width: auto; }

/* ==========================================================================
   Barra strumenti di pagina
   Struttura fissa: a sinistra il contesto (navigazione, periodo), a destra le
   azioni. Le azioni principali stanno sempre nello stesso posto, in ogni pagina.
   ========================================================================== */
.vx-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.vx-toolbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Spinge il secondo gruppo a destra. */
.vx-toolbar__spacer { flex: 1 1 auto; }

/* Nella barra strumenti i pulsanti hanno una misura sola, qualunque classe
   portino: così le pagine di dettaglio non risultano più pesanti degli elenchi. */
.vx-toolbar .vx-btn,
body.eventi-page .vx-toolbar a.vx-btn,
body.eventi-page .vx-toolbar button.vx-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: .85rem;
}

.vx-toolbar form { margin: 0; }

.vx-cal-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--vx-border);
}

.vx-cal-jump label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--vx-muted);
}

.vx-cal-jump input[type="date"] {
    width: auto;
    min-height: 34px;
    padding-block: 4px;
}

.vx-toolbar__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vx-text);
    margin: 0 4px;
    text-transform: capitalize;
    white-space: nowrap;
}

/* Gruppo di pulsanti uniti, per la navigazione fra periodi. */
.vx-btn-group {
    display: inline-flex;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--vx-surface);
}

.vx-btn-group > * {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.vx-btn-group > * + * { border-left: 1px solid var(--vx-border); }

/* Selettore a segmenti: una sola scelta fra poche alternative. */
.vx-seg {
    display: inline-flex;
    background: var(--vx-surface3);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.vx-seg__item {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--vx-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.vx-seg__item:hover { color: var(--vx-text); }

.vx-seg__item--active {
    background: var(--vx-surface);
    color: var(--vx-accent-strong);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

@media (max-width: 700px) {
    .vx-toolbar__spacer { display: none; }
    .vx-toolbar { gap: 8px; }
    .vx-toolbar__group { width: 100%; }
    .vx-seg { width: 100%; }
    .vx-seg__item { flex: 1; text-align: center; padding: 7px 6px; }
    .vx-cal-jump { width: 100%; padding-left: 0; border-left: 0; }
    .vx-cal-jump input[type="date"] { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Selettore di contesto (anno, progetto, periodo)
   Più leggero della barra di ricerca, così si distingue a prima vista.
   ========================================================================== */
.vx-selettore {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 18px;
}

.vx-selettore__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--vx-text-soft);
    padding-bottom: 8px;
}

.vx-selettore__label i { color: var(--vx-accent); }

.vx-selettore__campi {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.vx-selettore__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.vx-selettore__campo label {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vx-faint);
}

.vx-selettore__campo .vx-input { margin: 0; }

.vx-selettore__azioni {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 1px;
}

@media (max-width: 700px) {
    .vx-selettore { align-items: stretch; }
    .vx-selettore__label { padding-bottom: 0; }
    .vx-selettore__campo { min-width: 0; flex: 1 1 140px; }
}

/* ---------- Calendario ---------- */
.vx-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 14px;
    font-size: .84rem;
    color: var(--vx-text-soft);
}

.vx-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Scelta dei livelli: caselle a pillola, leggibili e allineate. */
.vx-cal-layers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.vx-cal-layers__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 8px;
    background: var(--vx-surface);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vx-text-soft);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s;
}

.vx-cal-layers__item:hover { border-color: var(--vx-accent-soft); background: var(--vx-accent-soft); }

.vx-cal-layers__item input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--vx-accent);
    cursor: pointer;
}

.vx-cal-layers__label {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.vx-cal-layers__label-main {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-cal-layers__label-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vx-muted);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.vx-cal-layers__item:has(input:checked) {
    border-color: var(--vx-accent);
    background: var(--vx-accent-soft);
    color: var(--vx-text);
}

.vx-cal-layers__item:has(input:checked) .vx-cal-layers__label-main { font-weight: 600; }

.vx-cal-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.vx-cal-dot--collaborazione { background: var(--vx-cat-collaborazione); }
.vx-cal-dot--evento { background: var(--vx-cat-evento); }
.vx-cal-dot--staffing { background: var(--vx-cat-staffing); }
.vx-cal-dot--aruba { background: var(--vx-cat-aruba); }
.vx-cal-dot--interno { background: var(--vx-cat-interno); }
.vx-cal-dot--personale { background: var(--vx-cat-personale); }
.vx-cal-dot--scadenza { background: var(--vx-cat-scadenza); }

/* Pulsanti di collegamento dei calendari personali (autorizzazione nel browser) */
.vx-cal-collega {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 16px;
}

.vx-cal-collega__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border-strong);
    border-left-width: 4px;
    font-weight: 600;
    color: var(--vx-text);
}

.vx-cal-collega__btn:hover {
    background: var(--vx-accent-soft);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.vx-cal-collega__btn i { font-size: 1.05rem; }

/* Scelta provider: pulsanti grandi e riconoscibili, utilizzabili anche se il
   CDN delle icone non è disponibile. */
.vx-cal-providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.vx-cal-provider-form { margin: 0; }

.vx-cal-provider {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border: 1px solid var(--vx-field-border);
    border-radius: 10px;
    background: var(--vx-surface);
    color: var(--vx-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.vx-cal-provider:hover {
    border-color: var(--vx-border-strong);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
    transform: translateY(-1px);
}

.vx-cal-provider:disabled {
    cursor: not-allowed;
    opacity: .62;
    box-shadow: none;
    transform: none;
}

.vx-cal-provider:disabled:hover {
    border-color: var(--vx-field-border);
    box-shadow: none;
    transform: none;
}

.vx-cal-provider:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .22);
    outline-offset: 2px;
}

.vx-cal-provider__mark {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 9px;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: Arial, sans-serif;
}

.vx-cal-provider--google .vx-cal-provider__mark {
    /* Colori del marchio Google: non sono token di tema, restano letterali. */
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
    color: var(--vx-on-accent);
}

/* Colore del marchio Microsoft: idem. */
.vx-cal-provider--microsoft .vx-cal-provider__mark { background: #0078d4; color: var(--vx-on-accent); }

.vx-cal-provider__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.vx-cal-provider__body strong { font-size: .98rem; }
.vx-cal-provider__body small { color: var(--vx-muted); font-size: .76rem; }
.vx-cal-provider__arrow { color: var(--vx-faint); font-size: 1.7rem; line-height: 1; }

.vx-technical-details { margin-top: 14px; font-size: .84rem; }
.vx-technical-details > summary { color: var(--vx-muted); cursor: pointer; }
.vx-technical-details .vx-alert { margin: 10px 0 0; }

.vx-manual-calendar {
    margin: 18px 0;
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    background: var(--vx-surface);
    overflow: hidden;
}

.vx-manual-calendar > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--vx-text);
}

.vx-manual-calendar > summary::-webkit-details-marker { display: none; }
.vx-manual-calendar > summary:hover { background: var(--vx-surface2); }
.vx-manual-calendar > summary > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.vx-manual-calendar > summary small { color: var(--vx-muted); font-size: .78rem; font-weight: 400; }

.vx-manual-calendar__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
    font-size: 1.4rem;
}

.vx-manual-calendar__chevron { color: var(--vx-faint); transition: transform .15s; }
.vx-manual-calendar[open] .vx-manual-calendar__chevron { transform: rotate(180deg); }
.vx-manual-calendar__body { padding: 0 16px 16px; border-top: 1px solid var(--vx-border); }
.vx-box--embedded { margin: 0; border: 0; box-shadow: none; padding-inline: 0; }

@media (max-width: 720px) {
    .vx-cal-providers { grid-template-columns: 1fr; }
}

.vx-cal {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    overflow: hidden;
    table-layout: fixed;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.vx-cal th {
    background: var(--vx-surface2);
    padding: 11px 10px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vx-faint);
    border-bottom: 1px solid var(--vx-border);
    text-align: left;
}

.vx-cal td {
    vertical-align: top;
    height: 124px;
    padding: 8px;
    border-right: 1px solid var(--vx-border);
    border-bottom: 1px solid var(--vx-border);
}

.vx-cal td:last-child { border-right: none; }
.vx-cal tr:last-child td { border-bottom: none; }

.vx-cal td.vx-cal__out { background: var(--vx-surface2); }
.vx-cal td.vx-cal__today { background: var(--vx-accent-soft); }

/* Numero del giorno: discreto, tranne oggi che porta un cerchio. */
.vx-cal__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--vx-muted);
    border-radius: 50%;
    margin-bottom: 6px;
}

a.vx-cal__day { text-decoration: none; }
a.vx-cal__day:hover { background: var(--vx-accent-soft); color: var(--vx-accent-hover); }

.vx-cal td.vx-cal__today .vx-cal__day {
    background: var(--vx-accent-strong);
    color: var(--vx-on-fill);
}

.vx-cal td.vx-cal__out .vx-cal__day { color: var(--vx-faint); }

/* Evento: fondo tenue e barretta colorata. Il testo resta leggibile e sette
   livelli affiancati non trasformano il mese in un arcobaleno. */
.vx-cal__ev {
    position: relative;
    z-index: 1;
    display: block;
    font-size: .77rem;
    line-height: 1.35;
    padding: 4px 7px 4px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    border-left: 3px solid var(--vx-cat-collaborazione);
    background: var(--vx-cat-collaborazione-soft);
    color: var(--vx-cat-collaborazione-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .15s;
    cursor: pointer;
}

.vx-cal__ev:hover { background: color-mix(in srgb, var(--vx-cat-collaborazione) 16%, var(--vx-cat-collaborazione-soft)); }

.vx-cal__ev--evento { border-left-color: var(--vx-cat-evento); background: var(--vx-cat-evento-soft); color: var(--vx-cat-evento-text); }
.vx-cal__ev--evento:hover { background: color-mix(in srgb, var(--vx-cat-evento) 16%, var(--vx-cat-evento-soft)); }
.vx-cal__ev--staffing { border-left-color: var(--vx-cat-staffing); background: var(--vx-cat-staffing-soft); color: var(--vx-cat-staffing-text); }
.vx-cal__ev--staffing:hover { background: color-mix(in srgb, var(--vx-cat-staffing) 16%, var(--vx-cat-staffing-soft)); }
.vx-cal__ev--aruba { border-left-color: var(--vx-cat-aruba); background: var(--vx-cat-aruba-soft); color: var(--vx-cat-aruba-text); }
.vx-cal__ev--aruba:hover { background: color-mix(in srgb, var(--vx-cat-aruba) 16%, var(--vx-cat-aruba-soft)); }
.vx-cal__ev--interno { border-left-color: var(--vx-cat-interno); background: var(--vx-cat-interno-soft); color: var(--vx-cat-interno-text); }
.vx-cal__ev--interno:hover { background: color-mix(in srgb, var(--vx-cat-interno) 16%, var(--vx-cat-interno-soft)); }
.vx-cal__ev--personale { border-left-color: var(--vx-cat-personale); background: var(--vx-cat-personale-soft); color: var(--vx-cat-personale-text); }
.vx-cal__ev--personale:hover { background: color-mix(in srgb, var(--vx-cat-personale) 16%, var(--vx-cat-personale-soft)); }
.vx-cal__ev--scadenza { border-left-color: var(--vx-cat-scadenza); background: var(--vx-cat-scadenza-soft); color: var(--vx-cat-scadenza-text); }
.vx-cal__ev--scadenza:hover { background: color-mix(in srgb, var(--vx-cat-scadenza) 16%, var(--vx-cat-scadenza-soft)); }

.vx-cal__more {
    display: block;
    font-size: .73rem;
    font-weight: 600;
    color: var(--vx-muted);
    padding-left: 8px;
}

@media (max-width: 900px) {
    .vx-cal td { height: 104px; padding: 6px; }
    .vx-cal__ev { font-size: .73rem; }
}

@media (max-width: 700px) {
    .vx-cal { table-layout: fixed; width: 100%; }
    .vx-cal th { font-size: .66rem; padding: 8px 4px; }
    .vx-cal td { height: auto; min-height: 64px; padding: 4px; overflow: hidden; }
    .vx-cal__ev { white-space: normal; font-size: .7rem; padding: 3px 5px; }
    .vx-cal__day { min-width: 18px; height: 18px; font-size: .72rem; }
}

/* ---------- Elenco destinatari comunicazione ---------- */
.vx-recipients {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.vx-recipient {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--vx-border);
    border-radius: 9px;
    background: var(--vx-surface);
    font-size: .9rem;
}

.vx-recipient input { margin-top: 3px; }
.vx-recipient span { display: block; }
.vx-recipient small { color: var(--vx-muted); }
.vx-recipient--off { opacity: .55; }
.vx-recipients--registry { max-height: 340px; }

/* ---------- Stato integrazione ---------- */
.vx-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 600;
}

.vx-status--on { color: var(--vx-success); }
.vx-status--off { color: var(--vx-danger); }
.vx-status--warn { color: var(--vx-warning); }

/* ---------- Timeline / log ---------- */
.vx-log {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .88rem;
}

.vx-log li {
    padding: 9px 0 9px 16px;
    border-left: 2px solid var(--vx-border);
    position: relative;
}

.vx-log li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vx-accent);
}

.vx-log time { color: var(--vx-muted); font-size: .8rem; display: block; }

/* ---------- Tabs ---------- */
.vx-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--vx-border);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.vx-tab {
    padding: 9px 16px;
    text-decoration: none;
    color: var(--vx-text-soft);
    font-size: .92rem;
    border-bottom: 2px solid transparent;
}

.vx-tab:hover { color: var(--vx-accent); }
.vx-tab--active { color: var(--vx-accent); border-bottom-color: var(--vx-accent); font-weight: 600; }

/* ==========================================================================
   Barra di avanzamento (plafond, incidenza costi)
   Solo la larghezza resta inline, perché è un valore calcolato.
   ========================================================================== */
.vx-progress {
    margin-top: 6px;
    height: 6px;
    background: var(--vx-border);
    border-radius: 6px;
    overflow: hidden;
}

.vx-progress__fill {
    height: 100%;
    border-radius: 6px;
    background: var(--vx-success);
    transition: width .3s;
}

.vx-progress__fill--attenzione { background: var(--vx-warning); }
.vx-progress__fill--critico { background: var(--vx-danger); }

/* ---------- Testo con significato di stato ---------- */
.vx-testo--attenzione { color: var(--vx-warning); }
.vx-testo--critico { color: var(--vx-danger); }

/* Riga di tabella senza risultati: stesso respiro in ogni elenco. */
.vx-table__vuoto {
    padding: 22px !important;
    text-align: center;
    color: var(--vx-muted);
}

/* ---------- Entità progetto + cliente ---------- */
.vx-entita { display: block; line-height: 1.35; }
.vx-entita small { display: block; color: var(--vx-muted); font-size: .78rem; }

/* ---------- Chip filtri attivi ---------- */
.vx-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -6px 0 16px;
    font-size: .84rem;
}

.vx-chips__label { color: var(--vx-muted); }

.vx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    text-decoration: none;
    transition: background .15s;
}

.vx-chip:hover { background: var(--vx-surface-hover); color: var(--vx-text); }
.vx-chip i { font-size: .72rem; opacity: .7; }
.vx-chip--reset { background: transparent; color: var(--vx-accent); text-decoration: underline; }
.vx-chip--reset:hover { background: transparent; }

.vx-filters--smart .vx-filters-field small { margin-top: 2px; font-size: .76rem; }

.vx-filters-field--full {
    grid-column: 1 / -1 !important;
}

/* ---------- Vista settimana / agenda calendario ---------- */
.vx-cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.vx-cal-week__day {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    padding: 12px;
    min-height: 190px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.vx-cal-week__day--today {
    border-color: var(--vx-accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .12);
}

.vx-cal-week__head {
    font-size: .82rem;
    font-weight: 700;
    color: var(--vx-text-soft);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vx-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.vx-cal-week__head small {
    color: var(--vx-faint);
    font-weight: 600;
    font-size: .72rem;
    background: var(--vx-surface2);
    border-radius: 999px;
    padding: 1px 7px;
}

.vx-cal-week__tools { display: inline-flex; align-items: center; gap: 6px; }
.vx-cal-week__add {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
    text-decoration: none;
    font-size: 1rem;
}
.vx-cal-week__add:hover { background: var(--vx-accent-strong); color: var(--vx-on-fill); }

.vx-cal-week__day--today .vx-cal-week__head small { background: var(--vx-accent-soft); color: var(--vx-accent-strong); }

.vx-cal-week__vuoto {
    margin: 0;
    font-size: .8rem;
    color: var(--vx-faint);
}

@media (max-width: 900px) {
    .vx-cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vx-cal-week__day { min-height: 130px; }
}

@media (max-width: 560px) {
    .vx-cal-week { grid-template-columns: 1fr; }
    .vx-cal-week__day { min-height: 0; }
}

@media (max-width: 900px) {
    .vx-cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .vx-cal-week { grid-template-columns: 1fr; }
}

.vx-agenda {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vx-agenda__day {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 14px 16px 12px;
    box-shadow: 0 1px 3px rgba(20, 28, 45, .05);
}

.vx-agenda__day--oggi {
    border-color: var(--vx-accent-soft);
    box-shadow: 0 0 0 1px var(--vx-accent-soft);
}

.vx-agenda__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vx-agenda__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--vx-surface2);
    color: var(--vx-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.vx-agenda__day--oggi .vx-agenda__num {
    background: var(--vx-accent-strong);
    color: var(--vx-on-fill);
}

.vx-agenda__head-testo { flex: 1; line-height: 1.25; }
.vx-agenda__head-testo strong { display: block; font-size: .95rem; }
.vx-agenda__head-testo small { color: var(--vx-muted); font-size: .8rem; text-transform: capitalize; }

.vx-agenda__count {
    font-size: .78rem;
    color: var(--vx-muted);
    background: var(--vx-surface2);
    border-radius: 999px;
    padding: 3px 9px;
}

.vx-agenda__card {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.vx-agenda__card:last-child { margin-bottom: 0; }

.vx-agenda__ora {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: inherit;
    opacity: .8;
}

.vx-agenda__titolo {
    font-weight: 650;
    font-size: .95rem;
}

.vx-agenda__meta {
    font-size: .8rem;
    opacity: .75;
}

@media (max-width: 640px) {
    .vx-agenda__card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .vx-agenda__ora { grid-row: auto; }
}

/* ---------- Chat progetto ---------- */
.vx-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding: 4px 4px 8px;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
}

.vx-chat__empty { padding: 26px; text-align: center; color: var(--vx-muted); }

.vx-msg {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--vx-surface);
    border: 1px solid var(--vx-surface3);
    border-radius: 10px;
    margin: 0 8px;
}

.vx-msg--mine { background: var(--vx-accent-soft); border-color: var(--vx-accent-soft); }
.vx-msg--sistema { background: var(--vx-warning-soft); border-color: var(--vx-warning); font-size: .88rem; }

.vx-msg__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vx-accent);
    color: var(--vx-on-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    flex-shrink: 0;
}

.vx-msg__body { flex: 1; min-width: 0; }

.vx-msg__meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 3px;
    font-size: .8rem;
}

.vx-msg__autore { font-weight: 600; color: var(--vx-text); }
.vx-msg__time { color: var(--vx-faint); }
.vx-msg__testo { font-size: .93rem; line-height: 1.5; color: var(--vx-text); overflow-wrap: break-word; }

.vx-chat-form { margin-top: 14px; }
.vx-chat-form textarea { min-height: 86px; }

.vx-chat-partecipanti {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.vx-chat-partecipante {
    font-size: .8rem;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    border-radius: 999px;
    padding: 3px 10px;
}

/* Selettore persone evento: ricerca e card selezionabili senza Ctrl/Cmd. */
.vx-people-picker {
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    background: var(--vx-surface2);
    padding: 12px;
}

.vx-people-picker__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.vx-people-picker__search { position: relative; flex: 1 1 240px; }
.vx-people-picker__search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--vx-faint); }
.vx-people-picker__search input { width: 100%; margin: 0; padding-left: 34px; }
.vx-people-picker__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vx-people-picker__status { margin: 10px 0 8px; color: var(--vx-muted); font-size: .8rem; }

.vx-people-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}

.vx-person {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    background: var(--vx-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.vx-person:hover { border-color: var(--vx-border-strong); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.vx-person:has(input:checked) { border-color: var(--vx-accent); background: var(--vx-accent-soft); }
.vx-person[hidden] { display: none; }
.vx-person > input { position: absolute; opacity: 0; pointer-events: none; }

.vx-person__avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
    font-size: .76rem;
    font-weight: 700;
}

.vx-person__body { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.vx-person__body strong, .vx-person__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-person__body strong { color: var(--vx-text); font-size: .86rem; }
.vx-person__body small { color: var(--vx-muted); font-size: .74rem; }
.vx-person__check { color: var(--vx-accent-strong); opacity: 0; }
.vx-person:has(input:checked) .vx-person__check { opacity: 1; }

.avvisi-bell-icon { width: 20px; height: 20px; display: block; }

/* ---------- Utility ---------- */
.vx-inline-form { display: inline; }
.vx-nowrap { white-space: nowrap; }
.vx-right { text-align: right; }
.vx-mt { margin-top: 16px; }
.vx-mb0 { margin-bottom: 0; }

/* Media sito pubblico */
.sitoweb-media-thumb {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--vx-surface2);
}
.sitoweb-media-url {
    display: block;
    word-break: break-all;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

/* Hub Sito web */
.sitoweb-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin: 0 0 12px;
}
.sitoweb-hub__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    background: var(--vx-surface);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color .15s ease, background .15s ease;
}
.sitoweb-hub__card:hover {
    border-color: var(--vx-accent-strong);
    background: var(--vx-surface2);
}
.sitoweb-hub__card--alert {
    border-color: color-mix(in srgb, var(--vx-accent-strong) 45%, var(--vx-border));
}
.sitoweb-hub__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
}
.sitoweb-hub__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sitoweb-hub__body strong {
    font-size: 0.95rem;
    color: var(--vx-text);
}
.sitoweb-hub__body span {
    font-size: 0.8rem;
    color: var(--vx-muted);
}
.sitoweb-hub__cta {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vx-accent-strong);
}
.sitoweb-hub-hint { margin: 0 0 20px; }
.sitoweb-sezione { margin-top: 8px; }
.sitoweb-sezione__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.sitoweb-sezione__title {
    margin: 0;
    font-size: 1.15rem;
}
.sitoweb-pagine {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sitoweb-pagina-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    background: var(--vx-surface);
}
.sitoweb-pagina-card__main { min-width: 0; flex: 1 1 240px; }
.sitoweb-pagina-card__title {
    font-weight: 600;
    color: var(--vx-text);
    text-decoration: none;
    font-size: 1rem;
}
.sitoweb-pagina-card__title:hover { text-decoration: underline; }
.sitoweb-pagina-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.sitoweb-pagina-card__azioni {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.sitoweb-preview__footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    font-size: 0.85rem;
}
.sitoweb-preview__footer > span:last-child { text-align: right; }
.sitoweb-preview__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.sitoweb-preview__social em {
    font-style: normal;
    margin: 0 4px;
}
.sitoweb-social-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.sitoweb-social-riga { align-items: end; }
.vx-field--azioni { align-self: end; }


/* ==========================================================================
   DASHBOARD
   (era includes/dashboard.css)
   ========================================================================== */
/* Dashboard MyVortex */

.main-content {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 28px 40px;
    transition: margin-left 0.3s ease;
}

/* Hero benvenuto */
/* Intestazione del cruscotto.
   Era un banner alto: 28 pixel di bordo interno, un saluto in corpo 1,65rem e
   24 di margine sotto — un terzo dello schermo per dire il proprio nome, prima
   di arrivare ai numeri, che sono il motivo per cui la pagina si apre. Ora e'
   una riga: saluto a sinistra, anno e «Personalizza» a destra. */
.welcome-card {
    background: linear-gradient(135deg, var(--vx-surface) 0%, var(--vx-accent-soft) 100%);
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--vx-shadow);
    margin-bottom: 14px;
}

.welcome-card h2 {
    color: var(--vx-text);
    margin-bottom: 2px;
    font-size: 1.12rem;
    font-weight: 700;
}

.welcome-card p {
    color: var(--vx-muted);
    line-height: 1.4;
    font-size: .85rem;
    max-width: 640px;
}

.welcome-kicker {
    margin: 0 0 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vx-faint);
}

.welcome-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.welcome-card-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.dash-period {
    display: inline-flex;
    background: var(--vx-surface3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.dash-period__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--vx-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}

.dash-period__item--active {
    background: var(--vx-featured-bg);
    color: var(--vx-featured-text);
}

.stat-card--featured {
    background: var(--vx-featured-bg);
    border-color: var(--vx-featured-bg);
    color: var(--vx-featured-text);
}

.stat-card--featured .stat-number,
.stat-card--featured .stat-label,
.stat-card--featured .stat-hint {
    color: var(--vx-featured-text);
}

.stat-card--featured .stat-label,
.stat-card--featured .stat-hint { opacity: .72; }

.stat-card--featured .stat-icon-wrap {
    background: rgba(255,255,255,.12);
    color: var(--vx-featured-text);
}

.stat-card--featured:hover {
    background: var(--vx-featured-bg);
    border-color: var(--vx-featured-bg);
}

.stat-delta {
    margin-top: 6px;
    font-size: .78rem;
    font-weight: 600;
}

.stat-delta--pos { color: var(--vx-success); }
.stat-delta--neg { color: var(--vx-danger); }
.stat-card--featured .stat-delta--pos { color: var(--vx-featured-ok); }
.stat-card--featured .stat-delta--neg { color: var(--vx-featured-ko); }

/* Avvisi e banner */
.dashboard-alerts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-alert {
    background: var(--vx-surface);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--vx-shadow);
}

.dashboard-alert h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-alert-info {
    border-left: 4px solid var(--vx-accent);
}

.dashboard-alert-info h3 {
    color: var(--vx-accent-hover);
}

.dashboard-alert-warn {
    border-left: 4px solid var(--vx-warning);
}

.dashboard-alert-warn h3 {
    color: var(--vx-warning);
}

.dashboard-alert-body {
    color: var(--vx-text-soft);
    line-height: 1.55;
    font-size: 0.95rem;
}

.dashboard-progress {
    background: var(--vx-accent-soft);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin: 14px 0;
}

.dashboard-progress-bar {
    background: var(--vx-gradient);
    height: 100%;
    transition: width .3s;
}

.dashboard-alert-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vx-accent);
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
}

.dashboard-alert-link:hover {
    text-decoration: underline;
}

/* Layout principale */
.dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.dashboard-body-single {
    grid-template-columns: 1fr;
}

.dashboard-primary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.dashboard-secondary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Pannelli sezione */
.dashboard-panel {
    background: var(--vx-surface);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--vx-shadow);
}

.dashboard-panel-compact {
    padding: 0;
    overflow: hidden;
}

.dashboard-panel-compact .dashboard-panel-head {
    padding: 18px 22px 0;
}

.dashboard-panel-head {
    margin-bottom: 18px;
}

.dashboard-section-title {
    color: var(--vx-text);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-section-title i {
    color: var(--vx-accent);
    font-size: 0.95rem;
}

/* Stat cards */
/* Riquadri numerici del cruscotto.
   Erano tastoni: 220px di larghezza minima, 18px di riempimento e un'icona da
   52px per due righe di testo, con un salto di 3px al passaggio del mouse.
   Occupavano lo schermo senza dire di piu'. Ora sono compatti, ne stanno il
   doppio per riga, e dentro c'e' spazio per la miniatura dell'andamento — che
   e' l'informazione che mancava davvero. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: 10px;
}

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    padding: 11px 13px;
    overflow: hidden;
    transition: box-shadow .18s, border-color .18s, background .18s;
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
}

.stat-card-link:hover,
.stat-card:hover {
    box-shadow: var(--vx-shadow);
    border-color: var(--vx-accent);
    background: var(--vx-surface);
}

.stat-icon-wrap {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
}

.stat-body { min-width: 0; }

/* Miniatura dell'andamento: sta sul fondo del riquadro, sotto i numeri, senza
   rubare spazio. Il colore lo prende dal riquadro, cosi' segue la semantica
   gia' scelta (verde entrate, ambra uscite) e i due temi. */
.stat-trend {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26px;
    opacity: .42;
    pointer-events: none;
}

/* Spazio in fondo per la linea: senza, una nota su due righe finisce sotto al
   disegno. Solo sui riquadri che la linea ce l'hanno davvero. */
.stat-card--linea { padding-bottom: 30px; }

.stat-card:hover .stat-trend { opacity: .62; }
.stat-trend.is-su { color: var(--vx-success); }
.stat-trend.is-giu { color: var(--vx-danger); }
.stat-card-orange .stat-trend { color: var(--vx-warning); }

.stat-card-blue .stat-icon-wrap { background: var(--vx-accent-soft); color: var(--vx-accent-strong); }
.stat-card-green .stat-icon-wrap { background: var(--vx-success-soft); color: var(--vx-success); }
.stat-card-orange .stat-icon-wrap { background: var(--vx-warning-soft); color: var(--vx-warning); }
.stat-card-red .stat-icon-wrap { background: var(--vx-danger-soft); color: var(--vx-danger); }
.stat-card-purple .stat-icon-wrap { background: var(--vx-accent2-soft); color: var(--vx-accent2); }
.stat-card-gray .stat-icon-wrap { background: var(--vx-surface3); color: var(--vx-muted); }

.stat-body {
    min-width: 0;
}

/* Il numero resta l'elemento dominante, ma proporzionato al riquadro nuovo. */
.stat-number {
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--vx-text);
    margin-bottom: 1px;
    line-height: 1.15;
    /* `anywhere` spezzava «48.250,00 €» fra cifre e valuta anche quando ci
       stava: si consente solo la rottura di una parola davvero troppo lunga. */
    overflow-wrap: break-word;
}

.stat-label {
    color: var(--vx-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.stat-hint {
    color: var(--vx-faint);
    font-size: 0.72rem;
    line-height: 1.3;
}

/* Collaborazioni recenti */
.dashboard-recent-list {
    overflow: hidden;
}

.dashboard-recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--vx-border);
    text-decoration: none;
    color: var(--vx-text-soft);
    transition: background .2s;
}

.dashboard-recent-item:first-child {
    border-top: none;
}

.dashboard-recent-item:hover {
    background: var(--vx-accent-soft);
}

.dashboard-recent-item strong {
    font-size: 0.92rem;
}

.dashboard-recent-item small {
    color: var(--vx-faint);
    font-size: 0.82rem;
}

.dashboard-recent-stato {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vx-accent);
    white-space: nowrap;
    background: var(--vx-accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Azioni rapide */
.quick-actions {
    background: var(--vx-surface);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--vx-shadow);
}

.quick-actions h3 {
    color: var(--vx-text);
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-actions h3 i {
    color: var(--vx-accent);
}

/* Azioni rapide.
   Erano una colonna sola (`grid-template-columns: 1fr`): sei collegamenti
   diventavano sei barre a tutta larghezza, alte quanto un pulsante di conferma,
   per andare in una pagina. Sono scorciatoie, e vanno vestite da scorciatoie:
   griglia che riempie lo spazio, due o tre per riga. */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
    gap: 7px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
    text-decoration: none;
    color: var(--vx-text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    min-width: 0;
}

.action-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-btn i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--vx-accent);
}

.action-btn:hover {
    background: var(--vx-accent);
    border-color: var(--vx-accent);
    color: var(--vx-on-fill);
    transform: translateX(4px);
}

.action-btn:hover i {
    color: var(--vx-on-accent);
}

/* Personalizzazione */
.dashboard-customize-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dashboard-customize-tab {
    padding: 8px 14px;
    border: 1px solid var(--vx-border);
    background: var(--vx-surface2);
    color: var(--vx-text-soft);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
}

.dashboard-customize-tab:hover { border-color: var(--vx-accent); color: var(--vx-accent-strong); }

.dashboard-customize-tab.active {
    background: var(--vx-accent);
    border-color: var(--vx-accent);
    color: var(--vx-on-fill);
}

.dashboard-customize-group {
    margin-bottom: 18px;
}

.dashboard-customize-group h4 {
    margin: 0 0 8px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vx-faint);
}

.dashboard-customize-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--vx-surface2);
    color: var(--vx-text);
}

.dashboard-customize-option:hover { border-color: var(--vx-accent); background: var(--vx-surface-hover); }
.dashboard-customize-option input { margin-top: 2px; accent-color: var(--vx-accent); }
.dashboard-customize-option strong { color: var(--vx-text); }
.dashboard-customize-option__icon {
    width: 20px;
    margin-top: 2px;
    color: var(--vx-accent-strong);
    text-align: center;
}

.dashboard-customize-option small {
    display: block;
    color: var(--vx-muted);
    margin-top: 2px;
    font-size: 0.82rem;
}

/* Lista di riordino del cruscotto.
   Una riga per riquadro: maniglia, spunta, nome, frecce. La stessa lista dice
   due cose — se il riquadro c'è e dove sta — perché sullo schermo sono la
   stessa cosa, e tenerle in due schede separate avrebbe costretto a passare
   avanti e indietro per una scelta sola. */
.dashboard-riordino {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-riordino__voce {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    background: var(--vx-surface2);
    transition: border-color .15s, background .15s, opacity .15s;
}

.dashboard-riordino__voce:hover {
    border-color: var(--vx-accent);
}

/* Spento, non nascosto: chi ha tolto la spunta deve continuare a vedere dov'era
   la riga, altrimenti non può rimetterla al suo posto. */
.dashboard-riordino__voce.is-spenta {
    opacity: .55;
}

.dashboard-riordino__voce.is-trascinata {
    opacity: .4;
    border-style: dashed;
}

/* Maniglia disegnata con due colonne di puntini: nel sottoinsieme locale di
   Font Awesome non c'è nessuna icona «grip», e un'icona assente non dà errore,
   lascia un buco. */
.dashboard-riordino__maniglia {
    flex: 0 0 auto;
    width: 12px;
    height: 20px;
    cursor: grab;
    border-radius: 3px;
    background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
    background-size: 5px 5px;
    background-position: 1px 3px;
    color: var(--vx-faint);
}

.dashboard-riordino__voce:active .dashboard-riordino__maniglia { cursor: grabbing; }

.dashboard-riordino__scelta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.dashboard-riordino__icona {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: .85rem;
    color: var(--vx-accent-strong);
}

.dashboard-riordino__testo {
    min-width: 0;
    font-size: .86rem;
    line-height: 1.3;
}

.dashboard-riordino__testo strong {
    display: block;
    color: var(--vx-text);
    font-weight: 600;
}

.dashboard-riordino__testo small {
    display: block;
    color: var(--vx-muted);
    font-size: .76rem;
    margin-top: 1px;
}

.dashboard-riordino__gruppo {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--vx-surface3);
    color: var(--vx-muted);
    font-size: .7rem;
    letter-spacing: .02em;
}

.dashboard-riordino__frecce {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-riordino__freccia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--vx-border);
    border-radius: 6px;
    background: var(--vx-surface);
    color: var(--vx-text-soft);
    font-size: .68rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.dashboard-riordino__freccia:hover:not([disabled]) {
    background: var(--vx-accent);
    border-color: var(--vx-accent);
    color: var(--vx-on-fill);
}

.dashboard-riordino__freccia[disabled] {
    opacity: .35;
    cursor: default;
}

/* Elenco di regole sotto un campo: le linee guida della foto profilo, e
   qualunque altra istruzione che si legge una volta e poi si ignora. */
.vx-note-elenco {
    margin: 0 0 12px;
    padding-left: 18px;
    color: var(--vx-muted);
    font-size: .85rem;
    line-height: 1.5;
}

.vx-note-elenco li { margin-bottom: 2px; }

.dashboard-customize-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 0, 0, .62);
}

.dashboard-customize-modal[hidden] { display: none; }

.dashboard-customize-modal__panel {
    width: min(680px, 100%);
    max-height: min(88vh, 820px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius-lg);
    background: var(--vx-surface);
    color: var(--vx-text);
    box-shadow: var(--vx-shadow-lg);
}

.dashboard-customize-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.dashboard-customize-modal__head h3 { color: var(--vx-text); font-size: 1.12rem; }
.dashboard-customize-modal__intro { margin-bottom: 14px; color: var(--vx-muted); font-size: .86rem; }
.dashboard-customize-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--vx-radius-sm);
    background: transparent;
    color: var(--vx-muted);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.dashboard-customize-modal__close:hover {
    border-color: var(--vx-border);
    background: var(--vx-surface-hover);
    color: var(--vx-text);
}

.dashboard-customize-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--vx-border);
}

.dashboard-customize-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-modal-open { overflow: hidden; }
.dashboard-empty-custom__action { margin-top: 8px; }

.dashboard-empty-custom {
    background: var(--vx-surface);
    border-radius: 16px;
    padding: 40px 24px;
    box-shadow: var(--vx-shadow);
    text-align: center;
    color: var(--vx-muted);
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .dashboard-body {
        grid-template-columns: 1fr;
    }

    .actions-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 12px 16px 32px;
    }

    .welcome-card {
        padding: 18px 16px;
        margin-bottom: 16px;
    }

    .welcome-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .welcome-card-head .customize-btn {
        width: 100%;
        justify-content: center;
    }

    .welcome-card h2 {
        font-size: 1.2rem;
    }

    .welcome-card p {
        font-size: 0.92rem;
    }

    .dashboard-alerts {
        gap: 12px;
        margin-bottom: 16px;
    }

    .dashboard-alert {
        padding: 14px 16px;
    }

    .dashboard-body {
        gap: 16px;
    }

    .dashboard-panel {
        padding: 16px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-number {
        font-size: 1.35rem;
    }

    .dashboard-recent-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
    }

    .dashboard-recent-stato {
        white-space: normal;
    }

    .quick-actions {
        padding: 16px;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   DASHBOARD — blocchi dei moduli
   (era includes/dashboard-blocchi.css)
   ========================================================================== */
/* ==========================================================================
   Blocchi dashboard dichiarati dai moduli
   Estende includes/dashboard.css con i tipi lista, progresso, timeline e dati.
   ========================================================================== */

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-panel-link {
    font-size: .84rem;
    color: var(--vx-accent);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dashboard-panel-link:hover { text-decoration: underline; }
.dashboard-panel-link i { font-size: .72rem; }

.dashboard-section-title i { color: var(--vx-accent); margin-right: 6px; }

.dashboard-block-empty {
    margin: 0;
    padding: 14px 2px;
    color: var(--vx-muted);
    font-size: .9rem;
}

/* Negli elenchi a filo card il testo di cortesia segue il padding del pannello. */
.dashboard-panel-compact .dashboard-block-empty {
    padding: 0 22px 20px;
}

.stat-hint {
    font-size: .74rem;
    color: var(--vx-faint);
    margin-top: 2px;
}

/* ---------- Liste ---------- */
.dashboard-recent-main { min-width: 0; flex: 1; }
.dashboard-recent-main strong { display: block; color: var(--vx-text); font-size: .93rem; }
.dashboard-recent-main small { display: block; color: var(--vx-muted); font-size: .8rem; margin-top: 2px; }
.dashboard-recent-meta { color: var(--vx-faint) !important; font-size: .76rem !important; }

.dashboard-recent-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* I badge dei blocchi contengono importi e date: il maiuscolo li rende illeggibili. */
.dashboard-recent-stato {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-recent-stato--bozza { background: var(--vx-surface3); color: var(--vx-text-soft); }
.dashboard-recent-stato--inviata,
.dashboard-recent-stato--inviato,
.dashboard-recent-stato--proposto,
.dashboard-recent-stato--collaborazione { background: var(--vx-cat-collaborazione-soft); color: var(--vx-cat-collaborazione-text); }
.dashboard-recent-stato--approvata,
.dashboard-recent-stato--consegnata,
.dashboard-recent-stato--confermato,
.dashboard-recent-stato--attivo { background: var(--vx-success-soft); color: var(--vx-success); }
.dashboard-recent-stato--rifiutata,
.dashboard-recent-stato--scartata,
.dashboard-recent-stato--no_show { background: var(--vx-danger-soft); color: var(--vx-danger); }
.dashboard-recent-stato--scaduto,
.dashboard-recent-stato--mancata_consegna,
.dashboard-recent-stato--in_pausa { background: var(--vx-warning-soft); color: var(--vx-warning); }
.dashboard-recent-stato--pagata,
.dashboard-recent-stato--fatturato,
.dashboard-recent-stato--completato { background: var(--vx-accent2-soft); color: var(--vx-accent2); }
.dashboard-recent-stato--staffing { background: var(--vx-cat-staffing-soft); color: var(--vx-cat-staffing-text); }
.dashboard-recent-stato--evento { background: var(--vx-cat-evento-soft); color: var(--vx-cat-evento-text); }
.dashboard-recent-stato--aruba { background: var(--vx-cat-aruba-soft); color: var(--vx-cat-aruba-text); }
.dashboard-recent-stato--personale { background: var(--vx-cat-personale-soft); color: var(--vx-cat-personale-text); }
.dashboard-recent-stato--interno { background: var(--vx-cat-interno-soft); color: var(--vx-cat-interno-text); }
.dashboard-recent-stato--scadenza { background: var(--vx-cat-scadenza-soft); color: var(--vx-cat-scadenza-text); }
.dashboard-recent-stato--archiviato { background: var(--vx-surface3); color: var(--vx-muted); }

/* ---------- Progresso ---------- */
/* ==========================================================================
   Grafici del cruscotto
   Disegnati sul server in SVG, senza librerie (Regola 5.19). I colori arrivano
   sempre dai token: un esadecimale scritto qui resterebbe uguale nei due temi,
   e di notte un grafico con i colori del giorno è illeggibile.
   ========================================================================== */

/* Colore dell'evento su Google: pastiglie, non un menu a tendina.
   «Colore Google 7» non dice niente e il nome da solo nemmeno: qui il colore
   si vede. Gli esadecimali sono in `calendario_evento_colori_google()` e sono
   valori dell'API di Google, non token del tema — rappresentano come l'evento
   apparira' dentro Google, quindi non seguono il diurno/notturno. */
.vx-cal-colori {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vx-cal-colori__voce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 7px;
    border: 1px solid var(--vx-border);
    border-radius: 999px;
    background: var(--vx-surface2);
    cursor: pointer;
    font-size: .82rem;
    color: var(--vx-text-soft);
    transition: border-color .15s, background .15s;
}

.vx-cal-colori__voce:hover { border-color: var(--vx-accent); }

.vx-cal-colori__voce input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.vx-cal-colori__voce:has(input:checked) {
    border-color: var(--vx-accent);
    background: var(--vx-accent-soft);
    color: var(--vx-text);
    font-weight: 600;
}

/* Il contorno da tastiera va sulla pastiglia, perche' il radio vero e' fuori
   schermo e senza questo non si vedrebbe dove si e' arrivati con il TAB. */
.vx-cal-colori__voce:has(input:focus-visible) {
    outline: 2px solid var(--vx-accent);
    outline-offset: 2px;
}

.vx-cal-colori__pastiglia {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* «Come il calendario»: nessun colore proprio, e si vede che non ce l'ha. */
.vx-cal-colori__pastiglia--auto {
    background:
        linear-gradient(135deg, transparent 45%, var(--vx-muted) 45%, var(--vx-muted) 55%, transparent 55%),
        var(--vx-surface3);
}

/* Dove finisce l'evento: si legge prima delle opzioni, perche' e' la cosa che
   quelle opzioni non permettono di cambiare. */
.vx-cal-google-dove {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid var(--vx-accent-soft);
    border-radius: 10px;
    background: var(--vx-accent-soft);
    color: var(--vx-text-soft);
    font-size: .84rem;
    line-height: 1.45;
}

.vx-cal-google-dove i { margin-top: 2px; color: var(--vx-accent-strong); }
.vx-cal-google-dove strong { color: var(--vx-text); }

/* Poteri speciali di una tipologia utenza (users/user_types.php).
   Sulla scheda della tipologia, accanto al nome: chi rinomina deve vedere
   subito che cosa quella tipologia puo' fare. */
.type-poteri {
    /* `auto` incolla questo riquadro, e con lui la riga dei pulsanti, in fondo
       alla scheda: le schede affiancate restano allineate anche con descrizioni
       di lunghezza diversa. */
    margin: 14px 0 0;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px dashed var(--vx-border);
    border-radius: 10px;
    background: var(--vx-surface2);
}

.type-poteri__titolo {
    margin: 0 0 6px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vx-faint);
}

.type-poteri__voce {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--vx-text-soft);
    cursor: pointer;
}

.type-poteri__voce input { margin-top: 2px; flex: 0 0 auto; }

.type-poteri__voce strong {
    display: block;
    color: var(--vx-text);
    font-weight: 600;
}

.type-poteri__voce small {
    display: block;
    margin-top: 1px;
    color: var(--vx-muted);
    font-size: .74rem;
    line-height: 1.35;
}

/* Un pulsante spento deve sembrare spento, non solo rifiutare il clic. */
:where(.p-users-user-types) .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Pannello dei tempi: compare solo con `?tempi=1`, solo per l'amministrazione.
   Volutamente sobrio e in fondo alla pagina: e' uno strumento di misura, non
   una parte dell'interfaccia. */
.vx-tempi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 18px 0 4px;
    padding: 10px 14px;
    border: 1px dashed var(--vx-border);
    border-radius: 10px;
    background: var(--vx-surface2);
    color: var(--vx-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.vx-tempi strong {
    color: var(--vx-text);
    font-size: .82rem;
    width: 100%;
}

.vx-tempi b { color: var(--vx-text); }

/* ---------- Anelli percentuale ---------- */

.vx-gauge-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr));
    gap: 10px;
    padding: 4px 0 2px;
}

.vx-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    transition: border-color .2s, transform .2s, box-shadow .2s;
    min-width: 0;
}

a.vx-gauge:hover {
    border-color: var(--vx-accent);
    transform: translateY(-2px);
    box-shadow: var(--vx-shadow);
}

.vx-gauge__disco {
    position: relative;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
}

.vx-gauge__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vx-gauge__pista {
    stroke: var(--vx-surface3);
    stroke-width: 3.6;
}

/* L'arco e' lungo quanto la percentuale: la circonferenza di raggio 15,9155 e'
   esattamente 100, quindi `stroke-dasharray` prende la percentuale cosi' com'e'.
   Nessuna animazione di riempimento, per la stessa ragione delle colonne: una
   scheda in secondo piano la congelerebbe a zero e l'anello resterebbe vuoto. */
.vx-gauge__arco {
    stroke-width: 3.6;
}

.vx-gauge__valore {
    position: relative;
    z-index: 1;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vx-text);
    line-height: 1;
}

.vx-gauge__etichetta {
    font-size: .8rem;
    font-weight: 600;
    color: var(--vx-text-soft);
    line-height: 1.25;
    overflow-wrap: break-word;
    min-width: 0;
}

.vx-gauge__nota {
    font-size: .72rem;
    color: var(--vx-muted);
    line-height: 1.25;
}

/* Gradiente dell'arco: due fermate per anello, colorate dal tipo.
   `stop-color` accetta le variabili CSS, quindi i due temi funzionano da soli. */
.vx-gauge--blue   .vx-gauge__stop-a { stop-color: var(--vx-accent); }
.vx-gauge--blue   .vx-gauge__stop-b { stop-color: var(--vx-accent2); }
.vx-gauge--green  .vx-gauge__stop-a { stop-color: var(--vx-success); }
.vx-gauge--green  .vx-gauge__stop-b { stop-color: var(--vx-accent); }
.vx-gauge--orange .vx-gauge__stop-a { stop-color: var(--vx-warning); }
.vx-gauge--orange .vx-gauge__stop-b { stop-color: var(--vx-danger); }
.vx-gauge--red    .vx-gauge__stop-a { stop-color: var(--vx-danger); }
.vx-gauge--red    .vx-gauge__stop-b { stop-color: var(--vx-warning); }
.vx-gauge--purple .vx-gauge__stop-a { stop-color: var(--vx-accent2); }
.vx-gauge--purple .vx-gauge__stop-b { stop-color: var(--vx-accent); }
.vx-gauge--gray   .vx-gauge__stop-a { stop-color: var(--vx-muted); }
.vx-gauge--gray   .vx-gauge__stop-b { stop-color: var(--vx-faint); }

/* ---------- Grafico a colonne ----------
   In HTML e CSS, non in SVG: dentro un SVG che si adatta alla larghezza anche
   il testo scala, e le etichette dei mesi finivano a venti pixel. Vedi la nota
   in `dashboard_render_colonne()`. */

.vx-colonne {
    padding: 4px 0 0;
    /* Altezza della riga di etichette sotto le colonne: la usano sia la colonna
       dei valori sia la griglia, e devono restare d'accordo — se divergono, i
       numeri a sinistra non corrispondono piu' alle proprie linee. */
    --vx-colonne-etichette: 21px;
}

.vx-colonne__area {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 190px;
}

/* Colonna dei valori a sinistra, con le linee guida che ne partono. */
.vx-colonne__assi {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Lo spazio sotto è quello delle etichette dei gruppi: senza, i tre
       riferimenti verrebbero distribuiti anche sopra di esse e nessuno
       corrisponderebbe alla propria linea. */
    padding-bottom: var(--vx-colonne-etichette);
    min-width: 30px;
}

.vx-colonne__riga {
    position: relative;
    display: block;
    height: 0;
}

.vx-colonne__riga i {
    position: absolute;
    right: 0;
    top: -0.6em;
    font-style: normal;
    font-size: .72rem;
    color: var(--vx-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


.vx-colonne__gruppi {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

/* Le tre linee guida: disegnate come sfondo dell'area delle colonne invece che
   come elementi, cosi' non entrano nel flusso e non possono sfalsarsi rispetto
   ai numeri a sinistra. Tratteggiate con un gradiente ripetuto in orizzontale. */
.vx-colonne__gruppi::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: var(--vx-colonne-etichette);
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, var(--vx-border) 0 3px, transparent 3px 7px),
        repeating-linear-gradient(90deg, var(--vx-border) 0 3px, transparent 3px 7px),
        repeating-linear-gradient(90deg, var(--vx-border) 0 3px, transparent 3px 7px);
    background-size: 100% 1px, 100% 1px, 100% 1px;
    background-position: left top, left center, left bottom;
    background-repeat: no-repeat;
}

.vx-colonne__gruppo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/*
 * L'altezza qui e' esplicita, non `flex: 1`. L'altezza di una barra e' una
 * percentuale, e una percentuale si risolve solo contro un'altezza definita:
 * dentro un contenitore che prendeva la propria altezza dal flex tutte le
 * barre venivano alte zero — il grafico c'era, con ventiquattro barre
 * invisibili.
 */
.vx-colonne__barre {
    height: calc(100% - var(--vx-colonne-etichette));
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.vx-colonne__barra {
    flex: 1 1 0;
    max-width: 22px;
    min-width: 3px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--vx-accent), var(--vx-accent2));
    transition: opacity .18s;
}

/*
 * Qui c'era un'animazione di crescita, `transform: scaleY(0)` -> 1. E' stata
 * tolta: in una scheda aperta in secondo piano il browser congela le animazioni
 * a tempo zero, e la barra restava alta zero — il grafico c'era, con le colonne
 * invisibili, finche' non si passava sulla scheda. Far dipendere dall'animazione
 * il fatto che un dato si veda e' sbagliato in partenza; l'effetto valeva molto
 * meno del rischio.
 */

/* Al passaggio del mouse le altre si attenuano: con ventiquattro barre in un
   riquadro, indicarne una serve solo se le altre si tolgono di mezzo. */
.vx-colonne__gruppi:hover .vx-colonne__barra { opacity: .4; }
.vx-colonne__gruppi .vx-colonne__barra:hover { opacity: 1; }

.vx-colonne__barra--green  { background: linear-gradient(180deg, var(--vx-success), color-mix(in srgb, var(--vx-success) 35%, transparent)); }
.vx-colonne__barra--orange { background: linear-gradient(180deg, var(--vx-warning), color-mix(in srgb, var(--vx-warning) 35%, transparent)); }
.vx-colonne__barra--red    { background: linear-gradient(180deg, var(--vx-danger), color-mix(in srgb, var(--vx-danger) 35%, transparent)); }
.vx-colonne__barra--purple { background: linear-gradient(180deg, var(--vx-accent2), color-mix(in srgb, var(--vx-accent2) 35%, transparent)); }
.vx-colonne__barra--gray   { background: linear-gradient(180deg, var(--vx-muted), color-mix(in srgb, var(--vx-muted) 30%, transparent)); }
.vx-colonne__barra--s1     { background: linear-gradient(180deg, var(--vx-accent), var(--vx-accent2)); }
.vx-colonne__barra--s2     { background: linear-gradient(180deg, var(--vx-accent2), var(--vx-cat-personale)); }
.vx-colonne__barra--s3     { background: linear-gradient(180deg, var(--vx-info), var(--vx-accent)); }
.vx-colonne__barra--s4     { background: linear-gradient(180deg, var(--vx-cat-interno), var(--vx-info)); }

.vx-colonne__etichetta {
    flex: 0 0 auto;
    height: var(--vx-colonne-etichette);
    display: flex;
    align-items: center;
    font-size: .72rem;
    color: var(--vx-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vx-colonne__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 2px 0;
}

.vx-colonne__voce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--vx-muted);
}

.vx-colonne__voce i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--vx-accent);
}

.vx-colonne__voce--green i  { background: var(--vx-success); }
.vx-colonne__voce--orange i { background: var(--vx-warning); }
.vx-colonne__voce--red i    { background: var(--vx-danger); }
.vx-colonne__voce--purple i { background: var(--vx-accent2); }
.vx-colonne__voce--gray i   { background: var(--vx-muted); }
.vx-colonne__voce--s1 i     { background: var(--vx-accent); }
.vx-colonne__voce--s2 i     { background: var(--vx-accent2); }
.vx-colonne__voce--s3 i     { background: var(--vx-info); }
.vx-colonne__voce--s4 i     { background: var(--vx-cat-interno); }

@media (max-width: 700px) {
    .vx-colonne__area { height: 160px; }
    .vx-colonne__etichetta { font-size: .66rem; }
}

.dashboard-progress-list { display: grid; gap: 14px; }

.dashboard-progress-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 10px 12px;
    border: 1px solid var(--vx-surface3);
    border-radius: 10px;
    background: var(--vx-surface2);
    transition: border-color .15s;
}

a.dashboard-progress-item:hover { border-color: var(--vx-accent-soft); }

.dashboard-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: .9rem;
    color: var(--vx-text);
    margin-bottom: 7px;
}

.dashboard-progress-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-progress-head strong { font-variant-numeric: tabular-nums; }

.dashboard-progress-track {
    height: 10px;
    background: var(--vx-surface3);
    border-radius: 999px;
    overflow: hidden;
}

/* Riempimento sfumato: una barra a tinta piatta e alta sette pixel si legge
   come un bordo, non come una quantita'. I colori restano quelli dei token,
   cosi' la barra cambia da sola fra giorno e notte. */
.dashboard-progress-fill {
    height: 10px;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
    background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent2));
}

.dashboard-progress-fill--green  { background: linear-gradient(90deg, var(--vx-success), var(--vx-accent)); }
.dashboard-progress-fill--orange { background: linear-gradient(90deg, var(--vx-warning), var(--vx-danger)); }
.dashboard-progress-fill--red    { background: linear-gradient(90deg, var(--vx-danger), var(--vx-warning)); }
.dashboard-progress-fill--purple { background: linear-gradient(90deg, var(--vx-accent2), var(--vx-accent)); }
.dashboard-progress-fill--gray   { background: linear-gradient(90deg, var(--vx-muted), var(--vx-faint)); }

/* Colori di serie: servono a distinguere una riga dall'altra, non a dire se una
   riga e' buona o cattiva. Verde e rosso qui sarebbero una bugia — una voce di
   spesa non e' «un successo» ne' «un errore» (Regola 5.16). */
.dashboard-progress-fill--s1 { background: linear-gradient(90deg, var(--vx-accent), var(--vx-accent2)); }
.dashboard-progress-fill--s2 { background: linear-gradient(90deg, var(--vx-accent2), var(--vx-cat-personale)); }
.dashboard-progress-fill--s3 { background: linear-gradient(90deg, var(--vx-info), var(--vx-accent)); }
.dashboard-progress-fill--s4 { background: linear-gradient(90deg, var(--vx-cat-interno), var(--vx-info)); }

.dashboard-progress-item small {
    display: block;
    margin-top: 7px;
    color: var(--vx-muted);
    font-size: .8rem;
    line-height: 1.4;
}

/* ---------- Timeline ---------- */
.dashboard-timeline { list-style: none; margin: 0; padding: 0; font-size: .89rem; }

.dashboard-timeline li {
    padding: 9px 0 9px 16px;
    border-left: 2px solid var(--vx-surface3);
    position: relative;
    line-height: 1.5;
}

.dashboard-timeline li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vx-accent);
}

.dashboard-timeline time { display: block; color: var(--vx-faint); font-size: .76rem; }
.dashboard-timeline-tipo { color: var(--vx-text-soft); font-weight: 600; margin-right: 5px; }
.dashboard-timeline-tipo i { color: var(--vx-accent); margin-right: 3px; }

/* ---------- Dati chiave/valore ---------- */
.dashboard-kv {
    display: grid;
    grid-template-columns: minmax(140px, 40%) 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: .9rem;
}

.dashboard-kv dt { color: var(--vx-muted); }
.dashboard-kv dd { margin: 0; color: var(--vx-text); }

@media (max-width: 600px) {
    .dashboard-kv { grid-template-columns: 1fr; gap: 2px; }
    .dashboard-kv dd { margin-bottom: 10px; }
}

/* .vx-chart e .vx-anello* stanno nel kit UI (includes/ui/vx-ui.css): sono
   componenti condivisi, non blocchi di dashboard. Erano duplicati qui parola per
   parola e questo foglio, caricato dopo, vinceva: convertirne uno solo ai token
   avrebbe lasciato l'altro indietro. */

.dash-week {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 0 4px 8px;
}

.dash-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--vx-surface2);
    text-decoration: none;
    color: inherit;
}

.dash-week__day:hover { background: var(--vx-surface3); }

.dash-week__day--oggi {
    background: var(--vx-featured-bg);
    color: var(--vx-featured-text);
}

.dash-week__nome {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
}

.dash-week__num {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.dash-week__n {
    font-size: .72rem;
    opacity: .7;
}



/* ==========================================================================
   AVVISI
   (era includes/avvisi.css)
   ========================================================================== */
.avvisi-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.avvisi-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--vx-on-accent);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.avvisi-bell-btn:hover,
.avvisi-bell-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.28);
}

.avvisi-bell-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 20px;
}

.avvisi-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vx-danger);
    color: var(--vx-on-fill);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--vx-accent2);
    box-shadow: var(--vx-shadow-xs);
}

.avvisi-badge:empty,
.avvisi-badge[data-count="0"] {
    display: none;
}

.avvisi-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    background: var(--vx-surface);
    color: var(--vx-text);
    border-radius: 14px;
    box-shadow: var(--vx-shadow-lg);
    overflow: hidden;
    z-index: 1000;
}

.avvisi-panel.open {
    display: flex;
    flex-direction: column;
}

.avvisi-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vx-border);
    background: var(--vx-surface2);
}

.avvisi-panel-head strong {
    font-size: 0.95rem;
    color: var(--vx-accent-strong);
}

.avvisi-mark-all {
    border: none;
    background: none;
    color: var(--vx-accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.avvisi-mark-all:hover {
    text-decoration: underline;
}

.avvisi-list {
    overflow-y: auto;
    flex: 1 1 auto;
}

.avvisi-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vx-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.avvisi-item:hover {
    background: var(--vx-surface2);
    text-decoration: none;
}

.avvisi-item.unread {
    background: var(--vx-accent-soft);
}

.avvisi-item.unread:hover {
    background: var(--vx-surface-hover);
}

.avvisi-item-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--vx-text);
    margin-bottom: 4px;
}

.avvisi-item-title span.dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--vx-accent);
}

.avvisi-item.read .avvisi-item-title span.dot {
    display: none;
}

.avvisi-item-msg {
    font-size: 0.84rem;
    color: var(--vx-text-soft);
    line-height: 1.45;
    margin: 0;
}

.avvisi-item-time {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--vx-faint);
}

.avvisi-empty,
.avvisi-loading {
    padding: 28px 16px;
    text-align: center;
    color: var(--vx-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .avvisi-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 1190;
        -webkit-tap-highlight-color: transparent;
    }

    body.avvisi-panel-open .avvisi-backdrop {
        display: block;
    }

    .avvisi-panel {
        position: fixed !important;
        top: calc(var(--mv-header-height, 56px) + 10px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--mv-header-height, 56px) - 20px) !important;
        z-index: 1200 !important;
        color: var(--vx-text) !important;
        background: var(--vx-surface) !important;
        box-shadow: var(--vx-shadow-lg);
        border: 1px solid var(--vx-border);
    }

    .avvisi-panel-head {
        flex-wrap: wrap;
        padding: 16px;
        background: var(--vx-surface2);
    }

    .avvisi-panel-head strong {
        font-size: 1.05rem;
        color: var(--vx-accent-strong) !important;
    }

    .avvisi-mark-all {
        font-size: 0.88rem;
        color: var(--vx-accent-strong) !important;
        padding: 6px 0;
    }

    .avvisi-item {
        padding: 14px 16px;
        color: var(--vx-text) !important;
    }

    .avvisi-item-title {
        font-size: 0.98rem;
        color: var(--vx-text) !important;
    }

    .avvisi-item-msg {
        font-size: 0.92rem;
        color: var(--vx-text-soft) !important;
        line-height: 1.5;
    }

    .avvisi-item-time {
        font-size: 0.8rem;
        color: var(--vx-muted) !important;
    }

    .avvisi-empty,
    .avvisi-loading {
        color: var(--vx-muted) !important;
        font-size: 0.95rem;
        padding: 32px 16px;
    }
}

.dashboard-avvisi-card {
    border-left: 4px solid var(--vx-accent);
    margin-bottom: 20px;
}

.dashboard-avvisi-card h3 {
    margin: 0 0 12px;
    color: var(--vx-accent-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-avvisi-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-avvisi-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--vx-surface3);
}

.dashboard-avvisi-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-avvisi-list a {
    color: var(--vx-accent-strong);
    font-weight: 600;
    text-decoration: none;
}

.dashboard-avvisi-list a:hover {
    text-decoration: underline;
}

.dashboard-avvisi-list p {
    margin: 4px 0 0;
    color: var(--vx-text-soft);
    font-size: 0.92rem;
    line-height: 1.45;
}

.dashboard-avvisi-list small {
    color: var(--vx-faint);
    font-size: 0.8rem;
}


/* ==========================================================================
   COLLABORAZIONI
   (era collaborazioni/collaborazioni.css)
   ========================================================================== */
/* Form/dettaglio collaborazioni. Liste: tema condiviso spaziweb/admin.css (vx-*) */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.collab-wrap { max-width: 920px; margin: 0 auto; padding: 20px; box-sizing: border-box; }

.collab-wrap--wide { max-width: 1140px; }

.collab-lead { color: var(--vx-muted); margin: 8px 0 0; font-size: 0.92rem; line-height: 1.45; }

.page-title h1 i { color: var(--vx-accent); }

.collab-card { background: var(--vx-surface); border-radius: 12px; box-shadow: var(--vx-shadow); padding: 20px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--vx-surface3); }

.collab-card--list { padding: 0; }

.collab-card--list .collab-table-wrap { padding: 0; }

.collab-card--list .collab-table th:first-child,
.collab-card--list .collab-table td:first-child { padding-left: 20px; }

.collab-card--list .collab-table th:last-child,
.collab-card--list .collab-table td:last-child { padding-right: 20px; }

.collab-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--vx-muted);
}

.collab-empty i {
    display: block;
    font-size: 2rem;
    color: var(--vx-faint);
    margin-bottom: 12px;
}

.collab-empty p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

.collab-filters { margin-bottom: 16px; }

.collab-filters__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.collab-filters__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vx-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.collab-filters__title i { color: var(--vx-accent); }

.collab-filters__count { font-size: 0.82rem; color: var(--vx-muted); }

.collab-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.collab-filters-field--wide { grid-column: 1 / -1; }

@media (min-width: 720px) {
    .collab-filters-field--wide { grid-column: span 2; }
}

.collab-filters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.collab-table-wrap { overflow-x: auto; width: 100%; }

.btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--vx-gradient);
    border-color: var(--vx-accent-hover);
    color: var(--vx-on-accent);
    box-shadow: var(--vx-shadow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--vx-accent-hover) 0%, var(--vx-accent2) 100%);
    color: var(--vx-on-accent);
}

.btn-secondary {
    background: var(--vx-accent-soft);
    border-color: var(--vx-accent);
    color: var(--vx-accent-strong);
}

.btn-secondary:hover {
    background: var(--vx-accent-strong);
    border-color: var(--vx-accent-strong);
    color: var(--vx-on-fill);
}

.btn-sm {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 0.85rem;
}

.collab-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.collab-card h2 { font-size: 1.05rem; color: var(--vx-text); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.collab-card h2 i { color: var(--vx-accent); }

.collab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }

.collab-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.collab-field--span2 { grid-column: 1 / -1; }

/* Niente `overflow: hidden` qui.
   Il campo dentro e' largo il 100% del contenitore, quindi i due bordi
   coincidono: con overflow nascosto l'anello di focus — 3px disegnati FUORI dal
   bordo — veniva tagliato a destra, a sinistra e sotto, e restava visibile solo
   sopra. Cliccando dentro compariva una riga chiara storta attorno al campo,
   che sembrava un difetto di disegno. A tenere le colonne della griglia entro
   la loro larghezza basta `min-width: 0`, che e' la ragione per cui
   `overflow: hidden` era stato messo. */
.collab-field { margin-bottom: 0; min-width: 0; max-width: 100%; }

.collab-field > label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--vx-text-soft); }

.collab-field label .req { color: var(--vx-danger); }

.collab-field input, .collab-field select, .collab-field textarea {

    width: 100%; max-width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--vx-border); border-radius: 8px; box-sizing: border-box; font-size: 0.9375rem;

}

.collab-field input[type="date"],
.collab-field input[type="time"],
.collab-field input[type="datetime-local"],
.collab-field input[type="number"] {
    display: block;
    min-height: 44px;
}

.collab-field textarea { min-height: 80px; resize: vertical; }

.collab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.collab-actions .btn { flex: 0 1 auto; }

.collab-alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 0.92rem; line-height: 1.45; }

.collab-alert--ok { background: var(--vx-success-soft); color: var(--vx-success); border-left: 4px solid var(--vx-success); }

.collab-alert--err { background: var(--vx-danger-soft); color: var(--vx-danger); border-left: 4px solid var(--vx-danger); }

.collab-alert--info { background: var(--vx-info-soft); color: var(--vx-info); border-left: 4px solid var(--vx-info); }

.collab-alert--warn { background: var(--vx-warning-soft); color: var(--vx-warning); border-left: 4px solid var(--vx-warning); }

.collab-progress { height: 8px; background: var(--vx-surface3); border-radius: 4px; overflow: hidden; margin: 8px 0 4px; }

.collab-progress-bar { height: 100%; background: var(--vx-gradient); transition: width .3s; }

.collab-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.collab-table th, .collab-table td { padding: 10px 12px; border-bottom: 1px solid var(--vx-surface3); text-align: left; vertical-align: top; }

.collab-table th { color: var(--vx-accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; }

.collab-table a { color: var(--vx-accent); font-weight: 600; text-decoration: none; }

.collab-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }

.collab-badge--bozza { background: var(--vx-surface3); color: var(--vx-muted); }

.collab-badge--inviata { background: var(--vx-info-soft); color: var(--vx-info); }

.collab-badge--in_revisione { background: var(--vx-warning-soft); color: var(--vx-warning); }

.collab-badge--approvata { background: var(--vx-success-soft); color: var(--vx-success); }

.collab-badge--pagata { background: var(--vx-accent2-soft); color: var(--vx-accent2); }

.collab-badge--rifiutata { background: var(--vx-danger-soft); color: var(--vx-danger); }

/* Stati introdotti con i passaggi dopo la firma: senza queste righe il badge
   restava senza colore e sembrava un errore di caricamento. */
.collab-badge--firmata { background: var(--vx-info-soft); color: var(--vx-info); }

.collab-badge--rimborsi_inviati { background: var(--vx-warning-soft); color: var(--vx-warning); }

.collab-badge--chiusa { background: var(--vx-success-soft); color: var(--vx-success); }

/* «sei tu»: in gestione segnala le pratiche di cui sei anche il collaboratore. */
.collab-badge--mio { background: var(--vx-accent-soft); color: var(--vx-accent-strong); margin-left: 6px; }

.collab-checks { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

.collab-checks label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--vx-border);
    border-radius: 8px;
    background: var(--vx-surface2);
    margin: 0;
}

.collab-checks label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 0;
}

.collab-readonly { background: var(--vx-surface2); padding: 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; line-height: 1.5; word-break: break-word; }

.collab-readonly strong { color: var(--vx-text); }

.collab-hint { font-size: 0.88rem; color: var(--vx-muted); margin: 0 0 14px; line-height: 1.45; }

.collab-kv { display: grid; grid-template-columns: minmax(120px, 140px) 1fr; gap: 6px 12px; font-size: 0.9rem; }

.collab-kv dt { color: var(--vx-muted); margin: 0; }

.collab-kv dd { margin: 0; word-break: break-word; }

.collab-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }

.btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
}

.btn-primary { background: var(--vx-gradient); color: var(--vx-on-accent); }
.btn-secondary { background: var(--vx-accent-soft); border-color: var(--vx-accent-soft); color: var(--vx-accent-hover); }

.collab-rimborso-row { border: 1px solid var(--vx-border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--vx-surface2); }

.collab-rimborso-grid { align-items: end; }

.collab-rimborso-total { margin-top: 8px; font-size: 0.95rem; color: var(--vx-text); }

.collab-file-link { font-size: 0.85rem; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.collab-file-link a { color: var(--vx-accent); }

.collab-remove-file { font-size: 0.82rem; color: var(--vx-danger); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }

.collab-totale-box { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--vx-accent2-soft); border: 1px solid var(--vx-accent2-soft); display: grid; gap: 8px; font-size: 0.92rem; }

.collab-totale-box span { color: var(--vx-text-soft); }

.collab-totale-box__main { padding-top: 8px; border-top: 1px solid var(--vx-border); font-size: 1rem; }

.collab-rimborsi-readonly { margin: 0; padding: 0; list-style: none; }

.collab-rimborsi-readonly li { padding: 8px 0; border-bottom: 1px solid var(--vx-surface3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

.collab-rimborsi-readonly li:last-child { border-bottom: none; }

.collab-card--danger { border: 1px solid var(--vx-danger); }

.collab-signature-wrap { border: 2px dashed var(--vx-border-strong); border-radius: 10px; background: var(--vx-surface); overflow: hidden; }

.collab-signature-canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }

.collab-firma-preview { border: 1px solid var(--vx-border); border-radius: 10px; padding: 12px; background: var(--vx-surface2); max-width: 320px; }

.collab-firma-preview img { max-width: 100%; height: auto; display: block; }



@media (max-width: 768px) {

    .collab-wrap { padding: 12px 16px 28px; overflow-x: clip; }

    .collab-card { padding: 16px; border-radius: 12px; margin-bottom: 14px; }

    .collab-grid { grid-template-columns: 1fr; gap: 12px; }

    .collab-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .collab-field input[type="date"],
    .collab-field input[type="time"] {
        font-size: 16px;
        padding: 8px 10px;
    }

    .collab-kv { grid-template-columns: 1fr; gap: 2px 0; }

    .collab-kv dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; }

    .collab-kv dd { margin-bottom: 4px; }

    .collab-actions { flex-wrap: wrap; gap: 8px; }

    .collab-actions .btn { flex: 1 1 calc(50% - 4px); min-width: 120px; justify-content: center; }

    .collab-actions .btn:only-child { flex: 1 1 100%; }

    .collab-checks { gap: 8px; }

    .collab-checks label { font-size: 0.95rem; padding: 12px; }

    .collab-page-head { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }

    .collab-table--responsive thead { display: none; }

    .collab-table--responsive tbody tr {

        display: block; margin-bottom: 12px; background: var(--vx-surface); border: 1px solid var(--vx-border);

        border-radius: 10px; padding: 12px 14px; box-shadow: var(--vx-shadow-xs);

    }

    .collab-table--responsive tbody td {

        display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;

        padding: 6px 0; border: none; text-align: right;

    }

    .collab-table--responsive tbody td::before {

        content: attr(data-label);

        font-weight: 600; color: var(--vx-accent); font-size: 0.75rem; text-transform: uppercase;

        text-align: left; flex: 0 0 42%; max-width: 42%;

    }

    .collab-table--responsive tbody td:last-child { justify-content: flex-end; padding-top: 10px; }

    .collab-table--responsive tbody td:last-child::before { display: none; }

    .collab-rimborso-grid { grid-template-columns: 1fr !important; }

    .collab-rimborso-row { padding: 12px; }

    .collab-rimborso-remove { width: 100%; justify-content: center; }

    .collab-readonly { font-size: 0.88rem; padding: 12px; }

}



@media (max-width: 480px) {

    .collab-field input, .collab-field select, .collab-field textarea { font-size: 16px; }

}

/* Modal accettazione contratto */
body.collab-modal-open { overflow: hidden; }

.collab-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.collab-modal[hidden] { display: none !important; }

.collab-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.collab-modal__panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(92vh, 900px);
    background: var(--vx-surface);
    border-radius: 16px;
    box-shadow: var(--vx-shadow-lg);
    display: flex;
    flex-direction: column;
    padding: 20px 22px 18px;
}

.collab-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.collab-modal__head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--vx-text);
}

.collab-modal__close {
    border: none;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.collab-modal__intro {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--vx-muted);
    line-height: 1.45;
}

.collab-modal__scroll {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: 48vh;
    overflow: auto;
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    background: var(--vx-surface2);
    padding: 14px 16px;
}

.collab-modal__scroll-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--vx-text);
}

.collab-modal__scroll-body p { margin: 0 0 12px; }
.collab-modal__scroll-body ul { margin: 0 0 12px 18px; padding: 0; }

.collab-modal__loading {
    text-align: center;
    color: var(--vx-accent);
    padding: 24px 0;
}

.collab-modal__hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--vx-warning);
    background: var(--vx-warning-soft);
    border-radius: 8px;
    padding: 8px 10px;
}

.collab-modal__hint--ok {
    color: var(--vx-success);
    background: var(--vx-success-soft);
}

.collab-modal__accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
}

.collab-modal__accept input { margin-top: 3px; }

.collab-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .collab-modal { padding: 8px; }
    .collab-modal__panel { padding: 16px; max-height: 96vh; }
    .collab-modal__scroll { max-height: 52vh; }
}


/* ==========================================================================
   Percorso guidato: requisiti, prossimo passo, dati di fatturazione
   ========================================================================== */

.collab-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.collab-req {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--vx-surface3);
    background: var(--vx-surface2);
    font-size: 0.92rem;
    line-height: 1.45;
}

.collab-req i { margin-top: 2px; font-size: 1rem; flex-shrink: 0; }
.collab-req span { display: block; }
.collab-req strong { display: block; color: var(--vx-text); }
.collab-req small { display: block; color: var(--vx-muted); margin-top: 2px; }
.collab-req a { display: inline-block; margin-top: 4px; font-size: 0.86rem; }

.collab-req--ok { border-color: var(--vx-success); background: var(--vx-success-soft); }
.collab-req--ok i { color: var(--vx-success); }
.collab-req--warn { border-color: var(--vx-warning); background: var(--vx-warning-soft); }
.collab-req--warn i { color: var(--vx-warning); }
.collab-req--ko { border-color: var(--vx-danger); background: var(--vx-danger-soft); }
.collab-req--ko i { color: var(--vx-danger); }

.collab-passo { border-left: 4px solid var(--vx-accent); }
.collab-passo--ok { border-left-color: var(--vx-success); }
.collab-passo--warn { border-left-color: var(--vx-warning); }
.collab-passo--err { border-left-color: var(--vx-danger); }
.collab-passo--info { border-left-color: var(--vx-accent); }

.collab-passo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.collab-passo__head h2 { margin: 0; }

.collab-passo__attore {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--vx-surface3);
    color: var(--vx-text-soft);
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.collab-passo p { font-size: 0.94rem; color: var(--vx-text-soft); line-height: 1.5; margin: 10px 0 0; }
.collab-passo .btn { margin-top: 14px; }

.collab-passo__regime {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid var(--vx-surface3);
    font-size: 0.88rem !important;
    color: var(--vx-muted) !important;
}

.collab-passo__regime i { color: var(--vx-accent); margin-right: 4px; }

/* --------------------------------------------------------------------------
   Doppio ruolo: interruttore amministrazione / collaboratore
   Compare solo a chi, sulla stessa pratica, e' tutte e due le cose. La scheda
   mostra una faccia per volta e questo dice quale, senza far indovinare.
   -------------------------------------------------------------------------- */
.collab-ruolo { border-left: 4px solid var(--vx-accent-strong); }

.collab-ruolo__testo h2 { margin: 0; }

.collab-ruolo__testo p {
    margin: 8px 0 0;
    font-size: 0.94rem;
    color: var(--vx-text-soft);
    line-height: 1.5;
}

/* I due pulsanti sono .btn come tutti gli altri della pagina: le regole
   generali dei link `a:not(.btn)` sono molto piu' specifiche di qualsiasi
   classe nuova, e un pulsante inventato qui finirebbe con il testo del colore
   dello sfondo. Il ruolo attivo e' .btn-primary, l'altro .btn-secondary. */
.collab-ruolo__scelta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.collab-ruolo__turno {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--vx-surface3);
    font-size: 0.9rem;
    color: var(--vx-muted);
}

.collab-ruolo__turno i { color: var(--vx-accent-strong); margin-right: 4px; }

.collab-fatt-dati {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--vx-surface2);
    border: 1px solid var(--vx-border);
    border-radius: 10px;
}

.collab-fatt-dati h3 {
    font-size: 0.95rem;
    color: var(--vx-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collab-fatt-dati h3 i { color: var(--vx-accent); }
.collab-fatt-dati .collab-kv dd { display: flex; align-items: center; gap: 8px; }
.collab-copiabile { font-family: 'Segoe UI', monospace; }

.collab-copia {
    background: none;
    border: none;
    color: var(--vx-accent);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.85rem;
    border-radius: 4px;
}

.collab-copia:hover { background: var(--vx-surface3); }


/* ==========================================================================
   PROGETTI
   (era progetti/progetti.css)
   ========================================================================== */
/* Modulo Progetti — stili specifici (complementari a spaziweb/admin.css) */

/* Densita' degli elenchi a schede (clienti e progetti).
   Ogni scheda porta un nome e due etichette: con 260px di larghezza minima,
   18px di riempimento e 16px di distacco, tre righe di contenuto occupavano
   mezzo schermo e con venti clienti si scorreva a lungo per niente. Le misure
   qui sotto ne fanno stare quasi il doppio per riga, lasciando il bersaglio del
   clic ampio (Regola 5.13: 44px di altezza minima toccabile, qui superata). */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 10px;
    margin: 14px 0 8px 0;
}

.pg-card {
    display: block;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

a.pg-card:hover {
    box-shadow: var(--vx-shadow-lg);
    border-color: var(--vx-accent);
    transform: translateY(-2px);
}

.pg-card__title {
    font-size: .98rem;
    font-weight: 600;
    color: var(--vx-text);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 7px;
    /* Un nome lungo non deve allargare la colonna della griglia. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.pg-card__title i { color: var(--vx-accent); }

.pg-card__meta .pg-badge { margin-left: 6px; }

/* Le etichette e la data stanno sulla stessa riga finche' ci stanno: prima
   erano due paragrafi distinti e ogni scheda cresceva di una riga intera. */
.pg-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--vx-muted);
    margin: 0;
}

.pg-card__meta + .pg-card__meta { margin-top: 4px; }

.pg-card__meta .pg-badge { margin-left: 0; }

.pg-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
}

.pg-badge--count {
    background: var(--vx-accent);
    color: var(--vx-on-fill);
}

.pg-stato {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pg-stato--attivo { background: var(--vx-success-soft); color: var(--vx-success); }
.pg-stato--in_pausa { background: var(--vx-warning-soft); color: var(--vx-warning); }
.pg-stato--completato { background: var(--vx-info-soft); color: var(--vx-info); }
.pg-stato--archiviato { background: var(--vx-surface3); color: var(--vx-muted); }

.pg-form {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 22px;
    max-width: 760px;
}

.pg-field { margin-bottom: 16px; }
.pg-field label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 6px;
    color: var(--vx-text-soft);
}
.pg-field input[type="text"],
.pg-field input[type="date"],
.pg-field select,
.pg-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    background: var(--vx-surface);
}
.pg-field textarea { min-height: 90px; resize: vertical; }
.pg-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) { .pg-field-row { grid-template-columns: 1fr; } }

.pg-alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: .92rem;
}
.pg-alert--err { background: var(--vx-danger-soft); color: var(--vx-danger); border: 1px solid var(--vx-danger); }
.pg-alert--ok { background: var(--vx-success-soft); color: var(--vx-success); border: 1px solid var(--vx-success); }

.pg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.vx-btn--danger {
    background: var(--vx-danger);
    color: var(--vx-on-fill);
    border: none;
}
.vx-btn--danger:hover { background: var(--vx-danger); color: var(--vx-on-fill); }

.pg-kv { margin: 0; }
.pg-kv dt {
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--vx-muted);
    margin-top: 14px;
}
.pg-kv dt:first-child { margin-top: 0; }
.pg-kv dd {
    margin: 3px 0 0 0;
    font-size: .98rem;
    color: var(--vx-text);
}

.pg-events {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 18px;
    margin-top: 20px;
}
.pg-events__search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: .95rem;
}
.pg-events__list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--vx-border);
    border-radius: 10px;
}
.pg-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--vx-border);
    font-size: .9rem;
}
.pg-event-item:last-child { border-bottom: none; }
.pg-event-item input { width: 16px; height: 16px; }
.pg-event-item__meta { color: var(--vx-muted); font-size: .82rem; }


/* ==========================================================================
   INVENTARIO
   (era inventario/inventario.css)
   ========================================================================== */
/* Modulo Inventario — stili specifici (complementari a spaziweb/admin.css e progetti.css) */

/* Riepilogo statistiche */
.inv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin: 6px 0 22px 0;
}
.inv-stat {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.inv-stat__label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vx-muted);
    margin: 0 0 6px 0;
}
.inv-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vx-text);
    margin: 0;
}

/* Barra filtri */
.inv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.inv-filters .inv-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.inv-filters label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--vx-muted);
}
.inv-filters input,
.inv-filters select {
    padding: 9px 11px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    font-size: .92rem;
    font-family: inherit;
    background: var(--vx-surface);
    min-width: 160px;
}
.inv-filters .inv-filter--grow input { min-width: 240px; }

/* Stato badge (riusa lo stile a pillola) */
.inv-stato {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.inv-stato--operativo { background: var(--vx-success-soft); color: var(--vx-success); }
.inv-stato--in_riparazione { background: var(--vx-warning-soft); color: var(--vx-warning); }
.inv-stato--in_prestito { background: var(--vx-info-soft); color: var(--vx-info); }
.inv-stato--dismesso { background: var(--vx-surface3); color: var(--vx-muted); }
.inv-stato--smarrito { background: var(--vx-danger-soft); color: var(--vx-danger); }

/* Sezioni del form */
.inv-form-section {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 18px;
    max-width: 960px;
}
.inv-form-section > h2 {
    font-size: 1.02rem;
    margin: 0 0 14px 0;
    color: var(--vx-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.inv-form-section > h2 i { color: var(--vx-accent); }
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 16px;
}
.inv-grid .inv-field--wide { grid-column: 1 / -1; }
.inv-field label {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 5px;
    color: var(--vx-text-soft);
}
.inv-field input,
.inv-field select,
.inv-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--vx-border-strong);
    border-radius: 10px;
    font-size: .94rem;
    font-family: inherit;
    background: var(--vx-surface);
}
.inv-field textarea { min-height: 80px; resize: vertical; }
.inv-req { color: var(--vx-danger); }

/* Tabella responsiva */
.inv-table-codice { font-variant-numeric: tabular-nums; color: var(--vx-accent-strong); font-weight: 600; }


/* ==========================================================================
   DOCUMENTI
   (era documenti/documenti.css)
   ========================================================================== */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--vx-surface2); margin: 0; }
.doc-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }
.doc-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.doc-page-head h1 { color: var(--vx-text); font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.doc-page-head p { color: var(--vx-muted); margin: 8px 0 0; font-size: 0.92rem; }
.doc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-btn { padding: 10px 16px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.doc-btn-primary { background: var(--vx-gradient); color: var(--vx-on-accent); }
.doc-btn-secondary { background: var(--vx-surface3); color: var(--vx-text); }
.doc-btn-danger { background: var(--vx-danger-soft); color: var(--vx-danger); border: 1px solid var(--vx-danger); }
.doc-alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; }
.doc-alert--success { background: var(--vx-success-soft); color: var(--vx-success); border-left: 4px solid var(--vx-success); }
.doc-alert--error { background: var(--vx-danger-soft); color: var(--vx-danger); border-left: 4px solid var(--vx-danger); }
.doc-card { background: var(--vx-surface); border-radius: 15px; box-shadow: var(--vx-shadow); padding: 22px; margin-bottom: 20px; }
.doc-section-block { margin-bottom: 28px; }
.doc-section-head { margin-bottom: 14px; }
.doc-section-head h2 { margin: 0 0 6px; color: var(--vx-text); font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.doc-section-head p { margin: 0; color: var(--vx-muted); font-size: 0.9rem; line-height: 1.5; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doc-item { border: 1px solid var(--vx-border); border-radius: 12px; padding: 16px; background: var(--vx-surface2); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; }
.doc-item:hover { box-shadow: var(--vx-shadow); transform: translateY(-1px); }
.doc-item-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--vx-accent-soft); color: var(--vx-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.doc-item-title { font-weight: 700; color: var(--vx-text); margin: 0; font-size: 1rem; }
.doc-item-desc { color: var(--vx-muted); font-size: 0.85rem; margin: 0; line-height: 1.45; }
.doc-item-meta { color: var(--vx-faint); font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.doc-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.doc-item-actions a, .doc-item-actions button { font-size: 0.82rem; text-decoration: none; color: var(--vx-accent); background: none; border: none; cursor: pointer; padding: 0; }
.doc-item-actions a:hover, .doc-item-actions button:hover { text-decoration: underline; }
.doc-empty { color: var(--vx-faint); font-size: 0.92rem; margin: 0; }
.doc-form label { display: block; font-weight: 600; color: var(--vx-text-soft); margin-bottom: 6px; font-size: 0.9rem; }
.doc-form input[type=text], .doc-form input[type=number], .doc-form select, .doc-form textarea, .doc-form input[type=file] {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--vx-field-border); border-radius: 10px; font-size: 0.95rem; margin-bottom: 16px;
}
.doc-form textarea { min-height: 100px; resize: vertical; }
.doc-form small { display: block; color: var(--vx-faint); margin: -10px 0 16px; font-size: 0.82rem; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--vx-border); }
.doc-table th { color: var(--vx-accent); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .03em; }
.doc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.doc-tab { padding: 8px 14px; border-radius: 999px; background: var(--vx-surface3); color: var(--vx-text-soft); text-decoration: none; font-size: 0.88rem; }
.doc-tab.active, .doc-tab:hover { background: var(--vx-accent); color: var(--vx-on-fill); }
@media (max-width: 768px) {
    .doc-wrap { padding: 16px 12px 32px; }
    .doc-grid { grid-template-columns: 1fr; }
    .doc-check-list { grid-template-columns: 1fr; }
    .doc-perm-block { padding: 18px 14px; }
    .doc-table thead { display: none; }
    .doc-table tr { display: block; margin-bottom: 12px; border: 1px solid var(--vx-surface3); border-radius: 10px; padding: 8px; }
    .doc-table td { display: block; border: none; padding: 6px 8px; }
    .doc-table td::before { content: attr(data-label); font-weight: 700; color: var(--vx-accent); display: block; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 2px; }
}

.doc-perm-card { padding: 0; overflow: hidden; }
.doc-perm-block { padding: 24px 22px; border-bottom: 1px solid var(--vx-border); }
.doc-perm-block:last-child { border-bottom: none; }
.doc-perm-block h2 { margin: 0 0 8px; color: var(--vx-text); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.doc-perm-note { margin: 0 0 18px; color: var(--vx-muted); font-size: 0.9rem; line-height: 1.5; }
.doc-perm-subtitle { display: block; font-weight: 600; color: var(--vx-text-soft); margin: 8px 0 10px; font-size: 0.9rem; }
.doc-vis-radio { display: block; margin: 0 0 8px; font-weight: 500; color: var(--vx-text-soft); }
.doc-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 16px; }
.doc-check-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--vx-accent-soft); border-radius: 8px; font-size: 0.9rem; color: var(--vx-text); }
.doc-type-perms.is-hidden { display: none; }
.doc-perm-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.doc-save-msg { color: var(--vx-success); font-weight: 500; font-size: 0.9rem; }
.doc-save-msg.error { color: var(--vx-danger); }


/* ==========================================================================
   9-bis. COMPONENTI CONDIVISI CON NOME STORICO
   --------------------------------------------------------------------------
   Le pagine nate prima del kit UI usano .card, .container, .table, .alert,
   .page-header invece di .vx-box, .vx-table, .vx-alert. Ogni pagina se li era
   ridefiniti per conto suo: 26 versioni diverse di .btn, 19 di .card, 16 di
   .container. Il risultato era che ogni pagina aveva pulsanti leggermente
   diversi dalla precedente.

   Qui i nomi storici ricevono UNA definizione sola, allineata ai componenti
   vx-*. Le ridefinizioni nelle sezioni delle singole pagine sono state tolte.
   Non si aggiungono altri nomi storici: per il codice nuovo si usa il kit.
   ========================================================================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px;
    box-sizing: border-box;
    min-width: 0;
}

.card,
.page-header {
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-shadow);
    padding: 24px;
    margin-bottom: 20px;
    min-width: 0;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    min-width: 0;
}

.page-title h1 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--vx-text);
}

.page-title h1 i { color: var(--vx-accent); }

/* Le celle prendono bordi, spaziatura e colori dalla sezione 2. */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Avvisi con il nome storico: stesse coppie semantiche di .vx-alert. */
.alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin: 0 0 16px;
    border-left: 4px solid transparent;
    font-size: 0.92rem;
    line-height: 1.45;
}

.alert-success { background: var(--vx-success-soft); color: var(--vx-success); border-left-color: var(--vx-success); }
.alert-danger,
.alert-error { background: var(--vx-danger-soft); color: var(--vx-danger); border-left-color: var(--vx-danger); }
.alert-warning,
.alert-warn { background: var(--vx-warning-soft); color: var(--vx-warning); border-left-color: var(--vx-warning); }
.alert-info { background: var(--vx-info-soft); color: var(--vx-info); border-left-color: var(--vx-info); }


/* ==========================================================================
   10. PAGINE CON STILE PROPRIO
   Ogni blocco era un <style> dentro il PHP della pagina. E' agganciato alla
   classe del <body> con :where(), che ha specificita zero: le regole valgono
   quanto valevano prima, ma ora vivono in un file solo e stanno in cache.
   I nomi delle animazioni sono prefissati per pagina: senza prefisso, due
   @keyframes omonimi di pagine diverse si sovrascriverebbero.
   ========================================================================== */

/* ---- change_password.php — classe sul <body>: .p-change-password ---- */
body:where(.p-change-password) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-change-password) .change-password-container {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            margin: 20px;
        }:where(.p-change-password) .warning-box {
            background: var(--vx-warning-soft);
            border: 1px solid var(--vx-warning);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            color: var(--vx-warning);
        }:where(.p-change-password) .warning-box i {
            margin-right: 8px;
        }:where(.p-change-password) .form-group {
            margin-bottom: 20px;
        }:where(.p-change-password) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-change-password) .form-group input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }:where(.p-change-password) .form-group input[type="password"]:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-change-password) .password-requirements {
            background: var(--vx-surface2);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--vx-muted);
        }:where(.p-change-password) .password-requirements h4 {
            margin: 0 0 10px 0;
            color: var(--vx-text);
        }:where(.p-change-password) .password-requirements ul {
            margin: 0;
            padding-left: 20px;
        }:where(.p-change-password) .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }:where(.p-change-password) .loading {
            display: none;
            text-align: center;
            margin-top: 10px;
        }:where(.p-change-password) .spinner {
            border: 3px solid var(--vx-surface3);
            border-top: 3px solid var(--vx-accent);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: p-change-password-spin 1s linear infinite;
            display: inline-block;
        }
@keyframes p-change-password-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }/* ---- change_password_normal.php — classe sul <body>: .p-change-password-normal ---- */
body:where(.p-change-password-normal) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }:where(.p-change-password-normal) .change-password-container {
            background: var(--vx-surface);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            padding: 40px;
            text-align: center;
        }:where(.p-change-password-normal) .form-group {
            margin-bottom: 20px;
            text-align: left;
        }:where(.p-change-password-normal) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-change-password-normal) .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }:where(.p-change-password-normal) .form-group input:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-change-password-normal) .password-requirements {
            background: var(--vx-info-soft);
            border: 1px solid var(--vx-info);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: left;
            color: var(--vx-info);
        }:where(.p-change-password-normal) .password-requirements h4 {
            margin: 0 0 10px 0;
            color: var(--vx-info);
        }:where(.p-change-password-normal) .password-requirements ul {
            margin: 0;
            padding-left: 20px;
        }:where(.p-change-password-normal) .password-requirements li {
            margin-bottom: 5px;
        }
@media (max-width: 768px) {
:where(.p-change-password-normal) .container {
                padding: 20px 15px;
            }
:where(.p-change-password-normal) .change-password-container {
                padding: 30px 20px;
            }

        
}/* ---- dashboard.php — classe sul <body>: .p-dashboard ---- */
:where(.p-dashboard),
:where(.p-dashboard) * { margin: 0; padding: 0; box-sizing: border-box; }body:where(.p-dashboard) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-bg, var(--vx-surface3));
            min-height: 100vh;
        }/* ---- forgot_password.php — classe sul <body>: .p-forgot-password ---- */
body:where(.p-forgot-password) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-forgot-password) .forgot-container {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 500px;
            margin: 20px;
        }:where(.p-forgot-password) .info-box {
            background: var(--vx-info-soft);
            border: 1px solid var(--vx-info);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            color: var(--vx-info);
            font-size: 14px;
        }:where(.p-forgot-password) .info-box i {
            margin-right: 8px;
            color: var(--vx-info);
        }:where(.p-forgot-password) .warning-box {
            background: var(--vx-warning-soft);
            border: 1px solid var(--vx-warning);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            color: var(--vx-warning);
            font-size: 14px;
        }:where(.p-forgot-password) .warning-box i {
            margin-right: 8px;
            color: var(--vx-warning);
        }:where(.p-forgot-password) .form-group {
            margin-bottom: 20px;
        }:where(.p-forgot-password) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-forgot-password) .form-group input[type="text"],
:where(.p-forgot-password) .form-group input[type="email"] {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }:where(.p-forgot-password) .form-group input[type="text"]:focus,
:where(.p-forgot-password) .form-group input[type="email"]:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-forgot-password) .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }:where(.p-forgot-password) .back-link {
            text-align: center;
            margin-top: 20px;
        }:where(.p-forgot-password) .back-link a {
            color: var(--vx-accent);
            text-decoration: none;
            font-weight: 500;
        }:where(.p-forgot-password) .back-link a:hover {
            text-decoration: underline;
        }:where(.p-forgot-password) .loading {
            display: none;
            text-align: center;
            margin-top: 10px;
        }:where(.p-forgot-password) .spinner {
            border: 3px solid var(--vx-surface3);
            border-top: 3px solid var(--vx-accent);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: p-forgot-password-spin 1s linear infinite;
            display: inline-block;
        }
@keyframes p-forgot-password-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }/* ---- login.php — classe sul <body>: .p-login ---- */
:where(.p-login),
:where(.p-login) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-login) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }:where(.p-login) .login-container {
            background: var(--vx-surface);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 400px;
            position: relative;
        }:where(.p-login) .login-header {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 32px 28px;
            text-align: left;
            position: relative;
        }:where(.p-login) .login-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        }:where(.p-login) .login-header h1 {
            font-size: 1.65rem;
            margin: 0 0 4px 0;
            position: relative;
            z-index: 1;
            line-height: 1.1;
        }:where(.p-login) .login-brand {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 32px;
        }:where(.p-login) .login-brand-text {
            min-width: 0;
        }:where(.p-login) .login-brand-text p {
            margin: 0;
            opacity: 0.9;
            font-size: 0.95rem;
            position: relative;
            z-index: 1;
        }:where(.p-login) .login-logo {
            height: 92px;
            width: auto;
            max-width: 160px;
            flex-shrink: 0;
            display: block;
            object-fit: contain;
            object-position: left center;
        }:where(.p-login) .login-form {
            padding: 40px 30px;
        }:where(.p-login) .form-group {
            margin-bottom: 25px;
            position: relative;
        }:where(.p-login) .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--vx-text);
            font-weight: 500;
        }:where(.p-login) .input-wrapper {
            position: relative;
        }:where(.p-login) .form-group input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: var(--vx-surface2);
        }:where(.p-login) .form-group input:focus {
            outline: none;
            border-color: var(--vx-accent);
            background: var(--vx-surface);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }:where(.p-login) .input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--vx-muted);
            font-size: 18px;
        }:where(.p-login) .checkbox-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }:where(.p-login) .checkbox-wrapper input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            accent-color: var(--vx-accent);
        }:where(.p-login) .checkbox-wrapper label {
            margin: 0;
            font-size: 14px;
            color: var(--vx-muted);
        }:where(.p-login) .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }:where(.p-login) .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }:where(.p-login) .login-btn:active {
            transform: translateY(0);
        }:where(.p-login) .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }:where(.p-login) .login-btn:hover::before {
            left: 100%;
        }:where(.p-login) .forgot-password {
            text-align: center;
            margin-top: 20px;
        }:where(.p-login) .forgot-password a {
            color: var(--vx-accent);
            text-decoration: none;
            font-size: 14px;
        }:where(.p-login) .forgot-password a:hover {
            text-decoration: underline;
        }
@media (max-width: 480px) {
:where(.p-login) .login-container {
                margin: 10px;
                border-radius: 15px;
            }
:where(.p-login) .login-header {
                padding: 24px 20px;
            }
:where(.p-login) .login-header h1 {
                font-size: 1.35rem;
            }
:where(.p-login) .login-logo {
                height: 72px;
                max-width: 120px;
            }
:where(.p-login) .login-brand {
                gap: 22px;
            }
:where(.p-login) .login-brand-text p {
                font-size: 0.85rem;
            }
:where(.p-login) .login-form {
                padding: 30px 20px;
            }
:where(.p-login) .form-group input {
                padding: 12px 15px 12px 45px;
                font-size: 16px; 
            }

        
}
@keyframes p-login-fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }:where(.p-login) .login-container {
            animation: p-login-fadeInUp 0.6s ease-out;
        }:where(.p-login) .login-btn.loading {
            pointer-events: none;
            opacity: 0.7;
        }:where(.p-login) .login-btn.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid transparent;
            border-top: 2px solid var(--vx-surface);
            border-radius: 50%;
            animation: p-login-spin 1s linear infinite;
        }
@keyframes p-login-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* --- Sfondo animato della pagina di accesso --------------------------------
   A TUTTO SCHERMO, dietro il riquadro di accesso. Se in assets/login/ c'e' un
   filmato viene usato quello; altrimenti e' il vortice del marchio, disegnato
   in CSS: zero byte di rete e nessun problema di riproduzione automatica.

   Il movimento e' distribuito su tutta la superficie, NON concentrato al
   centro: il centro e' coperto dal riquadro di accesso, quindi li' non si
   vedrebbe niente. Per questo i vortici sono quattro, uno per angolo.

   Sei strati, dal fondo alla superficie:
     1. flusso      — macchie di luce che scorrono, il respiro di fondo
     2. raggi       — fasci diagonali che attraversano lo schermo
     3. aloni       — cinque masse sfocate ai bordi
     4. vortici x4  — scie e anelli ancorati ai quattro angoli
     5. particelle  — 34 punti sparsi che salgono con derive diverse
     6. velo        — scurisce quanto basta a tenere leggibile il riquadro
   ========================================================================== */
:where(.p-login) .login-sfondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--vx-gradient);
}

/* Il riquadro di accesso resta sopra lo sfondo. */
:where(.p-login) .login-container {
    position: relative;
    z-index: 1;
}

:where(.p-login) .login-sfondo__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1. Flusso: cinque macchie di luce sull'intera superficie. */
:where(.p-login) .login-sfondo__flusso {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(30% 38% at 14% 22%, rgba(255, 255, 255, .38), transparent 60%),
        radial-gradient(28% 34% at 84% 74%, rgba(255, 255, 255, .30), transparent 60%),
        radial-gradient(34% 30% at 66% 10%, rgba(255, 255, 255, .24), transparent 62%),
        radial-gradient(26% 32% at 22% 84%, rgba(255, 255, 255, .26), transparent 62%),
        radial-gradient(30% 26% at 92% 34%, rgba(255, 255, 255, .20), transparent 64%);
    animation: p-login-flusso 16s ease-in-out infinite alternate;
}

/* 2. Raggi: fasci diagonali che scorrono da un bordo all'altro. */
:where(.p-login) .login-sfondo__raggi {
    position: absolute;
    inset: -60%;
    background: repeating-linear-gradient(
        58deg,
        transparent 0 42px,
        rgba(255, 255, 255, .07) 42px 46px,
        transparent 46px 96px,
        rgba(255, 255, 255, .04) 96px 99px,
        transparent 99px 172px);
    animation: p-login-raggi 21s linear infinite;
}

/* 3. Aloni sfocati, tutti fuori dal centro. */
:where(.p-login) .login-sfondo__alone {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
}

:where(.p-login) .login-sfondo__alone--1 {
    width: 46vmax; height: 46vmax; top: -16vmax; left: -12vmax; opacity: .58;
    background: radial-gradient(circle, rgba(255, 255, 255, .62), transparent 68%);
    animation: p-login-vaga 14s ease-in-out infinite;
}

:where(.p-login) .login-sfondo__alone--2 {
    width: 40vmax; height: 40vmax; bottom: -15vmax; right: -10vmax; opacity: .50;
    background: radial-gradient(circle, rgba(255, 255, 255, .50), transparent 68%);
    animation: p-login-vaga 18s ease-in-out infinite reverse;
}

:where(.p-login) .login-sfondo__alone--3 {
    width: 32vmax; height: 32vmax; top: -10vmax; right: 6vmax; opacity: .44;
    background: radial-gradient(circle, rgba(255, 255, 255, .44), transparent 70%);
    animation: p-login-vaga 22s ease-in-out infinite;
}

:where(.p-login) .login-sfondo__alone--4 {
    width: 36vmax; height: 36vmax; bottom: -14vmax; left: 4vmax; opacity: .46;
    background: radial-gradient(circle, rgba(255, 255, 255, .46), transparent 70%);
    animation: p-login-vaga 26s ease-in-out infinite reverse;
}

:where(.p-login) .login-sfondo__alone--5 {
    width: 28vmax; height: 28vmax; top: 42%; right: -12vmax; opacity: .40;
    background: radial-gradient(circle, rgba(255, 255, 255, .40), transparent 70%);
    animation: p-login-vaga 19s ease-in-out infinite;
}

/* 4. Vortici: quattro gruppi ancorati agli angoli. Ogni gruppo e' centrato sul
   proprio punto con translate(-50%, -50%), cosi' le sue scie escono dallo
   schermo e gli archi visibili attraversano i bordi. */
:where(.p-login) .login-vortice {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

:where(.p-login) .login-vortice--a { left: 16%; top: 20%; }
:where(.p-login) .login-vortice--b { left: 86%; top: 80%; }
:where(.p-login) .login-vortice--c { left: 84%; top: 16%; }
:where(.p-login) .login-vortice--d { left: 14%; top: 86%; }

:where(.p-login) .login-vortice--a .login-vortice__anello:nth-of-type(3) { width: 60vmax; height: 60vmax; animation-duration: 27s; }
:where(.p-login) .login-vortice--a .login-vortice__anello:nth-of-type(4) { width: 38vmax; height: 38vmax; animation-duration: 17s; animation-direction: reverse; }
:where(.p-login) .login-vortice--b .login-vortice__anello:nth-of-type(3) { width: 54vmax; height: 54vmax; animation-duration: 24s; animation-direction: reverse; }
:where(.p-login) .login-vortice--b .login-vortice__anello:nth-of-type(4) { width: 32vmax; height: 32vmax; animation-duration: 14s; }
:where(.p-login) .login-vortice--c .login-vortice__anello:nth-of-type(3) { width: 38vmax; height: 38vmax; animation-duration: 16s; }
:where(.p-login) .login-vortice--c .login-vortice__anello:nth-of-type(4) { width: 22vmax; height: 22vmax; animation-duration: 10s; animation-direction: reverse; }
:where(.p-login) .login-vortice--d .login-vortice__anello:nth-of-type(3) { width: 42vmax; height: 42vmax; animation-duration: 20s; animation-direction: reverse; }
:where(.p-login) .login-vortice--d .login-vortice__anello:nth-of-type(4) { width: 26vmax; height: 26vmax; animation-duration: 11s; }

:where(.p-login) .login-vortice__anello {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, .50);
    border-right-color: rgba(255, 255, 255, .16);
    animation: p-login-vortice linear infinite;
}

/* Le scie sono spicchi di luce che girano: si vedono molto piu' di un bordo.
   La maschera le svuota al centro, trasformando il disco in un anello. */
:where(.p-login) .login-vortice__scia {
    position: absolute;
    border-radius: 50%;
    opacity: .5;
}

@supports (mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000)) {
    :where(.p-login) .login-vortice__scia {
        background: conic-gradient(from 0deg,
            transparent 0 52%,
            rgba(255, 255, 255, .05) 66%,
            rgba(255, 255, 255, .46) 79%,
            rgba(255, 255, 255, .02) 88%,
            transparent 100%);
        -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 64%);
                mask: radial-gradient(circle, transparent 0 62%, #000 64%);
        animation: p-login-vortice linear infinite;
    }

:where(.p-login) .login-vortice--a .login-vortice__scia:nth-of-type(1) { width: 72vmax; height: 72vmax; animation-duration: 34s; }
:where(.p-login) .login-vortice--a .login-vortice__scia:nth-of-type(2) { width: 50vmax; height: 50vmax; animation-duration: 23s; animation-direction: reverse; }
:where(.p-login) .login-vortice--b .login-vortice__scia:nth-of-type(1) { width: 64vmax; height: 64vmax; animation-duration: 29s; animation-direction: reverse; }
:where(.p-login) .login-vortice--b .login-vortice__scia:nth-of-type(2) { width: 44vmax; height: 44vmax; animation-duration: 19s; }
:where(.p-login) .login-vortice--c .login-vortice__scia:nth-of-type(1) { width: 46vmax; height: 46vmax; animation-duration: 21s; }
:where(.p-login) .login-vortice--c .login-vortice__scia:nth-of-type(2) { width: 30vmax; height: 30vmax; animation-duration: 13s; animation-direction: reverse; }
:where(.p-login) .login-vortice--d .login-vortice__scia:nth-of-type(1) { width: 52vmax; height: 52vmax; animation-duration: 26s; animation-direction: reverse; }
:where(.p-login) .login-vortice--d .login-vortice__scia:nth-of-type(2) { width: 34vmax; height: 34vmax; animation-duration: 15s; }
}

/* 5. Particelle: sparse su tutta l'area, ognuna con la sua deriva. */
:where(.p-login) .login-particelle {
    position: absolute;
    inset: 0;
}

:where(.p-login) .login-particelle span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    animation-name: p-login-sale;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

:where(.p-login) .login-particelle span:nth-child(1) { left: 32.7%; top: 10.8%; width: 4px; height: 4px; --deriva: -7.3vw; opacity: 0.67; animation-duration: 20.1s; animation-delay: -1.9s; }
:where(.p-login) .login-particelle span:nth-child(2) { left: 90.2%; top: 17.5%; width: 2px; height: 2px; --deriva: -7.4vw; opacity: 0.58; animation-duration: 10.5s; animation-delay: -10.9s; }
:where(.p-login) .login-particelle span:nth-child(3) { left: 82.0%; top: 8.0%; width: 2px; height: 2px; --deriva: 1.4vw; opacity: 0.57; animation-duration: 12.8s; animation-delay: -16.3s; }
:where(.p-login) .login-particelle span:nth-child(4) { left: 96.7%; top: -0.1%; width: 2px; height: 2px; --deriva: 0.7vw; opacity: 0.66; animation-duration: 23.6s; animation-delay: -7.5s; }
:where(.p-login) .login-particelle span:nth-child(5) { left: 55.9%; top: 66.6%; width: 2px; height: 2px; --deriva: -2.3vw; opacity: 0.65; animation-duration: 10.8s; animation-delay: -14.9s; }
:where(.p-login) .login-particelle span:nth-child(6) { left: 7.2%; top: 1.3%; width: 3px; height: 3px; --deriva: 5.0vw; opacity: 0.61; animation-duration: 12.5s; animation-delay: -17.7s; }
:where(.p-login) .login-particelle span:nth-child(7) { left: 91.5%; top: 33.0%; width: 2px; height: 2px; --deriva: -7.5vw; opacity: 0.52; animation-duration: 13.2s; animation-delay: -4.7s; }
:where(.p-login) .login-particelle span:nth-child(8) { left: 49.5%; top: 31.1%; width: 2px; height: 2px; --deriva: -6.9vw; opacity: 0.58; animation-duration: 16.6s; animation-delay: -15.8s; }
:where(.p-login) .login-particelle span:nth-child(9) { left: 75.2%; top: 11.0%; width: 5px; height: 5px; --deriva: -7.6vw; opacity: 0.66; animation-duration: 17.3s; animation-delay: -1.0s; }
:where(.p-login) .login-particelle span:nth-child(10) { left: 78.3%; top: 80.9%; width: 3px; height: 3px; --deriva: 1.4vw; opacity: 0.6; animation-duration: 14.8s; animation-delay: -9.1s; }
:where(.p-login) .login-particelle span:nth-child(11) { left: 83.3%; top: 94.2%; width: 2px; height: 2px; --deriva: 4.2vw; opacity: 0.52; animation-duration: 17.1s; animation-delay: -17.3s; }
:where(.p-login) .login-particelle span:nth-child(12) { left: 57.6%; top: 66.5%; width: 5px; height: 5px; --deriva: -2.8vw; opacity: 0.87; animation-duration: 16.6s; animation-delay: -18.6s; }
:where(.p-login) .login-particelle span:nth-child(13) { left: 35.8%; top: 59.1%; width: 3px; height: 3px; --deriva: -6.7vw; opacity: 0.49; animation-duration: 17.4s; animation-delay: -5.7s; }
:where(.p-login) .login-particelle span:nth-child(14) { left: 39.3%; top: 86.5%; width: 4px; height: 4px; --deriva: -4.0vw; opacity: 0.43; animation-duration: 10.4s; animation-delay: -11.7s; }
:where(.p-login) .login-particelle span:nth-child(15) { left: 43.2%; top: 52.8%; width: 5px; height: 5px; --deriva: 6.9vw; opacity: 0.88; animation-duration: 21.0s; animation-delay: -25.6s; }
:where(.p-login) .login-particelle span:nth-child(16) { left: 15.8%; top: 13.5%; width: 3px; height: 3px; --deriva: 6.0vw; opacity: 0.45; animation-duration: 12.9s; animation-delay: -6.1s; }
:where(.p-login) .login-particelle span:nth-child(17) { left: 28.6%; top: 10.3%; width: 3px; height: 3px; --deriva: 8.2vw; opacity: 0.73; animation-duration: 18.1s; animation-delay: -15.9s; }
:where(.p-login) .login-particelle span:nth-child(18) { left: 51.5%; top: 59.8%; width: 5px; height: 5px; --deriva: 5.4vw; opacity: 0.57; animation-duration: 20.5s; animation-delay: -1.4s; }
:where(.p-login) .login-particelle span:nth-child(19) { left: 40.1%; top: 5.9%; width: 2px; height: 2px; --deriva: 8.7vw; opacity: 0.59; animation-duration: 19.8s; animation-delay: -1.6s; }
:where(.p-login) .login-particelle span:nth-child(20) { left: 11.8%; top: 58.1%; width: 4px; height: 4px; --deriva: -7.2vw; opacity: 0.55; animation-duration: 10.7s; animation-delay: -14.7s; }
:where(.p-login) .login-particelle span:nth-child(21) { left: 3.5%; top: 86.8%; width: 3px; height: 3px; --deriva: 8.2vw; opacity: 0.68; animation-duration: 19.4s; animation-delay: -3.9s; }
:where(.p-login) .login-particelle span:nth-child(22) { left: 47.5%; top: 7.1%; width: 3px; height: 3px; --deriva: -0.3vw; opacity: 0.4; animation-duration: 17.3s; animation-delay: -25.4s; }
:where(.p-login) .login-particelle span:nth-child(23) { left: 11.0%; top: 31.0%; width: 2px; height: 2px; --deriva: 0.3vw; opacity: 0.46; animation-duration: 13.5s; animation-delay: -21.6s; }
:where(.p-login) .login-particelle span:nth-child(24) { left: 94.3%; top: 33.0%; width: 4px; height: 4px; --deriva: -3.6vw; opacity: 0.7; animation-duration: 20.7s; animation-delay: -23.8s; }
:where(.p-login) .login-particelle span:nth-child(25) { left: 9.9%; top: 83.8%; width: 3px; height: 3px; --deriva: 4.9vw; opacity: 0.64; animation-duration: 17.8s; animation-delay: -23.6s; }
:where(.p-login) .login-particelle span:nth-child(26) { left: 77.3%; top: 29.6%; width: 2px; height: 2px; --deriva: 5.5vw; opacity: 0.8; animation-duration: 12.8s; animation-delay: -21.1s; }
:where(.p-login) .login-particelle span:nth-child(27) { left: 73.5%; top: 18.8%; width: 2px; height: 2px; --deriva: 8.8vw; opacity: 0.78; animation-duration: 17.8s; animation-delay: -9.2s; }
:where(.p-login) .login-particelle span:nth-child(28) { left: 47.3%; top: 15.3%; width: 5px; height: 5px; --deriva: 8.8vw; opacity: 0.88; animation-duration: 19.3s; animation-delay: -9.0s; }
:where(.p-login) .login-particelle span:nth-child(29) { left: 36.7%; top: 18.1%; width: 2px; height: 2px; --deriva: -0.3vw; opacity: 0.89; animation-duration: 12.9s; animation-delay: -5.1s; }
:where(.p-login) .login-particelle span:nth-child(30) { left: 60.8%; top: -4.8%; width: 5px; height: 5px; --deriva: -7.5vw; opacity: 0.71; animation-duration: 24.5s; animation-delay: -8.9s; }
:where(.p-login) .login-particelle span:nth-child(31) { left: 90.2%; top: 77.1%; width: 2px; height: 2px; --deriva: -1.2vw; opacity: 0.7; animation-duration: 21.8s; animation-delay: -12.4s; }
:where(.p-login) .login-particelle span:nth-child(32) { left: 9.5%; top: 94.3%; width: 5px; height: 5px; --deriva: 8.0vw; opacity: 0.75; animation-duration: 21.3s; animation-delay: -12.0s; }
:where(.p-login) .login-particelle span:nth-child(33) { left: 17.7%; top: 8.3%; width: 5px; height: 5px; --deriva: -6.4vw; opacity: 0.8; animation-duration: 11.6s; animation-delay: -23.5s; }
:where(.p-login) .login-particelle span:nth-child(34) { left: 97.1%; top: 64.0%; width: 2px; height: 2px; --deriva: -8.6vw; opacity: 0.79; animation-duration: 15.0s; animation-delay: -14.3s; }

/* 6. Il velo sta sopra tutti gli strati: e' l'ultimo figlio di .login-sfondo.
   Piu' chiaro ai bordi, cosi' il movimento resta visibile, e piu' scuro al
   centro, dove sta il riquadro. */
:where(.p-login) .login-sfondo__velo {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 46% 52% at 50% 48%,
        rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .10) 100%);
}

@keyframes p-login-vortice {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes p-login-flusso {
    0%   { transform: translate3d(-5%, -4%, 0) scale(1);    }
    50%  { transform: translate3d(4%, 5%, 0)   scale(1.14); }
    100% { transform: translate3d(6%, -3%, 0)  scale(1.05); }
}

@keyframes p-login-raggi {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 172px, 0); }
}

@keyframes p-login-vaga {
    0%, 100% { transform: translate3d(0, 0, 0)           scale(1);    }
    33%      { transform: translate3d(9vmax, 6vmax, 0)   scale(1.18); }
    66%      { transform: translate3d(-7vmax, 9vmax, 0)  scale(.88);  }
}

@keyframes p-login-sale {
    0%   { transform: translate3d(0, 8vh, 0);                    opacity: 0; }
    10%  {                                                        opacity: 1; }
    90%  {                                                        opacity: 1; }
    100% { transform: translate3d(var(--deriva, 0), -108vh, 0);   opacity: 0; }
}

/* Chi ha disattivato le animazioni di sistema vede uno sfondo fermo. */
@media (prefers-reduced-motion: reduce) {
    :where(.p-login) .login-sfondo__flusso,
    :where(.p-login) .login-sfondo__raggi,
    :where(.p-login) .login-sfondo__alone,
    :where(.p-login) .login-vortice__anello,
    :where(.p-login) .login-vortice__scia,
    :where(.p-login) .login-particelle span { animation: none; }
    :where(.p-login) .login-particelle,
    :where(.p-login) .login-sfondo__raggi { display: none; }
    :where(.p-login) .login-sfondo__video { display: none; }
}

/* Su schermi piccoli si alleggerisce: meno strati, meno lavoro per la GPU. */
@media (max-width: 600px) {
    :where(.p-login) .login-sfondo__raggi { opacity: .5; }
    :where(.p-login) .login-vortice--c,
    :where(.p-login) .login-vortice--d { display: none; }
    :where(.p-login) .login-particelle span:nth-child(n+19) { display: none; }
}

:where(.p-login) .login-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--vx-accent-strong);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    text-decoration: none;
}

:where(.p-login) .login-link-btn:hover { text-decoration: underline; }

/* ---- login_history.php — classe sul <body>: .p-login-history ---- */
:where(.p-login-history),
:where(.p-login-history) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-login-history) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-login-history) .filters {
            background: var(--vx-surface2);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid var(--vx-accent);
        }:where(.p-login-history) .filters h3 {
            margin-bottom: 15px;
            color: var(--vx-text);
        }:where(.p-login-history) .filter-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }:where(.p-login-history) .filter-group {
            display: flex;
            flex-direction: column;
        }:where(.p-login-history) .filter-group label {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--vx-text-soft);
        }:where(.p-login-history) .filter-group input,
:where(.p-login-history) .filter-group select {
            padding: 8px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 6px;
            font-size: 14px;
        }:where(.p-login-history) .filter-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }:where(.p-login-history) .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }:where(.p-login-history) .status-success {
            background: var(--vx-success-soft);
            color: var(--vx-success);
        }:where(.p-login-history) .status-failed {
            background: var(--vx-danger-soft);
            color: var(--vx-danger);
        }:where(.p-login-history) .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }:where(.p-login-history) .pagination a,
:where(.p-login-history) .pagination span {
            padding: 8px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 4px;
            text-decoration: none;
            color: var(--vx-text);
        }:where(.p-login-history) .pagination a:hover {
            background: var(--vx-surface2);
        }:where(.p-login-history) .pagination .current {
            background: var(--vx-accent);
            color: var(--vx-on-fill);
            border-color: var(--vx-accent);
        }:where(.p-login-history) .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }:where(.p-login-history) .modal-content {
            background-color: var(--vx-surface);
            margin: 5% auto;
            padding: 20px;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }:where(.p-login-history) .close {
            color: var(--vx-faint);
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }:where(.p-login-history) .close:hover { color: var(--vx-text); }:where(.p-login-history) .access-card {
            display: none;
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-left: 4px solid var(--vx-accent);
        }:where(.p-login-history) .access-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }:where(.p-login-history) .access-card-title {
            font-weight: bold;
            color: var(--vx-text);
            font-size: 16px;
        }:where(.p-login-history) .access-card-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            font-size: 14px;
            color: var(--vx-muted);
        }:where(.p-login-history) .access-card-detail {
            display: flex;
            flex-direction: column;
        }:where(.p-login-history) .access-card-detail strong {
            color: var(--vx-text);
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 2px;
        }
@media (max-width: 768px) {
:where(.p-login-history) .header-content {
                flex-wrap: wrap;
                gap: 10px;
                max-width: 100%;
                padding: 0 12px;
            }
:where(.p-login-history) .header-actions { flex-wrap: wrap; justify-content: center; }
:where(.p-login-history) .user-info { flex-wrap: wrap; justify-content: center; }
:where(.p-login-history) .container { padding: 12px; }
:where(.p-login-history) .table-container {
                display: none;
            }
:where(.p-login-history) .cards-container {
                display: block;
            }
:where(.p-login-history) .access-card {
                display: block;
            }
:where(.p-login-history) .access-card-details {
                grid-template-columns: 1fr;
            }
:where(.p-login-history) .filter-row {
                grid-template-columns: 1fr;
            }

        
}
@media (min-width: 769px) {
:where(.p-login-history) .cards-container {
                display: none;
            }
:where(.p-login-history) .table-container {
                display: block;
            }

        
}/* ---- mfa_manage.php — classe sul <body>: .p-mfa-manage ---- */
:where(.p-mfa-manage),
:where(.p-mfa-manage) * { margin: 0; padding: 0; box-sizing: border-box; }body:where(.p-mfa-manage) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }:where(.p-mfa-manage) .login-container {
            background: var(--vx-surface);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,.1);
            overflow: hidden;
            width: 100%;
            max-width: 440px;
        }:where(.p-mfa-manage) .login-header {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 28px;
        }:where(.p-mfa-manage) .login-brand { display: flex; align-items: center; gap: 24px; }:where(.p-mfa-manage) .login-logo { height: 72px; width: auto; object-fit: contain; }:where(.p-mfa-manage) .login-brand-text h1 { font-size: 1.5rem; margin: 0 0 4px; }:where(.p-mfa-manage) .login-brand-text p { margin: 0; opacity: .9; font-size: .95rem; }:where(.p-mfa-manage) .login-form { padding: 28px 28px 32px; }:where(.p-mfa-manage) .mfa-intro { color: var(--vx-text-soft); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }:where(.p-mfa-manage) .choice {
            display: block;
            width: 100%;
            text-align: left;
            padding: 14px 16px;
            margin-bottom: 12px;
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            background: var(--vx-surface2);
            color: var(--vx-text);
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }:where(.p-mfa-manage) .choice:hover { border-color: var(--vx-accent); background: var(--vx-surface); }:where(.p-mfa-manage) .form-group { margin-bottom: 18px; }:where(.p-mfa-manage) .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--vx-text); }:where(.p-mfa-manage) .form-group input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            font-size: 16px;
            background: var(--vx-surface2);
            letter-spacing: .15em;
            text-align: center;
        }:where(.p-mfa-manage) .login-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 12px;
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
        }:where(.p-mfa-manage) .alert-ok { background: var(--vx-success-soft); color: var(--vx-success); border: 1px solid var(--vx-success); }:where(.p-mfa-manage) .back { display: inline-block; margin-top: 14px; color: var(--vx-accent); font-size: 14px; }/* ---- mfa_setup.php — classe sul <body>: .p-mfa-setup ---- */
:where(.p-mfa-setup),
:where(.p-mfa-setup) * { margin: 0; padding: 0; box-sizing: border-box; }body:where(.p-mfa-setup) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }:where(.p-mfa-setup) .login-container {
            background: var(--vx-surface);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 440px;
        }:where(.p-mfa-setup) .login-header {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 32px 28px;
            text-align: left;
            position: relative;
        }:where(.p-mfa-setup) .login-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        }:where(.p-mfa-setup) .login-brand {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 32px;
        }:where(.p-mfa-setup) .login-brand-text h1 {
            font-size: 1.65rem;
            margin: 0 0 4px 0;
            line-height: 1.1;
        }:where(.p-mfa-setup) .login-brand-text p {
            margin: 0;
            opacity: 0.9;
            font-size: 0.95rem;
        }:where(.p-mfa-setup) .login-logo {
            height: 92px;
            width: auto;
            max-width: 160px;
            flex-shrink: 0;
            display: block;
            object-fit: contain;
        }:where(.p-mfa-setup) .login-form { padding: 32px 30px 36px; }:where(.p-mfa-setup) .mfa-intro {
            color: var(--vx-text-soft);
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 18px;
        }:where(.p-mfa-setup) .mfa-steps {
            margin: 0 0 20px 1.1em;
            padding: 0;
            color: var(--vx-text-soft);
            font-size: 13.5px;
            line-height: 1.55;
        }:where(.p-mfa-setup) #mfaQr {
            width: 200px;
            height: 200px;
            margin: 0 auto 18px;
            background: var(--vx-surface);
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-mfa-setup) #mfaQr img,
:where(.p-mfa-setup) #mfaQr canvas { display: block; margin: 0 auto; }:where(.p-mfa-setup) .secret-box {
            background: var(--vx-surface2);
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 22px;
            font-size: 13px;
            color: var(--vx-text);
        }:where(.p-mfa-setup) .secret-box code {
            display: block;
            margin-top: 6px;
            font-family: ui-monospace, Consolas, monospace;
            letter-spacing: 0.04em;
            word-break: break-all;
            font-size: 13px;
            color: var(--vx-accent2);
        }:where(.p-mfa-setup) .form-group { margin-bottom: 22px; }:where(.p-mfa-setup) .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--vx-text);
            font-weight: 500;
        }:where(.p-mfa-setup) .input-wrapper { position: relative; }:where(.p-mfa-setup) .form-group input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            font-size: 16px;
            letter-spacing: 0.2em;
            text-align: center;
            background: var(--vx-surface2);
            transition: all 0.3s ease;
        }:where(.p-mfa-setup) .form-group input:focus {
            outline: none;
            border-color: var(--vx-accent);
            background: var(--vx-surface);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }:where(.p-mfa-setup) .input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--vx-muted);
            font-size: 18px;
        }:where(.p-mfa-setup) .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }:where(.p-mfa-setup) .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }
@media (max-width: 480px) {
:where(.p-mfa-setup) .login-brand { gap: 16px; }
:where(.p-mfa-setup) .login-logo { height: 72px; }

        
}/* ---- mfa_verify.php — classe sul <body>: .p-mfa-verify ---- */
:where(.p-mfa-verify),
:where(.p-mfa-verify) * { margin: 0; padding: 0; box-sizing: border-box; }body:where(.p-mfa-verify) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }:where(.p-mfa-verify) .login-container {
            background: var(--vx-surface);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 400px;
        }:where(.p-mfa-verify) .login-header {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 32px 28px;
            position: relative;
        }:where(.p-mfa-verify) .login-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        }:where(.p-mfa-verify) .login-brand {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 32px;
        }:where(.p-mfa-verify) .login-brand-text h1 {
            font-size: 1.65rem;
            margin: 0 0 4px 0;
            line-height: 1.1;
        }:where(.p-mfa-verify) .login-brand-text p { margin: 0; opacity: 0.9; font-size: 0.95rem; }:where(.p-mfa-verify) .login-logo {
            height: 92px;
            width: auto;
            max-width: 160px;
            display: block;
            object-fit: contain;
        }:where(.p-mfa-verify) .login-form { padding: 40px 30px; }:where(.p-mfa-verify) .mfa-intro {
            color: var(--vx-text-soft);
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 22px;
        }:where(.p-mfa-verify) .form-group { margin-bottom: 25px; }:where(.p-mfa-verify) .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--vx-text);
            font-weight: 500;
        }:where(.p-mfa-verify) .input-wrapper { position: relative; }:where(.p-mfa-verify) .form-group input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid var(--vx-border);
            border-radius: 12px;
            font-size: 18px;
            letter-spacing: 0.25em;
            text-align: center;
            background: var(--vx-surface2);
            transition: all 0.3s ease;
        }:where(.p-mfa-verify) .form-group input:focus {
            outline: none;
            border-color: var(--vx-accent);
            background: var(--vx-surface);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }:where(.p-mfa-verify) .input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--vx-muted);
            font-size: 18px;
        }:where(.p-mfa-verify) .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }:where(.p-mfa-verify) .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }/* ---- my_login_history.php — classe sul <body>: .p-my-login-history ---- */
:where(.p-my-login-history),
:where(.p-my-login-history) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-my-login-history) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-my-login-history) .filters {
            background: var(--vx-surface2);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid var(--vx-accent);
        }:where(.p-my-login-history) .filters h3 {
            margin-bottom: 15px;
            color: var(--vx-text);
        }:where(.p-my-login-history) .filter-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }:where(.p-my-login-history) .filter-group {
            display: flex;
            flex-direction: column;
        }:where(.p-my-login-history) .filter-group label {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--vx-text-soft);
        }:where(.p-my-login-history) .filter-group input,
:where(.p-my-login-history) .filter-group select {
            padding: 8px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 6px;
            font-size: 14px;
        }:where(.p-my-login-history) .filter-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }:where(.p-my-login-history) .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }:where(.p-my-login-history) .status-success {
            background: var(--vx-success-soft);
            color: var(--vx-success);
        }:where(.p-my-login-history) .status-failed {
            background: var(--vx-danger-soft);
            color: var(--vx-danger);
        }:where(.p-my-login-history) .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }:where(.p-my-login-history) .pagination a,
:where(.p-my-login-history) .pagination span {
            padding: 8px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 4px;
            text-decoration: none;
            color: var(--vx-text);
        }:where(.p-my-login-history) .pagination a:hover {
            background: var(--vx-surface2);
        }:where(.p-my-login-history) .pagination .current {
            background: var(--vx-accent);
            color: var(--vx-on-fill);
            border-color: var(--vx-accent);
        }:where(.p-my-login-history) .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }:where(.p-my-login-history) .modal-content {
            background-color: var(--vx-surface);
            margin: 5% auto;
            padding: 20px;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }:where(.p-my-login-history) .close {
            color: var(--vx-faint);
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }:where(.p-my-login-history) .close:hover { color: var(--vx-text); }:where(.p-my-login-history) .access-card {
            display: none;
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-left: 4px solid var(--vx-accent);
        }:where(.p-my-login-history) .access-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }:where(.p-my-login-history) .access-card-title {
            font-weight: bold;
            color: var(--vx-text);
            font-size: 16px;
        }:where(.p-my-login-history) .access-card-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            font-size: 14px;
            color: var(--vx-muted);
        }:where(.p-my-login-history) .access-card-detail {
            display: flex;
            flex-direction: column;
        }:where(.p-my-login-history) .access-card-detail strong {
            color: var(--vx-text);
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 2px;
        }
@media (max-width: 768px) {
:where(.p-my-login-history) .table-container {
                display: none;
            }
:where(.p-my-login-history) .cards-container {
                display: block;
            }
:where(.p-my-login-history) .access-card {
                display: block;
            }
:where(.p-my-login-history) .access-card-details {
                grid-template-columns: 1fr;
            }
:where(.p-my-login-history) .filter-row {
                grid-template-columns: 1fr;
            }

        
}
@media (min-width: 769px) {
:where(.p-my-login-history) .cards-container {
                display: none;
            }
:where(.p-my-login-history) .table-container {
                display: block;
            }

        
}/* ---- password_recovery_success.php — classe sul <body>: .p-password-recovery-success ---- */
body:where(.p-password-recovery-success) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-password-recovery-success) .success-container {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 600px;
            margin: 20px;
        }:where(.p-password-recovery-success) .email-box {
            background: var(--vx-success-soft);
            border: 2px solid var(--vx-success);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            text-align: center;
        }:where(.p-password-recovery-success) .email-box i {
            font-size: 3rem;
            color: var(--vx-success);
            margin-bottom: 15px;
        }:where(.p-password-recovery-success) .email-box h3 {
            color: var(--vx-success);
            margin: 0 0 10px 0;
        }:where(.p-password-recovery-success) .email-box p {
            color: var(--vx-success);
            margin: 5px 0;
        }:where(.p-password-recovery-success) .warning-box {
            background: var(--vx-warning-soft);
            border: 1px solid var(--vx-warning);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            color: var(--vx-warning);
        }:where(.p-password-recovery-success) .warning-box h4 {
            margin: 0 0 10px 0;
            color: var(--vx-warning);
        }:where(.p-password-recovery-success) .warning-box ul {
            margin: 10px 0;
            padding-left: 20px;
        }:where(.p-password-recovery-success) .info-box {
            background: var(--vx-info-soft);
            border: 1px solid var(--vx-info);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            color: var(--vx-info);
        }:where(.p-password-recovery-success) .info-box h4 {
            margin: 0 0 10px 0;
            color: var(--vx-info);
        }:where(.p-password-recovery-success) .info-box p {
            margin: 8px 0;
        }:where(.p-password-recovery-success) .actions {
            text-align: center;
            margin-top: 30px;
        }/* ---- admin/_scheda_anagrafica_standard.php — frammento incluso in altre pagine: non ha un <body> proprio, resta globale ---- */

    .scheda-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }.scheda-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; text-decoration:none; font-size:0.95rem; }.scheda-btn-edit { background:var(--vx-gradient); color:var(--vx-on-accent); }.scheda-btn-cancel { background:var(--vx-surface3); color:var(--vx-text); }.scheda-view-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 20px; }.scheda-view-item label { display:block; font-size:0.78rem; font-weight:600; color:var(--vx-faint); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }.scheda-view-item .val { font-size:0.98rem; color:var(--vx-text); word-break:break-word; }.scheda-view-item .val a { color:var(--vx-accent); text-decoration:none; }.scheda-view-item .val a:hover { text-decoration:underline; }.scheda-view-full { grid-column:1/-1; }.recapiti-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }.recap-card { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:12px; background:linear-gradient(135deg,var(--vx-accent-soft) 0%,var(--vx-surface) 100%); border:1px solid var(--vx-accent-soft); transition:box-shadow .2s; }.recap-card:hover { box-shadow:0 4px 14px rgba(102,126,234,.12); }.recap-card.recap-primary { border-color:var(--vx-accent-soft); background:linear-gradient(135deg,var(--vx-accent-soft) 0%,var(--vx-surface2) 100%); }.recap-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }.recap-body { min-width:0; flex:1; }.recap-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--vx-faint); margin-bottom:4px; }.recap-value { font-size:0.98rem; color:var(--vx-text); word-break:break-word; }.recap-value a { color:var(--vx-accent); text-decoration:none; }.recap-value a:hover { text-decoration:underline; }.recap-badge { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--vx-accent); background:var(--vx-accent-soft); padding:2px 8px; border-radius:999px; margin-bottom:6px; }.recapiti-extra-title { font-size:0.82rem; font-weight:600; color:var(--vx-muted); margin:16px 0 10px; padding-top:12px; border-top:1px dashed var(--vx-border); grid-column:1/-1; }.recapiti-edit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }.recapiti-edit-grid .recap-section-title { grid-column:1/-1; font-size:0.82rem; font-weight:600; color:var(--vx-accent); margin:4px 0 0; text-transform:uppercase; letter-spacing:.04em; }.req-conditional { display:none; color:var(--vx-warning); font-weight:700; }.req-conditional.visible { display:inline; }.req-collaborazioni { color:var(--vx-accent); font-weight:700; cursor:help; }.scheda-hint { grid-column:1/-1; font-size:0.84rem; color:var(--vx-muted); margin:0 0 4px; line-height:1.45; }/* ---- admin/albero_anagrafiche.php — classe sul <body>: .p-admin-albero-anagrafiche ---- */
:where(.p-admin-albero-anagrafiche),
:where(.p-admin-albero-anagrafiche) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-admin-albero-anagrafiche) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-admin-albero-anagrafiche) .page-subtitle {
            color: var(--vx-muted);
            font-size: 1.1rem;
        }:where(.p-admin-albero-anagrafiche) .form-group {
            margin-bottom: 20px;
        }:where(.p-admin-albero-anagrafiche) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-albero-anagrafiche) .form-group select,
:where(.p-admin-albero-anagrafiche) .form-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-admin-albero-anagrafiche) .form-group select:focus,
:where(.p-admin-albero-anagrafiche) .form-group input:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-albero-anagrafiche) .form-row {
            display: flex;
            gap: 20px;
            align-items: end;
        }:where(.p-admin-albero-anagrafiche) .form-row .form-group {
            flex: 1;
        }:where(.p-admin-albero-anagrafiche) .tree-container {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            padding: 30px;
            overflow-x: auto;
        }:where(.p-admin-albero-anagrafiche) .tree {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 0.95rem;
            line-height: 1.45;
        }:where(.p-admin-albero-anagrafiche) .tree-node {
            margin: 8px 0;
            position: relative;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content {
            display: inline-block;
            background: var(--vx-surface2);
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            padding: 12px 16px;
            margin: 2px 0;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 200px;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content:hover {
            background: var(--vx-surface3);
            border-color: var(--vx-accent);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        }:where(.p-admin-albero-anagrafiche) .tree-node-content.selected {
            background: var(--vx-accent);
            color: var(--vx-on-fill);
            border-color: var(--vx-accent-hover);
        }:where(.p-admin-albero-anagrafiche) .node-name {
            font-weight: 700;
            color: var(--vx-accent-strong);
            margin-bottom: 4px;
            text-decoration: none;
            font-family: inherit;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content:hover .node-name,
:where(.p-admin-albero-anagrafiche) .tree-node-content.selected .node-name {
            color: inherit;
        }:where(.p-admin-albero-anagrafiche) .node-details {
            font-size: 12px;
            color: var(--vx-muted);
            margin-bottom: 4px;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content:hover .node-details,
:where(.p-admin-albero-anagrafiche) .tree-node-content.selected .node-details {
            color: inherit;
            opacity: 0.8;
        }:where(.p-admin-albero-anagrafiche) .node-relation {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--vx-accent);
            color: var(--vx-on-fill);
            font-weight: 500;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content:hover .node-relation,
:where(.p-admin-albero-anagrafiche) .tree-node-content.selected .node-relation {
            background: rgba(255, 255, 255, 0.2);
        }:where(.p-admin-albero-anagrafiche) .tree-connector {
            position: relative;
            margin-left: 20px;
        }:where(.p-admin-albero-anagrafiche) .tree-connector::before {
            content: '';
            position: absolute;
            left: -20px;
            top: -10px;
            width: 1px;
            height: 20px;
            background: var(--vx-border);
        }:where(.p-admin-albero-anagrafiche) .tree-connector::after {
            content: '';
            position: absolute;
            left: -20px;
            top: 10px;
            width: 15px;
            height: 1px;
            background: var(--vx-border);
        }:where(.p-admin-albero-anagrafiche) .tree-connector:last-child::before {
            height: 10px;
        }:where(.p-admin-albero-anagrafiche) .level-0 { margin-left: 0; }:where(.p-admin-albero-anagrafiche) .level-1 { margin-left: 30px; }:where(.p-admin-albero-anagrafiche) .level-2 { margin-left: 60px; }:where(.p-admin-albero-anagrafiche) .level-3 { margin-left: 90px; }:where(.p-admin-albero-anagrafiche) .level-4 { margin-left: 120px; }:where(.p-admin-albero-anagrafiche) .level-5 { margin-left: 150px; }:where(.p-admin-albero-anagrafiche) .node-stats {
            display: inline-block;
            margin-left: 10px;
            font-size: 11px;
            color: var(--vx-muted);
            background: var(--vx-surface3);
            padding: 2px 6px;
            border-radius: 4px;
        }:where(.p-admin-albero-anagrafiche) .tree-node-content:hover .node-stats {
            background: rgba(255, 255, 255, 0.2);
            color: inherit;
        }:where(.p-admin-albero-anagrafiche) .tree-legend {
            background: var(--vx-surface2);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
        }:where(.p-admin-albero-anagrafiche) .legend-item {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 5px;
        }:where(.p-admin-albero-anagrafiche) .legend-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }:where(.p-admin-albero-anagrafiche) .empty-tree {
            text-align: center;
            padding: 60px 20px;
            color: var(--vx-muted);
        }:where(.p-admin-albero-anagrafiche) .empty-tree i {
            font-size: 48px;
            margin-bottom: 20px;
            color: var(--vx-border);
        }:where(.p-admin-albero-anagrafiche) .root-info {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }:where(.p-admin-albero-anagrafiche) .root-info h3 {
            margin: 0 0 10px 0;
            font-size: 1.5rem;
        }:where(.p-admin-albero-anagrafiche) .root-info p {
            margin: 0;
            opacity: 0.9;
        }
@media (max-width: 768px) {
:where(.p-admin-albero-anagrafiche) .container {
                padding: 15px;
            }
:where(.p-admin-albero-anagrafiche) .form-row {
                flex-direction: column;
                gap: 0;
            }
:where(.p-admin-albero-anagrafiche) .level-1,
:where(.p-admin-albero-anagrafiche) .level-2,
:where(.p-admin-albero-anagrafiche) .level-3,
:where(.p-admin-albero-anagrafiche) .level-4,
:where(.p-admin-albero-anagrafiche) .level-5 {
                margin-left: 20px;
            }
:where(.p-admin-albero-anagrafiche) .tree-node-content {
                min-width: 150px;
            }

        
}/* ---- admin/contatti_anagrafica.php — classe sul <body>: .p-admin-contatti-anagrafica ---- */
:where(.p-admin-contatti-anagrafica),
:where(.p-admin-contatti-anagrafica) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-admin-contatti-anagrafica) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-admin-contatti-anagrafica) .page-subtitle {
            color: var(--vx-muted);
            font-size: 1.1rem;
        }:where(.p-admin-contatti-anagrafica) .anagrafica-info {
            background: var(--vx-gradient);
            color: var(--vx-on-accent);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }:where(.p-admin-contatti-anagrafica) .anagrafica-info h3 {
            margin: 0 0 10px 0;
            font-size: 1.5rem;
        }:where(.p-admin-contatti-anagrafica) .anagrafica-info p {
            margin: 0;
            opacity: 0.9;
        }:where(.p-admin-contatti-anagrafica) .form-group {
            margin-bottom: 20px;
        }:where(.p-admin-contatti-anagrafica) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-contatti-anagrafica) .form-group input,
:where(.p-admin-contatti-anagrafica) .form-group textarea,
:where(.p-admin-contatti-anagrafica) .form-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-admin-contatti-anagrafica) .form-group input:focus,
:where(.p-admin-contatti-anagrafica) .form-group textarea:focus,
:where(.p-admin-contatti-anagrafica) .form-group select:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-contatti-anagrafica) .form-row {
            display: flex;
            gap: 20px;
        }:where(.p-admin-contatti-anagrafica) .form-row .form-group {
            flex: 1;
        }:where(.p-admin-contatti-anagrafica) .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-contatti-anagrafica) .checkbox-group input[type="checkbox"] {
            width: auto;
        }:where(.p-admin-contatti-anagrafica) .categoria-section {
            margin-bottom: 40px;
        }:where(.p-admin-contatti-anagrafica) .categoria-header {
            background: var(--vx-surface2);
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            border-left: 4px solid var(--vx-accent);
            margin-bottom: 0;
        }:where(.p-admin-contatti-anagrafica) .categoria-header h3 {
            margin: 0;
            color: var(--vx-text);
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-contatti-anagrafica) .categoria-header .categoria-icon {
            font-size: 20px;
        }:where(.p-admin-contatti-anagrafica) .categoria-content {
            background: var(--vx-surface);
            border: 1px solid var(--vx-border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 20px;
        }:where(.p-admin-contatti-anagrafica) .contatti-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }:where(.p-admin-contatti-anagrafica) .contatto-card {
            background: var(--vx-surface2);
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            padding: 15px;
            position: relative;
            transition: all 0.3s ease;
        }:where(.p-admin-contatti-anagrafica) .contatto-card:hover {
            border-color: var(--vx-accent);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }:where(.p-admin-contatti-anagrafica) .contatto-card.primary {
            border-color: var(--vx-success);
            background: var(--vx-success-soft);
        }:where(.p-admin-contatti-anagrafica) .contatto-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }:where(.p-admin-contatti-anagrafica) .contatto-type {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-contatti-anagrafica) .contatto-type i {
            font-size: 16px;
        }:where(.p-admin-contatti-anagrafica) .contatto-actions {
            display: flex;
            gap: 5px;
        }:where(.p-admin-contatti-anagrafica) .contatto-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--vx-text-soft);
            margin-bottom: 8px;
            word-break: break-all;
        }:where(.p-admin-contatti-anagrafica) .contatto-description {
            font-size: 12px;
            color: var(--vx-muted);
            margin-bottom: 5px;
        }:where(.p-admin-contatti-anagrafica) .contatto-notes {
            font-size: 12px;
            color: var(--vx-muted);
            font-style: italic;
        }:where(.p-admin-contatti-anagrafica) .primary-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--vx-success);
            color: var(--vx-on-fill);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
        }:where(.p-admin-contatti-anagrafica) .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }:where(.p-admin-contatti-anagrafica) .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-admin-contatti-anagrafica) .modal-content {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }:where(.p-admin-contatti-anagrafica) .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }:where(.p-admin-contatti-anagrafica) .modal-header h3 {
            margin: 0;
            color: var(--vx-text);
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-contatti-anagrafica) .close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--vx-muted);
        }:where(.p-admin-contatti-anagrafica) .close:hover {
            color: var(--vx-text);
        }:where(.p-admin-contatti-anagrafica) .text-center {
            text-align: center;
        }:where(.p-admin-contatti-anagrafica) .text-right {
            text-align: right;
        }:where(.p-admin-contatti-anagrafica) .empty-state {
            text-align: center;
            padding: 40px;
            color: var(--vx-muted);
        }:where(.p-admin-contatti-anagrafica) .empty-state i {
            font-size: 48px;
            margin-bottom: 20px;
            color: var(--vx-border);
        }:where(.p-admin-contatti-anagrafica) .validation-error {
            color: var(--vx-danger);
            font-size: 12px;
            margin-top: 5px;
        }:where(.p-admin-contatti-anagrafica) .validation-success {
            color: var(--vx-success);
            font-size: 12px;
            margin-top: 5px;
        }:where(.p-admin-contatti-anagrafica) .tipologia-preview {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 5px;
            padding: 8px;
            background: var(--vx-surface2);
            border-radius: 4px;
            font-size: 12px;
        }
@media (max-width: 768px) {
:where(.p-admin-contatti-anagrafica) .container {
                padding: 15px;
            }
:where(.p-admin-contatti-anagrafica) .form-row {
                flex-direction: column;
                gap: 0;
            }
:where(.p-admin-contatti-anagrafica) .contatti-grid {
                grid-template-columns: 1fr;
            }

        
}/* ---- admin/mfa_settings.php — classe sul <body>: .p-admin-mfa-settings ---- */
body:where(.p-admin-mfa-settings) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
            color: var(--vx-text);
        }:where(.p-admin-mfa-settings) .card h3 {
            margin: 0 0 8px 0;
            color: var(--vx-text);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.1rem;
        }:where(.p-admin-mfa-settings) .hint {
            color: var(--vx-muted);
            font-size: 0.92rem;
            line-height: 1.45;
            margin: 0 0 16px;
        }:where(.p-admin-mfa-settings) label {
            display: block;
            font-weight: 600;
            font-size: 0.88rem;
            margin-bottom: 6px;
            color: var(--vx-text-soft);
        }:where(.p-admin-mfa-settings) .check-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
            font-weight: 400;
        }:where(.p-admin-mfa-settings) .check-row input[type="checkbox"] {
            width: auto;
            margin-top: 3px;
            flex-shrink: 0;
        }:where(.p-admin-mfa-settings) .check-row span { font-weight: 400; color: var(--vx-text); line-height: 1.4; }:where(.p-admin-mfa-settings) select,
:where(.p-admin-mfa-settings) input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 8px;
            font-size: 0.95rem;
            background: var(--vx-surface);
        }:where(.p-admin-mfa-settings) .check-list {
            background: var(--vx-surface2);
            border: 1px solid var(--vx-border);
            border-radius: 8px;
            padding: 12px 14px;
            max-height: 200px;
            overflow: auto;
            margin-top: 8px;
        }:where(.p-admin-mfa-settings) .form-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }:where(.p-admin-mfa-settings) .quick-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 4px;
        }:where(.p-admin-mfa-settings) .choice-explain {
            margin: 8px 0 0;
            padding: 12px 14px;
            background: var(--vx-surface2);
            border-radius: 8px;
            border-left: 4px solid var(--vx-accent);
            font-size: 0.9rem;
            color: var(--vx-text-soft);
            line-height: 1.45;
        }:where(.p-admin-mfa-settings) .choice-explain strong { color: var(--vx-text); }/* ---- admin/page_permissions.php — classe sul <body>: .p-admin-page-permissions ---- */
body:where(.p-admin-page-permissions) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
        }:where(.p-admin-page-permissions) .search-bar {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 15px;
        }:where(.p-admin-page-permissions) .search-bar input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }:where(.p-admin-page-permissions) .search-bar input:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-page-permissions) .search-bar i {
            color: var(--vx-accent);
            font-size: 1.2rem;
        }:where(.p-admin-page-permissions) .category-section {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
            overflow: hidden;
        }:where(.p-admin-page-permissions) .category-title {
            font-size: 1.5rem;
            color: var(--vx-accent);
            margin: 0;
            padding: 20px 25px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--vx-surface2);
            transition: background 0.2s;
            user-select: none;
        }:where(.p-admin-page-permissions) .category-title:hover {
            background: var(--vx-surface3);
        }:where(.p-admin-page-permissions) .category-title i.fa-folder {
            margin-right: 10px;
        }:where(.p-admin-page-permissions) .category-icon {
            transition: transform 0.3s ease;
            font-size: 1rem;
        }:where(.p-admin-page-permissions) .category-section.collapsed .category-icon {
            transform: rotate(-90deg);
        }:where(.p-admin-page-permissions) .category-content {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 25px 25px 25px;
        }:where(.p-admin-page-permissions) .category-section.collapsed .category-content {
            max-height: 0;
            padding: 0 25px;
        }:where(.p-admin-page-permissions) .eventi-editor-acl {
            margin-top: 16px;
            padding: 16px;
            background: var(--vx-accent-soft);
            border: 1px solid var(--vx-accent-soft);
            border-radius: 8px;
        }:where(.p-admin-page-permissions) .eventi-editor-acl-subtitle {
            font-size: 1rem;
            color: var(--vx-text-soft);
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }:where(.p-admin-page-permissions) .eventi-perm-section {
            margin-top: 22px;
        }:where(.p-admin-page-permissions) .eventi-perm-section:first-child {
            margin-top: 0;
        }:where(.p-admin-page-permissions) .eventi-perm-section-title {
            font-size: 1.15rem;
            color: var(--vx-text-soft);
            margin: 0 0 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }:where(.p-admin-page-permissions) .eventi-perm-section-title i {
            color: var(--vx-accent);
        }:where(.p-admin-page-permissions) .eventi-perm-section-note {
            color: var(--vx-muted);
            font-size: 0.92rem;
            margin: 0 0 14px 0;
        }:where(.p-admin-page-permissions) .eventi-perm-section-note strong {
            color: var(--vx-text-soft);
        }:where(.p-admin-page-permissions) .eventi-editor-acl-title {
            font-size: 1.2rem;
            color: var(--vx-text-soft);
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }:where(.p-admin-page-permissions) .eventi-editor-acl-title i {
            color: var(--vx-accent);
        }:where(.p-admin-page-permissions) .eventi-editor-acl-note {
            color: var(--vx-muted);
            font-size: 0.92rem;
            margin: 0 0 16px 0;
        }:where(.p-admin-page-permissions) .eventi-editor-acl-empty {
            background: var(--vx-surface2);
            border: 1px dashed var(--vx-faint);
            border-radius: 8px;
            padding: 16px;
            color: var(--vx-muted);
        }:where(.p-admin-page-permissions) .eventi-editor-flag {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }:where(.p-admin-page-permissions) .eventi-editor-events-label {
            font-weight: 600;
            margin: 14px 0 8px;
            color: var(--vx-text-soft);
        }:where(.p-admin-page-permissions) .eventi-editor-events-list {
            max-height: 220px;
            overflow: auto;
            border: 1px solid var(--vx-border);
            border-radius: 8px;
            padding: 10px;
            background: var(--vx-surface);
        }:where(.p-admin-page-permissions) .eventi-editor-event-item {
            display: block;
            margin-bottom: 6px;
        }:where(.p-admin-page-permissions) .eventi-editor-event-date {
            color: var(--vx-faint);
            font-size: 0.85rem;
        }:where(.p-admin-page-permissions) .eventi-editor-actions {
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }:where(.p-admin-page-permissions) .eventi-editor-save-msg {
            color: var(--vx-success);
            font-weight: 500;
        }:where(.p-admin-page-permissions) .eventi-editor-save-msg.error {
            color: var(--vx-danger);
        }:where(.p-admin-page-permissions) .page-card {
            background: var(--vx-surface2);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            border: 1px solid var(--vx-border);
        }:where(.p-admin-page-permissions) .page-info {
            flex: 1;
            min-width: 300px;
        }:where(.p-admin-page-permissions) .page-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--vx-text);
            margin: 0 0 5px 0;
        }:where(.p-admin-page-permissions) .page-path {
            font-family: monospace;
            font-size: 0.9rem;
            color: var(--vx-muted);
            margin: 0 0 5px 0;
        }:where(.p-admin-page-permissions) .page-description {
            font-size: 0.9rem;
            color: var(--vx-muted);
            margin: 0;
        }:where(.p-admin-page-permissions) .page-badges {
            display: flex;
            gap: 8px;
            align-items: center;
        }:where(.p-admin-page-permissions) .badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 600;
        }:where(.p-admin-page-permissions) .badge-public {
            background: var(--vx-success);
            color: var(--vx-on-fill);
        }:where(.p-admin-page-permissions) .badge-auth {
            background: var(--vx-warning);
            color: var(--vx-text);
        }:where(.p-admin-page-permissions) .auth-toggle {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }:where(.p-admin-page-permissions) .auth-checkbox {
            display: none;
        }:where(.p-admin-page-permissions) .toggle-label {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            background: var(--vx-success);
            color: var(--vx-on-fill);
        }:where(.p-admin-page-permissions) .auth-checkbox:checked + .toggle-label {
            background: var(--vx-warning);
            color: var(--vx-text);
        }:where(.p-admin-page-permissions) .toggle-label i {
            transition: transform 0.3s ease;
        }:where(.p-admin-page-permissions) .permissions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }:where(.p-admin-page-permissions) .permission-item {
            background: var(--vx-surface);
            padding: 12px;
            border-radius: 6px;
            border: 1px solid var(--vx-border);
        }:where(.p-admin-page-permissions) .permission-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 500;
        }:where(.p-admin-page-permissions) .permission-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }:where(.p-admin-page-permissions) .user-permissions-section {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--vx-border);
        }:where(.p-admin-page-permissions) .user-permissions-header {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--vx-text-soft);
        }:where(.p-admin-page-permissions) .user-permission-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }:where(.p-admin-page-permissions) .user-permission-tag {
            background: var(--vx-accent);
            color: var(--vx-on-fill);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }:where(.p-admin-page-permissions) .user-permission-tag.denied {
            background: var(--vx-danger);
        }:where(.p-admin-page-permissions) .user-permission-tag button {
            background: none;
            border: none;
            color: var(--vx-on-accent);
            cursor: pointer;
            padding: 0;
            font-size: 1rem;
        }:where(.p-admin-page-permissions) .save-bar {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--vx-surface);
            border-top: 2px solid var(--vx-accent);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            padding: 14px 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 1100;
            margin-top: 24px;
        }:where(.p-admin-page-permissions) .save-bar-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            background: var(--vx-surface);
            border: 1px solid var(--vx-border);
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 14px 20px;
            margin-bottom: 20px;
        }:where(.p-admin-page-permissions) .save-bar-top-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }:where(.p-admin-page-permissions) .save-bar-msg {
            color: var(--vx-text-soft);
            font-weight: 500;
        }:where(.p-admin-page-permissions) .save-bar-msg.dirty {
            color: var(--vx-warning);
        }:where(.p-admin-page-permissions) .save-bar-msg.ok {
            color: var(--vx-success);
        }:where(.p-admin-page-permissions) #btnSaveAll:disabled,
:where(.p-admin-page-permissions) #btnSaveAllTop:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }body:where(.p-admin-page-permissions).has-save-bar {
            padding-bottom: 20px;
        }:where(.p-admin-page-permissions) .add-user-form {
            display: none;
            margin-top: 10px;
            padding: 15px;
            background: var(--vx-border);
            border-radius: 6px;
        }:where(.p-admin-page-permissions) .add-user-form.active {
            display: block;
        }:where(.p-admin-page-permissions) .form-row {
            display: flex;
            gap: 10px;
            align-items: end;
        }:where(.p-admin-page-permissions) .form-group {
            flex: 1;
        }:where(.p-admin-page-permissions) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 0.9rem;
        }:where(.p-admin-page-permissions) .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--vx-border);
            border-radius: 4px;
            font-size: 0.9rem;
        }
@media (max-width: 768px) {
:where(.p-admin-page-permissions) .permissions-grid {
                grid-template-columns: 1fr;
            }
:where(.p-admin-page-permissions) .page-header {
                flex-direction: column;
            }
:where(.p-admin-page-permissions) .form-row {
                flex-direction: column;
            }

        
}/* ---- admin/recovery_attempts.php — classe sul <body>: .p-admin-recovery-attempts ---- */
body:where(.p-admin-recovery-attempts) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
        }:where(.p-admin-recovery-attempts) .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }:where(.p-admin-recovery-attempts) .stat-card {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            text-align: center;
        }:where(.p-admin-recovery-attempts) .stat-card h3 {
            margin: 0 0 10px 0;
            color: var(--vx-text);
        }:where(.p-admin-recovery-attempts) .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--vx-accent);
        }:where(.p-admin-recovery-attempts) .card h3 {
            margin: 0 0 20px 0;
            color: var(--vx-text);
        }:where(.p-admin-recovery-attempts) .table-container { display: block; }:where(.p-admin-recovery-attempts) .cards-container { display: none; }:where(.p-admin-recovery-attempts) .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }:where(.p-admin-recovery-attempts) .modal-content { background: var(--vx-surface); margin: 6% auto; padding: 20px; border-radius: 12px; width: 92%; max-width: 700px; max-height: 80vh; overflow-y: auto; }:where(.p-admin-recovery-attempts) .close { float: right; font-size: 24px; cursor: pointer; }:where(.p-admin-recovery-attempts) table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }:where(.p-admin-recovery-attempts) th,
:where(.p-admin-recovery-attempts) td {
            border: 1px solid var(--vx-border);
            padding: 12px;
            text-align: left;
        }:where(.p-admin-recovery-attempts) th {
            background-color: var(--vx-surface2);
            font-weight: 600;
        }
@media (max-width: 768px) {
:where(.p-admin-recovery-attempts) .header-content {
                flex-direction: column;
                gap: 12px;
                text-align: center;
                align-items: center;
            }
:where(.p-admin-recovery-attempts) .header-actions {
                flex-direction: column;
            }
:where(.p-admin-recovery-attempts) .table-container { display: none; }
:where(.p-admin-recovery-attempts) .cards-container { display: block; }

        
}/* ---- admin/relazioni_anagrafica.php — classe sul <body>: .p-admin-relazioni-anagrafica ---- */
:where(.p-admin-relazioni-anagrafica),
:where(.p-admin-relazioni-anagrafica) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-admin-relazioni-anagrafica) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-admin-relazioni-anagrafica) .page-subtitle {
            color: var(--vx-muted);
            font-size: 1.1rem;
        }:where(.p-admin-relazioni-anagrafica) .badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 4px;
            color: var(--vx-on-accent);
        }:where(.p-admin-relazioni-anagrafica) .badge-success {
            background: var(--vx-success);
        }:where(.p-admin-relazioni-anagrafica) .badge-danger {
            background: var(--vx-danger);
        }:where(.p-admin-relazioni-anagrafica) .badge-primary {
            background: var(--vx-info);
        }:where(.p-admin-relazioni-anagrafica) .badge-secondary {
            background: var(--vx-muted);
        }:where(.p-admin-relazioni-anagrafica) .form-group {
            margin-bottom: 20px;
        }:where(.p-admin-relazioni-anagrafica) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-relazioni-anagrafica) .form-group input,
:where(.p-admin-relazioni-anagrafica) .form-group textarea,
:where(.p-admin-relazioni-anagrafica) .form-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-admin-relazioni-anagrafica) .form-group input:focus,
:where(.p-admin-relazioni-anagrafica) .form-group textarea:focus,
:where(.p-admin-relazioni-anagrafica) .form-group select:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-relazioni-anagrafica) .form-row {
            display: flex;
            gap: 20px;
        }:where(.p-admin-relazioni-anagrafica) .form-row .form-group {
            flex: 1;
        }:where(.p-admin-relazioni-anagrafica) .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-relazioni-anagrafica) .checkbox-group input[type="checkbox"] {
            width: auto;
        }:where(.p-admin-relazioni-anagrafica) .filters {
            background: var(--vx-surface2);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }:where(.p-admin-relazioni-anagrafica) .filters .form-row {
            margin-bottom: 15px;
        }:where(.p-admin-relazioni-anagrafica) .filters .form-row:last-child {
            margin-bottom: 0;
        }:where(.p-admin-relazioni-anagrafica) .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }:where(.p-admin-relazioni-anagrafica) .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-admin-relazioni-anagrafica) .modal-content {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }:where(.p-admin-relazioni-anagrafica) .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }:where(.p-admin-relazioni-anagrafica) .modal-header h3 {
            margin: 0;
            color: var(--vx-text);
        }:where(.p-admin-relazioni-anagrafica) .close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--vx-muted);
        }:where(.p-admin-relazioni-anagrafica) .close:hover {
            color: var(--vx-text);
        }:where(.p-admin-relazioni-anagrafica) .text-center {
            text-align: center;
        }:where(.p-admin-relazioni-anagrafica) .text-right {
            text-align: right;
        }:where(.p-admin-relazioni-anagrafica) .relationship-flow {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }:where(.p-admin-relazioni-anagrafica) .relationship-arrow {
            color: var(--vx-accent);
            font-size: 18px;
        }:where(.p-admin-relazioni-anagrafica) .anagrafica-info {
            background: var(--vx-surface2);
            padding: 10px;
            border-radius: 6px;
            border-left: 4px solid var(--vx-accent);
        }:where(.p-admin-relazioni-anagrafica) .anagrafica-name {
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-relazioni-anagrafica) .anagrafica-details {
            font-size: 12px;
            color: var(--vx-muted);
            margin-top: 2px;
        }
@media (max-width: 768px) {
:where(.p-admin-relazioni-anagrafica) .container {
                padding: 15px;
            }
:where(.p-admin-relazioni-anagrafica) .form-row {
                flex-direction: column;
                gap: 0;
            }
:where(.p-admin-relazioni-anagrafica) .table {
                font-size: 14px;
            }
:where(.p-admin-relazioni-anagrafica) .relationship-flow {
                flex-direction: column;
                align-items: flex-start;
            }

        
}/* ---- admin/software_licenses.php — classe sul <body>: .p-admin-software-licenses ---- */
body:where(.p-admin-software-licenses) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
            color: var(--vx-text);
        }:where(.p-admin-software-licenses) .card h3 {
            margin: 0 0 16px 0;
            color: var(--vx-text);
            display: flex;
            align-items: center;
            gap: 8px;
        }:where(.p-admin-software-licenses) .hint {
            color: var(--vx-muted);
            font-size: 0.92rem;
            line-height: 1.45;
            margin: 0 0 16px;
        }:where(.p-admin-software-licenses) .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }:where(.p-admin-software-licenses) .form-grid .full { grid-column: 1 / -1; }:where(.p-admin-software-licenses) label {
            display: block;
            font-weight: 600;
            font-size: 0.88rem;
            margin-bottom: 6px;
            color: var(--vx-text-soft);
        }:where(.p-admin-software-licenses) input,
:where(.p-admin-software-licenses) select,
:where(.p-admin-software-licenses) textarea {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border: 1px solid var(--vx-border);
            border-radius: 8px;
            font-size: 0.95rem;
            font-family: inherit;
            background: var(--vx-surface);
        }:where(.p-admin-software-licenses) input:focus,
:where(.p-admin-software-licenses) select:focus,
:where(.p-admin-software-licenses) textarea:focus {
            outline: none;
            border-color: var(--vx-accent);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }:where(.p-admin-software-licenses) .keybox {
            font-family: Consolas, 'Courier New', monospace;
            background: var(--vx-text);
            color: var(--vx-surface2);
            padding: 14px;
            border-radius: 8px;
            word-break: break-all;
            overflow-wrap: anywhere;
            margin: 10px 0 14px;
        }:where(.p-admin-software-licenses) .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }:where(.p-admin-software-licenses) table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }:where(.p-admin-software-licenses) th,
:where(.p-admin-software-licenses) td {
            text-align: left;
            padding: 12px 10px;
            border-bottom: 1px solid var(--vx-surface3);
            vertical-align: top;
        }:where(.p-admin-software-licenses) th {
            color: var(--vx-muted);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            background: var(--vx-surface2);
        }:where(.p-admin-software-licenses) code {
            font-family: Consolas, 'Courier New', monospace;
            font-size: 0.85rem;
            background: var(--vx-surface3);
            padding: 2px 6px;
            border-radius: 4px;
            word-break: break-all;
            overflow-wrap: anywhere;
        }:where(.p-admin-software-licenses) .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }:where(.p-admin-software-licenses) .badge-on { background: var(--vx-success-soft); color: var(--vx-success); }:where(.p-admin-software-licenses) .badge-off { background: var(--vx-danger-soft); color: var(--vx-danger); }:where(.p-admin-software-licenses) .badge-warn { background: var(--vx-warning-soft); color: var(--vx-warning); }:where(.p-admin-software-licenses) .actions-form { display: inline; margin: 0; }:where(.p-admin-software-licenses) .form-actions { margin-top: 16px; }:where(.p-admin-software-licenses) .filters-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 0.85fr;
            gap: 14px;
            align-items: end;
        }:where(.p-admin-software-licenses) .filters-meta {
            margin: 0 0 12px;
            color: var(--vx-muted);
            font-size: 0.9rem;
        }:where(.p-admin-software-licenses) .filters-meta strong { color: var(--vx-text-soft); }
@media (max-width: 900px) {
:where(.p-admin-software-licenses) .filters-grid { grid-template-columns: 1fr 1fr; }

        
}
@media (max-width: 640px) {
:where(.p-admin-software-licenses) .filters-grid { grid-template-columns: 1fr; }

        
}:where(.p-admin-software-licenses) .license-cards { display: none; }:where(.p-admin-software-licenses) .license-card {
            border: 1px solid var(--vx-border);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
            background: var(--vx-surface2);
        }:where(.p-admin-software-licenses) .license-card-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
        }:where(.p-admin-software-licenses) .license-card-product {
            font-weight: 700;
            color: var(--vx-text);
            font-size: 1rem;
        }:where(.p-admin-software-licenses) .license-card-row {
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: 6px 10px;
            font-size: 0.88rem;
            margin-bottom: 6px;
            align-items: start;
        }:where(.p-admin-software-licenses) .license-card-row .lbl {
            color: var(--vx-muted);
            font-weight: 600;
        }:where(.p-admin-software-licenses) .license-card-row .val {
            color: var(--vx-text);
            min-width: 0;
            word-break: break-word;
            overflow-wrap: anywhere;
        }:where(.p-admin-software-licenses) .license-card-actions { margin-top: 12px; }:where(.p-admin-software-licenses) .license-card-actions .btn-danger {
            width: 100%;
            justify-content: center;
            padding: 10px 12px;
            font-size: 0.9rem;
            border-radius: 8px;
        }
@media (max-width: 720px) {
:where(.p-admin-software-licenses) .container { padding: 12px 12px 0; }
:where(.p-admin-software-licenses) .form-grid { grid-template-columns: 1fr; }
:where(.p-admin-software-licenses) .page-title h1 { font-size: 1.35rem; }
:where(.p-admin-software-licenses) .card { padding: 16px; }
:where(.p-admin-software-licenses) .alert { flex-direction: column; gap: 6px; }
:where(.p-admin-software-licenses) .table-wrap { display: none; }
:where(.p-admin-software-licenses) .license-cards { display: block; }
:where(.p-admin-software-licenses) .btn { width: 100%; justify-content: center; }
:where(.p-admin-software-licenses) .form-actions .btn { width: 100%; }

        
}/* ---- admin/tipologie_anagrafica.php — classe sul <body>: .p-admin-tipologie-anagrafica ---- */
:where(.p-admin-tipologie-anagrafica),
:where(.p-admin-tipologie-anagrafica) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-admin-tipologie-anagrafica) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-admin-tipologie-anagrafica) .page-subtitle {
            color: var(--vx-muted);
            font-size: 1.1rem;
        }:where(.p-admin-tipologie-anagrafica) .badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 4px;
            color: var(--vx-on-accent);
        }:where(.p-admin-tipologie-anagrafica) .badge-success {
            background: var(--vx-success);
        }:where(.p-admin-tipologie-anagrafica) .badge-danger {
            background: var(--vx-danger);
        }:where(.p-admin-tipologie-anagrafica) .color-preview {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
            border: 2px solid var(--vx-surface);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }:where(.p-admin-tipologie-anagrafica) .form-group {
            margin-bottom: 20px;
        }:where(.p-admin-tipologie-anagrafica) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-tipologie-anagrafica) .form-group input,
:where(.p-admin-tipologie-anagrafica) .form-group textarea,
:where(.p-admin-tipologie-anagrafica) .form-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-admin-tipologie-anagrafica) .form-group input:focus,
:where(.p-admin-tipologie-anagrafica) .form-group textarea:focus,
:where(.p-admin-tipologie-anagrafica) .form-group select:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-tipologie-anagrafica) .form-row {
            display: flex;
            gap: 20px;
        }:where(.p-admin-tipologie-anagrafica) .form-row .form-group {
            flex: 1;
        }:where(.p-admin-tipologie-anagrafica) .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-tipologie-anagrafica) .checkbox-group input[type="checkbox"] {
            width: auto;
        }:where(.p-admin-tipologie-anagrafica) .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }:where(.p-admin-tipologie-anagrafica) .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-admin-tipologie-anagrafica) .modal-content {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }:where(.p-admin-tipologie-anagrafica) .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }:where(.p-admin-tipologie-anagrafica) .modal-header h3 {
            margin: 0;
            color: var(--vx-text);
        }:where(.p-admin-tipologie-anagrafica) .close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--vx-muted);
        }:where(.p-admin-tipologie-anagrafica) .close:hover {
            color: var(--vx-text);
        }:where(.p-admin-tipologie-anagrafica) .text-center {
            text-align: center;
        }:where(.p-admin-tipologie-anagrafica) .text-right {
            text-align: right;
        }
@media (max-width: 768px) {
:where(.p-admin-tipologie-anagrafica) .container {
                padding: 15px;
            }
:where(.p-admin-tipologie-anagrafica) .form-row {
                flex-direction: column;
                gap: 0;
            }
:where(.p-admin-tipologie-anagrafica) .table {
                font-size: 14px;
            }

        
}/* ---- admin/tipologie_contatti.php — classe sul <body>: .p-admin-tipologie-contatti ---- */
:where(.p-admin-tipologie-contatti),
:where(.p-admin-tipologie-contatti) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-admin-tipologie-contatti) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-admin-tipologie-contatti) .page-subtitle {
            color: var(--vx-muted);
            font-size: 1.1rem;
        }:where(.p-admin-tipologie-contatti) .badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 4px;
            color: var(--vx-on-accent);
        }:where(.p-admin-tipologie-contatti) .badge-success {
            background: var(--vx-success);
        }:where(.p-admin-tipologie-contatti) .badge-danger {
            background: var(--vx-danger);
        }:where(.p-admin-tipologie-contatti) .badge-primary {
            background: var(--vx-info);
        }:where(.p-admin-tipologie-contatti) .badge-secondary {
            background: var(--vx-muted);
        }:where(.p-admin-tipologie-contatti) .badge-info {
            background: var(--vx-info);
        }:where(.p-admin-tipologie-contatti) .badge-warning {
            background: var(--vx-warning);
            color: var(--vx-text);
        }:where(.p-admin-tipologie-contatti) .form-group {
            margin-bottom: 20px;
        }:where(.p-admin-tipologie-contatti) .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-admin-tipologie-contatti) .form-group input,
:where(.p-admin-tipologie-contatti) .form-group textarea,
:where(.p-admin-tipologie-contatti) .form-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-admin-tipologie-contatti) .form-group input:focus,
:where(.p-admin-tipologie-contatti) .form-group textarea:focus,
:where(.p-admin-tipologie-contatti) .form-group select:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-admin-tipologie-contatti) .form-row {
            display: flex;
            gap: 20px;
        }:where(.p-admin-tipologie-contatti) .form-row .form-group {
            flex: 1;
        }:where(.p-admin-tipologie-contatti) .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-tipologie-contatti) .checkbox-group input[type="checkbox"] {
            width: auto;
        }:where(.p-admin-tipologie-contatti) .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }:where(.p-admin-tipologie-contatti) .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-admin-tipologie-contatti) .modal-content {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }:where(.p-admin-tipologie-contatti) .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }:where(.p-admin-tipologie-contatti) .modal-header h3 {
            margin: 0;
            color: var(--vx-text);
        }:where(.p-admin-tipologie-contatti) .close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--vx-muted);
        }:where(.p-admin-tipologie-contatti) .close:hover {
            color: var(--vx-text);
        }:where(.p-admin-tipologie-contatti) .text-center {
            text-align: center;
        }:where(.p-admin-tipologie-contatti) .text-right {
            text-align: right;
        }:where(.p-admin-tipologie-contatti) .categoria-section {
            margin-bottom: 40px;
        }:where(.p-admin-tipologie-contatti) .categoria-header {
            background: var(--vx-surface2);
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            border-left: 4px solid var(--vx-accent);
            margin-bottom: 0;
        }:where(.p-admin-tipologie-contatti) .categoria-header h3 {
            margin: 0;
            color: var(--vx-text);
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-admin-tipologie-contatti) .categoria-content {
            background: var(--vx-surface);
            border: 1px solid var(--vx-border);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 20px;
        }:where(.p-admin-tipologie-contatti) .tipologia-preview {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: var(--vx-surface2);
            border-radius: 8px;
            margin-top: 10px;
        }:where(.p-admin-tipologie-contatti) .tipologia-preview i {
            font-size: 20px;
        }:where(.p-admin-tipologie-contatti) .icon-picker {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
            gap: 10px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            background: var(--vx-surface2);
            border-radius: 8px;
        }:where(.p-admin-tipologie-contatti) .icon-option {
            padding: 8px;
            text-align: center;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }:where(.p-admin-tipologie-contatti) .icon-option:hover {
            background: var(--vx-surface3);
            border-color: var(--vx-accent);
        }:where(.p-admin-tipologie-contatti) .icon-option.selected {
            background: var(--vx-accent);
            color: var(--vx-on-fill);
        }:where(.p-admin-tipologie-contatti) .mobile-cards {
            display: none;
        }:where(.p-admin-tipologie-contatti) .mobile-card {
            background: var(--vx-surface);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            border-left: 4px solid;
        }:where(.p-admin-tipologie-contatti) .mobile-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--vx-surface3);
        }:where(.p-admin-tipologie-contatti) .mobile-card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }:where(.p-admin-tipologie-contatti) .mobile-card-title i {
            font-size: 22px;
        }:where(.p-admin-tipologie-contatti) .mobile-card-title strong {
            font-size: 16px;
            color: var(--vx-text);
        }:where(.p-admin-tipologie-contatti) .mobile-card-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }:where(.p-admin-tipologie-contatti) .mobile-card-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
        }:where(.p-admin-tipologie-contatti) .mobile-card-label {
            font-size: 12px;
            color: var(--vx-muted);
            font-weight: 600;
            text-transform: uppercase;
        }:where(.p-admin-tipologie-contatti) .mobile-card-value {
            text-align: right;
            flex: 1;
            margin-left: 10px;
        }:where(.p-admin-tipologie-contatti) .mobile-card-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--vx-surface3);
        }:where(.p-admin-tipologie-contatti) .mobile-card-actions .btn {
            flex: 1;
            margin: 0;
        }
@media (max-width: 768px) {
:where(.p-admin-tipologie-contatti) .container {
                padding: 15px;
            }
:where(.p-admin-tipologie-contatti) .page-header {
                padding: 20px 15px;
            }
:where(.p-admin-tipologie-contatti) .page-title h1 {
                font-size: 1.5rem;
            }
:where(.p-admin-tipologie-contatti) .page-subtitle {
                font-size: 0.95rem;
            }
:where(.p-admin-tipologie-contatti) .form-row {
                flex-direction: column;
                gap: 0;
            }
:where(.p-admin-tipologie-contatti) .table {
                display: none;
            }
:where(.p-admin-tipologie-contatti) .mobile-cards {
                display: block;
            }
:where(.p-admin-tipologie-contatti) .categoria-content {
                padding: 15px;
            }
:where(.p-admin-tipologie-contatti) .categoria-header h3 {
                font-size: 1.1rem;
            }
:where(.p-admin-tipologie-contatti) .text-right {
                text-align: center;
            }
:where(.p-admin-tipologie-contatti) .btn {
                padding: 10px 20px;
                font-size: 13px;
            }
:where(.p-admin-tipologie-contatti) .modal-content {
                width: 95%;
                padding: 20px;
                max-height: 95vh;
            }
:where(.p-admin-tipologie-contatti) .modal-header h3 {
                font-size: 1.2rem;
            }

        
}/* ---- anagrafiche/index.php — classe sul <body>: .p-anagrafiche-index ---- */
:where(.p-anagrafiche-index),
:where(.p-anagrafiche-index) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-anagrafiche-index) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-anagrafiche-index) .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }:where(.p-anagrafiche-index) .stat-card {
            background: var(--vx-surface);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            border-left: 4px solid var(--vx-accent);
        }:where(.p-anagrafiche-index) .stat-card.green {
            border-left-color: var(--vx-success);
        }:where(.p-anagrafiche-index) .stat-card.orange {
            border-left-color: var(--vx-warning);
        }:where(.p-anagrafiche-index) .stat-card.blue {
            border-left-color: var(--vx-info);
        }:where(.p-anagrafiche-index) .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--vx-text);
            margin-bottom: 5px;
        }:where(.p-anagrafiche-index) .stat-label {
            color: var(--vx-muted);
            font-size: 0.9rem;
        }:where(.p-anagrafiche-index) .filters-card {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            padding: 25px;
            margin-bottom: 20px;
        }:where(.p-anagrafiche-index) .filters-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: flex-end;
        }:where(.p-anagrafiche-index) .filter-group {
            flex: 1;
            min-width: 200px;
        }:where(.p-anagrafiche-index) .filter-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--vx-text);
            font-size: 14px;
        }:where(.p-anagrafiche-index) .filter-group input,
:where(.p-anagrafiche-index) .filter-group select {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }:where(.p-anagrafiche-index) .filter-group input:focus,
:where(.p-anagrafiche-index) .filter-group select:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-anagrafiche-index) .flash-ok {
            background: var(--vx-success-soft);
            color: var(--vx-success);
            border-left: 4px solid var(--vx-success);
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 18px;
        }:where(.p-anagrafiche-index) .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }:where(.p-anagrafiche-index) .table-card {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            overflow: hidden;
        }:where(.p-anagrafiche-index) .table th:hover {
            background: var(--vx-surface3);
        }:where(.p-anagrafiche-index) .table th i {
            margin-left: 5px;
            font-size: 12px;
        }:where(.p-anagrafiche-index) .badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 4px;
            margin-right: 4px;
            margin-bottom: 4px;
        }:where(.p-anagrafiche-index) .no-results {
            text-align: center;
            padding: 60px 20px;
            color: var(--vx-muted);
        }:where(.p-anagrafiche-index) .no-results i {
            font-size: 4rem;
            color: var(--vx-faint);
            margin-bottom: 20px;
        }:where(.p-anagrafiche-index) .mobile-cards {
            display: none;
            padding: 20px;
        }:where(.p-anagrafiche-index) .mobile-card {
            background: var(--vx-surface);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            border-left: 4px solid var(--vx-accent);
        }:where(.p-anagrafiche-index) .mobile-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--vx-surface3);
        }:where(.p-anagrafiche-index) .mobile-card-title {
            flex: 1;
        }:where(.p-anagrafiche-index) .mobile-card-title h3 {
            font-size: 1.1rem;
            color: var(--vx-text);
            margin-bottom: 5px;
        }:where(.p-anagrafiche-index) .mobile-card-title .subtitle {
            font-size: 0.9rem;
            color: var(--vx-muted);
        }:where(.p-anagrafiche-index) .mobile-card-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }:where(.p-anagrafiche-index) .mobile-card-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }:where(.p-anagrafiche-index) .mobile-card-label {
            font-size: 11px;
            color: var(--vx-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }:where(.p-anagrafiche-index) .mobile-card-value {
            font-size: 14px;
            color: var(--vx-text);
        }:where(.p-anagrafiche-index) .mobile-card-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }:where(.p-anagrafiche-index) .mobile-card-contact {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }:where(.p-anagrafiche-index) .mobile-card-contact i {
            width: 20px;
            text-align: center;
        }:where(.p-anagrafiche-index) .mobile-card-contact a {
            text-decoration: none;
            font-size: 14px;
        }:where(.p-anagrafiche-index) .mobile-card-actions {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--vx-surface3);
        }:where(.p-anagrafiche-index) .mobile-card-actions .btn {
            width: 100%;
            text-align: center;
        }:where(.p-anagrafiche-index) .mobile-user-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
@media (max-width: 768px) {
:where(.p-anagrafiche-index) .container {
                padding: 15px;
            }
:where(.p-anagrafiche-index) .page-header {
                padding: 20px 15px;
            }
:where(.p-anagrafiche-index) .page-title {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
:where(.p-anagrafiche-index) .page-title h1 {
                font-size: 1.25rem;
            }
:where(.p-anagrafiche-index) .page-title .btn {
                align-self: stretch;
                justify-content: center;
            }
:where(.p-anagrafiche-index) .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
:where(.p-anagrafiche-index) .stat-card {
                padding: 15px;
            }
:where(.p-anagrafiche-index) .stat-number {
                font-size: 1.5rem;
            }
:where(.p-anagrafiche-index) .stat-label {
                font-size: 0.85rem;
            }
:where(.p-anagrafiche-index) .filters-card {
                padding: 15px;
            }
:where(.p-anagrafiche-index) .filters-row {
                flex-direction: column;
            }
:where(.p-anagrafiche-index) .filter-group {
                width: 100%;
            }
:where(.p-anagrafiche-index) .filter-group[style*="flex: 0"] {
                flex: 1 !important;
            }
:where(.p-anagrafiche-index) .filters-row .btn {
                width: 100%;
            }
:where(.p-anagrafiche-index) .table-card {
                padding: 0;
            }
:where(.p-anagrafiche-index) .table {
                display: none;
            }
:where(.p-anagrafiche-index) .mobile-cards {
                display: block;
            }
:where(.p-anagrafiche-index) .no-results {
                padding: 40px 15px;
            }
:where(.p-anagrafiche-index) .no-results i {
                font-size: 3rem;
            }

        
}/* ---- anagrafiche/rubrica_aruba.php — frammento incluso in altre pagine: non ha un <body> proprio, resta globale ---- */

    .rubrica-head {display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.rubrica-actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center}.rubrica-card {display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(240px,1fr) minmax(300px,1.35fr);gap:18px;align-items:start}.rubrica-card + .rubrica-card {border-top:1px solid var(--vx-border);padding-top:20px;margin-top:20px}.rubrica-name {font-weight:800;font-size:1.05rem;margin:0 0 5px}.rubrica-meta {font-size:.86rem;color:var(--vx-muted)}.rubrica-values {display:flex;flex-direction:column;gap:7px;font-size:.92rem}.rubrica-values i {width:18px;color:var(--vx-accent)}.rubrica-match {border:1px solid var(--vx-border);border-radius:12px;padding:12px;background:var(--vx-surface2)}.rubrica-match form+form {margin-top:8px}.rubrica-inline {display:flex;gap:7px;align-items:center}.rubrica-inline .vx-input {min-width:0;flex:1}.rubrica-badge {display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:.76rem;font-weight:750;background:var(--vx-accent-soft);color:var(--vx-accent-hover)}.rubrica-badge--ok {background:var(--vx-success-soft);color:var(--vx-success)}.rubrica-badge--muted {background:var(--vx-surface3);color:var(--vx-text-soft)}.rubrica-badge--warn {background:var(--vx-warning-soft);color:var(--vx-warning)}

/* Diario della sincronizzazione: cosa è cambiato in questo giro. */
.rubrica-diario {
    margin: 0 0 4px;
    padding-left: 20px;
    font-size: .9rem;
    line-height: 1.55;
    max-height: 260px;
    overflow-y: auto;
}
.rubrica-diario li { margin: 0 0 2px; }

/* Selezione multipla e diagnosi dei conteggi (aggiunte con la 1.31.0). */
.rubrica-massiva {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface2);
    position: sticky;
    top: 0;
    z-index: 2;
}
.rubrica-massiva__tutti { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.rubrica-massiva .rubrica-actions { margin-left: auto; }
.rubrica-scelta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .82rem; }
.rubrica-conti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 12px;
    margin: 6px 0 14px;
}
.rubrica-conti > div {
    padding: 12px 14px;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface2);
}
.rubrica-conti strong { font-size: 1.5rem; font-weight: 800; }

@media (max-width: 700px) {
    .rubrica-massiva { position: static; }
    .rubrica-massiva .rubrica-actions { margin-left: 0; width: 100%; }
    .rubrica-massiva .rubrica-actions .vx-btn { flex: 1 1 auto; }
}
    @media(max-width:960px){.rubrica-card{grid-template-columns:1fr}.rubrica-match{width:100%}}/* ---- collaborazioni/dettaglio.php — classe sul <body>: .p-collaborazioni-dettaglio ---- */
body:where(.p-collaborazioni-dettaglio) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--vx-bg, var(--vx-surface2)); margin: 0; }:where(.p-collaborazioni-dettaglio) .collab-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 0.9rem; }:where(.p-collaborazioni-dettaglio) .collab-kv dt { color: var(--vx-muted); }/* ---- collaborazioni/nuova.php — classe sul <body>: .p-collaborazioni-nuova ---- */
body:where(.p-collaborazioni-nuova) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--vx-bg, var(--vx-surface2)); margin: 0; }/* ---- config/email_config.php — classe sul <body>: .p-config-email-config ---- */
body:where(.p-config-email-config) { font-family: Arial, sans-serif; line-height: 1.6; color: var(--vx-text); }:where(.p-config-email-config) .content { background: var(--vx-surface2); padding: 30px; border-radius: 0 0 8px 8px; }:where(.p-config-email-config) .button { display: inline-block; background: var(--vx-accent); color: var(--vx-on-fill); padding: 12px 24px; text-decoration: none; border-radius: 5px; margin: 20px 0; }:where(.p-config-email-config) .footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--vx-muted); }:where(.p-config-email-config) .password-box { background: var(--vx-warning-soft); border: 2px solid var(--vx-warning); padding: 15px; border-radius: 8px; margin: 20px 0; }:where(.p-config-email-config) .password-box h3 { color: var(--vx-warning); margin: 0 0 10px 0; }:where(.p-config-email-config) .password-display { font-family: monospace; font-size: 18px; font-weight: bold; color: var(--vx-danger); background: var(--vx-surface); padding: 10px; border-radius: 4px; text-align: center; letter-spacing: 2px; }/* ---- includes/_anagrafica_tipo_soggetto_ui.php — frammento incluso in altre pagine: non ha un <body> proprio, resta globale ---- */

    .anag-tipo-soggetto-options { display:flex; gap:12px; flex-wrap:wrap; }.anag-tipo-soggetto-option {
        display:inline-flex; align-items:center; gap:8px;
        padding:10px 16px; border:2px solid var(--vx-border); border-radius:10px;
        cursor:pointer; background:var(--vx-surface); font-weight:500;
    }.anag-tipo-soggetto-option:has(input:checked) {
        border-color:var(--vx-accent); background:var(--vx-accent-soft); color:var(--vx-accent-hover);
    }.anag-tipo-soggetto-option input { margin:0; }.anag-genere-group.anag-hidden { display:none; }/* ---- includes/permissions.php — classe sul <body>: .p-includes-permissions ---- */
body:where(.p-includes-permissions) { font-family: Arial, sans-serif; background: var(--vx-surface2); display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }:where(.p-includes-permissions) .error-box { background: var(--vx-surface); padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-align: center; max-width: 500px; }:where(.p-includes-permissions) h1 { color: var(--vx-danger); margin: 0 0 20px 0; }:where(.p-includes-permissions) p { color: var(--vx-muted); margin-bottom: 30px; }:where(.p-includes-permissions) a { display: inline-block; padding: 12px 24px; background: var(--vx-accent); color: var(--vx-on-fill); text-decoration: none; border-radius: 8px; }:where(.p-includes-permissions) a:hover { background: var(--vx-accent-hover); }/* ---- includes/spaziweb/setup.php — frammento incluso in altre pagine: non ha un <body> proprio, resta globale ---- */

        .eventi-status {border-radius:12px;padding:16px 20px;margin-bottom:24px;border-left:4px solid var(--vx-accent);background:var(--vx-surface);box-shadow:0 4px 12px rgba(0,0,0,.06)}.eventi-status--ok {border-left-color:var(--vx-success);background:var(--vx-success-soft)}.eventi-status--warn {border-left-color:var(--vx-warning);background:var(--vx-warning-soft)}.eventi-status--error {border-left-color:var(--vx-danger);background:var(--vx-danger-soft)}.eventi-status h3 {margin:0 0 10px;font-size:1.05rem;color:var(--vx-text);display:flex;align-items:center;gap:8px}.eventi-status ul {margin:0;padding-left:18px;color:var(--vx-text-soft);line-height:1.55}.eventi-status li {margin-bottom:4px}/* ---- profilo/mio_profilo.php — classe sul <body>: .p-profilo-mio-profilo ---- */
body:where(.p-profilo-mio-profilo) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--vx-surface2); margin: 0; }:where(.p-profilo-mio-profilo) .collab-wrap { max-width: 720px; margin: 24px auto; padding: 0 16px; }:where(.p-profilo-mio-profilo) .collab-card { background: var(--vx-surface); border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }/* ---- users/anagrafica_create.php — classe sul <body>: .p-users-anagrafica-create ---- */
body:where(.p-users-anagrafica-create) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--vx-surface2); margin:0; }
@media (max-width: 768px) {
:where(.p-users-anagrafica-create) .header-content { flex-direction: column; align-items: center; text-align: center; }
:where(.p-users-anagrafica-create) .header-actions { flex-direction: column; align-items: center; gap: 8px; }

		
}:where(.p-users-anagrafica-create) .form-group { margin-bottom:14px; }:where(.p-users-anagrafica-create) label { display:block; margin-bottom:6px; }:where(.p-users-anagrafica-create) input[type=text],
:where(.p-users-anagrafica-create) input[type=email],
:where(.p-users-anagrafica-create) input[type=number],
:where(.p-users-anagrafica-create) select { width:100%; padding:10px; border:1px solid var(--vx-border); border-radius:8px; box-sizing: border-box; }:where(.p-users-anagrafica-create) .email-input { padding-right: 40px !important; }:where(.p-users-anagrafica-create) .actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }:where(.p-users-anagrafica-create) .error { background:var(--vx-danger-soft); color:var(--vx-danger); padding:10px; border-radius:8px; margin-bottom:10px; }:where(.p-users-anagrafica-create) .tipologia-checkbox:hover {
			background: var(--vx-info-soft) !important;
			border-color: var(--vx-info) !important;
		}:where(.p-users-anagrafica-create) .tipologia-checkbox input[type="checkbox"]:checked + label {
			color: var(--vx-info);
		}:where(.p-users-anagrafica-create) .tipologie-permissions-section {
			background: var(--vx-surface2);
			border: 1px solid var(--vx-border);
			border-radius: 8px;
			padding: 15px;
			margin-top: 5px;
		}:where(.p-users-anagrafica-create) .tipologie-permissions-header {
			font-weight: 600;
			color: var(--vx-text);
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 8px;
		}:where(.p-users-anagrafica-create) .tipologie-permission-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 15px;
		}:where(.p-users-anagrafica-create) .tipologia-permission-tag {
			background: var(--vx-accent);
			color: var(--vx-on-fill);
			padding: 8px 12px;
			border-radius: 20px;
			font-size: 0.85rem;
			display: flex;
			align-items: center;
			gap: 8px;
		}:where(.p-users-anagrafica-create) .tipologia-permission-tag button {
			background: none;
			border: none;
			color: var(--vx-on-accent);
			cursor: pointer;
			padding: 0;
			font-size: 1rem;
			margin-left: 4px;
		}:where(.p-users-anagrafica-create) .tipologia-permission-tag button:hover {
			color: var(--vx-danger-soft);
		}:where(.p-users-anagrafica-create) .add-tipologia-form {
			margin-top: 15px;
			padding-top: 15px;
			border-top: 1px solid var(--vx-border);
		}:where(.p-users-anagrafica-create) .form-row {
			display: flex;
			gap: 15px;
			align-items: flex-end;
		}:where(.p-users-anagrafica-create) .form-row .form-group {
			flex: 1;
			margin-bottom: 0;
		}/* ---- users/anagrafica_delete.php — classe sul <body>: .p-users-anagrafica-delete ---- */
body:where(.p-users-anagrafica-delete) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--vx-surface2); margin: 0; }:where(.p-users-anagrafica-delete) h1 { margin: 0 0 8px; font-size: 1.5rem; color: var(--vx-text); }:where(.p-users-anagrafica-delete) .subtitle { color: var(--vx-muted); margin: 0 0 20px; line-height: 1.5; }:where(.p-users-anagrafica-delete) .info-box { background: var(--vx-surface2); border: 1px solid var(--vx-surface3); border-radius: 10px; padding: 16px; margin-bottom: 20px; }:where(.p-users-anagrafica-delete) .info-box strong { display: block; margin-bottom: 6px; color: var(--vx-text); }:where(.p-users-anagrafica-delete) label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--vx-text-soft); }:where(.p-users-anagrafica-delete) input[type="text"] { width: 100%; padding: 12px; border: 1px solid var(--vx-border); border-radius: 8px; box-sizing: border-box; }:where(.p-users-anagrafica-delete) .hint { font-size: 0.88rem; color: var(--vx-muted); margin-top: 6px; }:where(.p-users-anagrafica-delete) .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }:where(.p-users-anagrafica-delete) .btn-danger:disabled { opacity: .55; cursor: not-allowed; }:where(.p-users-anagrafica-delete) code { background: var(--vx-surface3); padding: 2px 6px; border-radius: 4px; }/* ---- users/anagrafica_edit.php — classe sul <body>: .p-users-anagrafica-edit ---- */
body:where(.p-users-anagrafica-edit) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--vx-surface2); margin:0; }:where(.p-users-anagrafica-edit) .card + .card { margin-top: 28px; }:where(.p-users-anagrafica-edit) .card-dettagli { border-top: 3px solid rgba(102, 126, 234, 0.15); }:where(.p-users-anagrafica-edit) .form-group { margin-bottom:14px; }:where(.p-users-anagrafica-edit) label { display:block; margin-bottom:6px; }:where(.p-users-anagrafica-edit) input[type=text],
:where(.p-users-anagrafica-edit) input[type=email],
:where(.p-users-anagrafica-edit) input[type=number],
:where(.p-users-anagrafica-edit) select { width:100%; padding:10px; border:1px solid var(--vx-border); border-radius:8px; box-sizing: border-box; }:where(.p-users-anagrafica-edit) .email-input { padding-right: 40px !important; }:where(.p-users-anagrafica-edit) .actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }:where(.p-users-anagrafica-edit) .error { background:var(--vx-danger-soft); color:var(--vx-danger); padding:10px; border-radius:8px; margin-bottom:10px; }:where(.p-users-anagrafica-edit) .success { background:var(--vx-success-soft); color:var(--vx-success); padding:12px; border-radius:8px; margin-bottom:15px; border-left:4px solid var(--vx-success); animation: p-users-anagrafica-edit-slideDown 0.3s ease-out; }
@keyframes p-users-anagrafica-edit-slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }:where(.p-users-anagrafica-edit) .tipologia-checkbox {
			transition: all 0.3s ease;
		}:where(.p-users-anagrafica-edit) .tipologia-checkbox:hover {
			background: var(--vx-info-soft) !important;
			border-color: var(--vx-info) !important;
		}:where(.p-users-anagrafica-edit) .tipologia-checkbox input[type="checkbox"]:checked + label {
			color: var(--vx-info);
		}:where(.p-users-anagrafica-edit) .tipologia-checkbox input[type="checkbox"] {
			width: 18px;
			height: 18px;
			accent-color: var(--vx-accent);
		}:where(.p-users-anagrafica-edit) .tipologie-permissions-section {
			background: var(--vx-surface2);
			border: 1px solid var(--vx-border);
			border-radius: 8px;
			padding: 15px;
			margin-top: 5px;
		}:where(.p-users-anagrafica-edit) .tipologie-permissions-header {
			font-weight: 600;
			color: var(--vx-text);
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 8px;
		}:where(.p-users-anagrafica-edit) .tipologie-permission-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 15px;
		}:where(.p-users-anagrafica-edit) .tipologia-permission-tag {
			background: var(--vx-accent);
			color: var(--vx-on-fill);
			padding: 8px 12px;
			border-radius: 20px;
			font-size: 0.85rem;
			display: flex;
			align-items: center;
			gap: 8px;
		}:where(.p-users-anagrafica-edit) .tipologia-permission-tag button {
			background: none;
			border: none;
			color: var(--vx-on-accent);
			cursor: pointer;
			padding: 0;
			font-size: 1rem;
			margin-left: 4px;
		}:where(.p-users-anagrafica-edit) .tipologia-permission-tag button:hover {
			color: var(--vx-danger-soft);
		}:where(.p-users-anagrafica-edit) .add-tipologia-form {
			margin-top: 15px;
			padding-top: 15px;
			border-top: 1px solid var(--vx-border);
		}:where(.p-users-anagrafica-edit) .form-row {
			display: flex;
			gap: 15px;
			align-items: flex-end;
		}:where(.p-users-anagrafica-edit) .form-row .form-group {
			flex: 1;
			margin-bottom: 0;
		}:where(.p-users-anagrafica-edit) .relazioni-container {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}:where(.p-users-anagrafica-edit) .relazioni-section {
			background: var(--vx-surface2);
			border-radius: 8px;
			padding: 15px;
		}:where(.p-users-anagrafica-edit) .relazioni-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}:where(.p-users-anagrafica-edit) .relazione-item {
			background: var(--vx-surface);
			border: 1px solid var(--vx-border);
			border-radius: 6px;
			padding: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: box-shadow 0.2s ease;
		}:where(.p-users-anagrafica-edit) .relazione-item:hover {
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		}:where(.p-users-anagrafica-edit) .relazione-info {
			flex: 1;
		}:where(.p-users-anagrafica-edit) .anagrafica-name {
			font-weight: 600;
			color: var(--vx-text);
			margin-bottom: 4px;
		}:where(.p-users-anagrafica-edit) .relazione-type {
			margin-top: 4px;
		}:where(.p-users-anagrafica-edit) .badge {
			display: inline-block;
			padding: 4px 8px;
			font-size: 12px;
			font-weight: 500;
			border-radius: 12px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}:where(.p-users-anagrafica-edit) .badge-primary {
			background: var(--vx-accent);
			color: var(--vx-on-fill);
		}:where(.p-users-anagrafica-edit) .relazione-actions {
			display: flex;
			gap: 8px;
		}:where(.p-users-anagrafica-edit) .btn-icon[title="Visualizza Scheda"]:hover {
			background: var(--vx-success-soft);
			color: var(--vx-success);
		}:where(.p-users-anagrafica-edit) .btn-icon[title="Gestisci Relazioni"]:hover {
			background: var(--vx-warning-soft);
			color: var(--vx-warning);
		}/* ---- users/confirm_delete.php — classe sul <body>: .p-users-confirm-delete ---- */
body:where(.p-users-confirm-delete) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-gradient);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-users-confirm-delete) .confirm-container {
            background: var(--vx-surface);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 40px;
            width: 100%;
            max-width: 600px;
            margin: 20px;
        }:where(.p-users-confirm-delete) .warning-box {
            background: var(--vx-warning-soft);
            border: 2px solid var(--vx-warning);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
            color: var(--vx-warning);
        }:where(.p-users-confirm-delete) .warning-box h3 {
            margin: 0 0 15px 0;
            color: var(--vx-warning);
            display: flex;
            align-items: center;
            gap: 10px;
        }:where(.p-users-confirm-delete) .user-info h4 {
            margin: 0 0 15px 0;
            color: var(--vx-text);
        }:where(.p-users-confirm-delete) .user-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }:where(.p-users-confirm-delete) .user-detail {
            display: flex;
            flex-direction: column;
        }:where(.p-users-confirm-delete) .user-detail label {
            font-weight: 600;
            color: var(--vx-text-soft);
            margin-bottom: 5px;
        }:where(.p-users-confirm-delete) .user-detail span {
            color: var(--vx-text);
            font-size: 14px;
        }:where(.p-users-confirm-delete) .confirmation-section {
            background: var(--vx-surface2);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
        }:where(.p-users-confirm-delete) .confirmation-section h4 {
            margin: 0 0 15px 0;
            color: var(--vx-text);
        }:where(.p-users-confirm-delete) .form-group {
            margin-bottom: 20px;
        }:where(.p-users-confirm-delete) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-users-confirm-delete) .form-group input[type="text"] {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }:where(.p-users-confirm-delete) .form-group input[type="text"]:focus {
            outline: none;
            border-color: var(--vx-danger);
        }:where(.p-users-confirm-delete) .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
        }:where(.p-users-confirm-delete) .danger-zone {
            border: 2px solid var(--vx-danger);
            border-radius: 8px;
            padding: 20px;
            background: var(--vx-danger-soft);
        }:where(.p-users-confirm-delete) .danger-zone h4 {
            color: var(--vx-danger);
            margin: 0 0 15px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
@media (max-width: 768px) {
:where(.p-users-confirm-delete) .confirm-container {
                margin: 10px;
                padding: 20px;
            }
:where(.p-users-confirm-delete) .user-details {
                grid-template-columns: 1fr;
            }
:where(.p-users-confirm-delete) .button-group {
                flex-direction: column;
            }

        
}/* ---- users/index.php — classe sul <body>: .p-users-index ---- */
body:where(.p-users-index) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--vx-surface2); margin:0; }:where(.p-users-index) .actions a { 
			display:block; 
			margin:4px 0; 
			text-decoration:none; 
			padding: 6px 10px;
			border-radius: 4px;
			background: var(--vx-surface2);
			border: 1px solid var(--vx-border);
			color: var(--vx-text-soft);
			transition: all 0.2s ease;
			font-size: 13px;
		}:where(.p-users-index) .actions a:hover {
			background: var(--vx-accent);
			color: var(--vx-on-fill);
			border-color: var(--vx-accent);
		}:where(.p-users-index) .actions {
			min-width: 200px;
		}:where(.p-users-index) .badge { padding:4px 10px; border-radius:20px; font-size:12px; }:where(.p-users-index) .badge-on { background:var(--vx-success-soft); color:var(--vx-success); }:where(.p-users-index) .badge-off { background:var(--vx-danger-soft); color:var(--vx-danger); }:where(.p-users-index) .search-bar { background: var(--vx-surface2); padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid var(--vx-accent); }:where(.p-users-index) .search-input { width: 100%; max-width: 400px; padding: 10px; border: 1px solid var(--vx-border); border-radius: 8px; font-size: 14px; }:where(.p-users-index) .search-btn { background: var(--vx-accent); color: var(--vx-on-fill); padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; margin-left: 10px; }:where(.p-users-index) .search-btn:hover { background: var(--vx-accent-hover); }:where(.p-users-index) .clear-btn { background: var(--vx-muted); color: var(--vx-on-fill); padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; margin-left: 5px; text-decoration: none; display: inline-block; }:where(.p-users-index) .clear-btn:hover { background: var(--vx-muted); }:where(.p-users-index) .actions a i {
			margin-right: 5px;
			width: 14px;
			text-align: center;
		}:where(.p-users-index) .modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}:where(.p-users-index) .modal-content {
			background-color: var(--vx-surface);
			margin: 5% auto;
			padding: 20px;
			border-radius: 12px;
			width: 90%;
			max-width: 600px;
			max-height: 80vh;
			overflow-y: auto;
		}:where(.p-users-index) .close {
			color: var(--vx-faint);
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}:where(.p-users-index) .close:hover { color: var(--vx-text); }:where(.p-users-index) .user-card {
			display: none;
			background: var(--vx-surface);
			border-radius: 12px;
			padding: 15px;
			margin-bottom: 15px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			border-left: 4px solid var(--vx-accent);
		}:where(.p-users-index) .user-card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}:where(.p-users-index) .user-card-title {
			font-weight: bold;
			color: var(--vx-text);
			font-size: 16px;
		}:where(.p-users-index) .user-card-actions {
			display: flex;
			gap: 5px;
			flex-wrap: wrap;
		}:where(.p-users-index) .user-card-actions a {
			background: var(--vx-surface2);
			border: 1px solid var(--vx-border);
			color: var(--vx-text-soft);
			padding: 6px 10px;
			border-radius: 6px;
			text-decoration: none;
			font-size: 12px;
			transition: all 0.2s;
		}:where(.p-users-index) .user-card-actions a:hover {
			background: var(--vx-accent);
			color: var(--vx-on-fill);
		}:where(.p-users-index) .user-card-details {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			font-size: 14px;
			color: var(--vx-muted);
		}:where(.p-users-index) .user-card-detail {
			display: flex;
			flex-direction: column;
		}:where(.p-users-index) .user-card-detail strong {
			color: var(--vx-text);
			font-size: 12px;
			text-transform: uppercase;
			margin-bottom: 2px;
		}
@media (max-width: 768px) {
:where(.p-users-index) .table-container {
				display: none;
			}
:where(.p-users-index) .cards-container {
				display: block;
			}
:where(.p-users-index) .user-card {
				display: block;
			}
:where(.p-users-index) .user-card-details {
				grid-template-columns: 1fr;
			}

		
}
@media (min-width: 769px) {
:where(.p-users-index) .cards-container {
				display: none;
			}
:where(.p-users-index) .table-container {
				display: block;
			}

		
}/* ---- users/send_email.php — classe sul <body>: .p-users-send-email ---- */
:where(.p-users-send-email),
:where(.p-users-send-email) * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body:where(.p-users-send-email) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            min-height: 100vh;
        }:where(.p-users-send-email) .user-info-card {
            background: var(--vx-surface2);
            border-left: 4px solid var(--vx-accent);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }:where(.p-users-send-email) .user-info-card h3 {
            color: var(--vx-text);
            margin-bottom: 10px;
        }:where(.p-users-send-email) .user-details {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }:where(.p-users-send-email) .user-detail {
            display: flex;
            flex-direction: column;
        }:where(.p-users-send-email) .user-detail label {
            font-weight: 600;
            color: var(--vx-text-soft);
            margin-bottom: 5px;
        }:where(.p-users-send-email) .user-detail span {
            color: var(--vx-text);
            padding: 8px 12px;
            background: var(--vx-surface);
            border-radius: 4px;
            border: 1px solid var(--vx-border);
        }:where(.p-users-send-email) .email-preview {
            background: var(--vx-surface2);
            border: 1px solid var(--vx-border);
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }:where(.p-users-send-email) .email-preview h4 {
            color: var(--vx-text);
            margin-bottom: 15px;
        }:where(.p-users-send-email) .email-preview p {
            color: var(--vx-muted);
            line-height: 1.6;
        }
@media (max-width: 768px) {
:where(.p-users-send-email) .container {
                padding: 15px;
            }

        
}/* ---- users/user_create.php — classe sul <body>: .p-users-user-create ---- */
body:where(.p-users-user-create) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--vx-surface2); margin:0; }
@media (max-width: 768px) {
:where(.p-users-user-create) .header-content { flex-direction: column; align-items: center; text-align: center; }
:where(.p-users-user-create) .header-actions { flex-direction: column; align-items: center; gap: 8px; }

		
}:where(.p-users-user-create) .form-group { margin-bottom:14px; }:where(.p-users-user-create) label { display:block; margin-bottom:6px; }:where(.p-users-user-create) input[type=text],
:where(.p-users-user-create) input[type=email],
:where(.p-users-user-create) input[type=password] { width:100%; padding:10px; border:1px solid var(--vx-border); border-radius:8px; }:where(.p-users-user-create) .info-box { background: var(--vx-info-soft); border: 1px solid var(--vx-info); border-radius: 8px; padding: 12px; color: var(--vx-info); font-size: 14px; }:where(.p-users-user-create) .info-box i { margin-right: 8px; color: var(--vx-info); }:where(.p-users-user-create) .actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }:where(.p-users-user-create) .error { background:var(--vx-danger-soft); color:var(--vx-danger); padding:10px; border-radius:8px; margin-bottom:10px; }/* ---- users/user_edit.php — classe sul <body>: .p-users-user-edit ---- */
body:where(.p-users-user-edit) { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--vx-surface2); margin:0; }
@media (max-width: 768px) {
:where(.p-users-user-edit) .header-content { flex-direction: column; align-items: center; text-align: center; }
:where(.p-users-user-edit) .header-actions { flex-direction: column; align-items: center; gap: 8px; }

		
}:where(.p-users-user-edit) .form-group { margin-bottom:14px; }:where(.p-users-user-edit) label { display:block; margin-bottom:6px; }:where(.p-users-user-edit) input[type=text],
:where(.p-users-user-edit) input[type=email],
:where(.p-users-user-edit) input[type=password] { width:100%; padding:10px; border:1px solid var(--vx-border); border-radius:8px; }:where(.p-users-user-edit) .info-box { background: var(--vx-info-soft); border: 1px solid var(--vx-info); border-radius: 8px; padding: 12px; color: var(--vx-info); font-size: 14px; }:where(.p-users-user-edit) .info-box i { margin-right: 8px; color: var(--vx-info); }:where(.p-users-user-edit) .actions { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }:where(.p-users-user-edit) .error { background:var(--vx-danger-soft); color:var(--vx-danger); padding:10px; border-radius:8px; margin-bottom:10px; }:where(.p-users-user-edit) .success { background:var(--vx-success-soft); color:var(--vx-success); padding:10px; border-radius:8px; margin-bottom:10px; }:where(.p-users-user-edit) .warn-box { background:var(--vx-warning-soft); border:1px solid var(--vx-warning); border-radius:8px; padding:14px; margin-bottom:16px; color:var(--vx-warning); font-size:14px; }:where(.p-users-user-edit) .small { color:var(--vx-muted); font-size:12px; }/* ---- users/user_types.php — classe sul <body>: .p-users-user-types ---- */
body:where(.p-users-user-types) {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--vx-surface2);
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }:where(.p-users-user-types) .actions-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            gap: 15px;
        }:where(.p-users-user-types) .search-bar {
            flex: 1;
            max-width: 400px;
            position: relative;
        }:where(.p-users-user-types) .search-bar input {
            width: 100%;
            padding: 12px 40px 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }:where(.p-users-user-types) .search-bar input:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-users-user-types) .search-bar i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--vx-faint);
        }:where(.p-users-user-types) .types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }:where(.p-users-user-types) .type-card {
            background: var(--vx-surface);
            border: 1px solid var(--vx-border);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            /* Colonna: cosi' i blocchi in fondo si allineano fra schede
               affiancate, invece di seguire la lunghezza della descrizione.
               Una descrizione su due righe faceva scendere i pulsanti di quella
               scheda sola, e la fila sembrava sfalsata. */
            display: flex;
            flex-direction: column;
            min-width: 0;
        }:where(.p-users-user-types) .type-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }:where(.p-users-user-types) .type-card.inactive {
            opacity: 0.6;
            background: var(--vx-surface2);
        }:where(.p-users-user-types) .type-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 0;
        }:where(.p-users-user-types) .type-name {
            min-width: 0;
            overflow-wrap: break-word;
            font-size: 1.12rem;
            font-weight: 600;
            color: var(--vx-text);
            margin: 0;
        }:where(.p-users-user-types) .type-status {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 5px;
            font-size: 0.78rem;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: 600;
        }:where(.p-users-user-types) .type-status.active {
            background: var(--vx-success-soft);
            color: var(--vx-success);
        }:where(.p-users-user-types) .type-status.inactive {
            background: var(--vx-danger-soft);
            color: var(--vx-danger);
        }:where(.p-users-user-types) .type-description {
            color: var(--vx-muted);
            margin: 8px 0 0;
            line-height: 1.45;
            font-size: .9rem;
        }:where(.p-users-user-types) .type-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            margin: 14px 0 0;
            padding: 9px 11px;
            background: var(--vx-surface2);
            border-radius: 8px;
        }:where(.p-users-user-types) .type-stat {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--vx-muted);
            font-size: 0.9rem;
        }:where(.p-users-user-types) .type-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            /* `auto` schiaccia la riga in fondo alla scheda. Se sopra c'e' il
               riquadro dei poteri, e' quello ad assorbire lo spazio e qui
               l'`auto` non trova piu' niente da prendere: in entrambi i casi i
               pulsanti restano allineati con quelli delle schede accanto. */
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid var(--vx-border);
        }:where(.p-users-user-types) .type-actions .btn {
            /* Tre pulsanti a 336 pixel non entravano in una scheda larga 319:
               andavano a capo, e la riga di quella scheda scendeva rispetto a
               quelle accanto. Si dividono lo spazio in parti uguali e restano
               su una riga sola; se davvero non ci stanno vanno a capo tutti
               insieme, non uno solo. */
            flex: 1 1 0;
            justify-content: center;
            min-width: 0;
            padding: 7px 10px;
            font-size: .8rem;
            white-space: nowrap;
        }:where(.p-users-user-types) .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: p-users-user-types-fadeIn 0.3s;
        }:where(.p-users-user-types) .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }:where(.p-users-user-types) .modal-content {
            background-color: var(--vx-surface);
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            animation: p-users-user-types-slideUp 0.3s;
        }:where(.p-users-user-types) .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }:where(.p-users-user-types) .modal-header h2 {
            margin: 0;
            color: var(--vx-text);
        }:where(.p-users-user-types) .close {
            font-size: 28px;
            font-weight: bold;
            color: var(--vx-faint);
            cursor: pointer;
            transition: color 0.3s;
        }:where(.p-users-user-types) .close:hover {
            color: var(--vx-text);
        }:where(.p-users-user-types) .form-group {
            margin-bottom: 20px;
        }:where(.p-users-user-types) .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--vx-text);
        }:where(.p-users-user-types) .form-group input,
:where(.p-users-user-types) .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--vx-border);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
            box-sizing: border-box;
            font-family: inherit;
        }:where(.p-users-user-types) .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }:where(.p-users-user-types) .form-group input:focus,
:where(.p-users-user-types) .form-group textarea:focus {
            outline: none;
            border-color: var(--vx-accent);
        }:where(.p-users-user-types) .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
        }
@keyframes p-users-user-types-fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
@keyframes p-users-user-types-slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
@media (max-width: 768px) {
:where(.p-users-user-types) .types-grid {
                grid-template-columns: 1fr;
            }
:where(.p-users-user-types) .actions-bar {
                flex-direction: column;
                align-items: stretch;
            }
:where(.p-users-user-types) .search-bar {
                max-width: 100%;
            }
:where(.p-users-user-types) .modal-content {
                width: 95%;
                padding: 20px;
            }

        
}

    

/* ==========================================================================
   11. ECCEZIONI DI TEMA
   (era includes/ui/vx-tema.css)
   ========================================================================== */
/* ==========================================================================
   MyVortex — Tema diurno (predefinito) e notturno
   --------------------------------------------------------------------------
   Questo foglio NON dichiara token: quelli vivono in includes/ui/vx-base.css,
   che viene caricato prima e definisce sia la palette diurna (:root) sia quella
   notturna (html.vx-theme-night).

   Fino a R6-quaterdecies qui c'erano 488 righe che rimettevano a posto, una
   classe alla volta, tutti i componenti che avevano il colore scritto a mano.
   Era una rincorsa senza fine: ogni pagina nuova nasceva bianca finche' qualcuno
   non aggiungeva il suo nome a questo elenco. Ora i fogli dei moduli usano i
   token e cambiano tema da soli.

   REGOLA: qui dentro si scrive solo cio' che il tema notturno deve fare
   DIVERSAMENTE, non cio' che i token gia' fanno. Se stai per aggiungere una
   riga come "html.vx-theme-night .qualcosa { background: var(--vx-surface) }",
   il posto giusto e' il CSS di .qualcosa, non questo file (Regola 5.18).
   ========================================================================== */

html.vx-theme-day { color-scheme: light; }
html.vx-theme-night { color-scheme: dark; }

/* --------------------------------------------------------------------------
   1. Pulsante di cambio tema
   Non e' un'eccezione di tema: e' un componente che vive sulla testata a
   gradiente, quindi e' chiaro in entrambi i temi. Sta qui perche' e' il
   comando del tema.
   -------------------------------------------------------------------------- */
.vx-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: var(--vx-on-accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.vx-theme-btn:hover { background: rgba(255, 255, 255, 0.32); }
.vx-theme-btn i { font-size: 1rem; }

/* --------------------------------------------------------------------------
   2. Fondo pagina
   Le pagine storiche dichiarano il proprio background sul <body> senza usare
   i token; questa regola le riporta al fondo di tema. Resta finche' esistono
   quelle pagine.
   -------------------------------------------------------------------------- */
/* Il fondo di pagina NON si dichiara piu' qui. Vive nella sezione 2, dentro
   :where(), e cambia da solo col tema perche' usa --vx-bg. Dichiararlo di nuovo
   con "html.vx-theme-night body" avrebbe una specificita alta e coprirebbe le
   pagine che hanno un fondo proprio: il login, per esempio, sta su un gradiente. */

/* --------------------------------------------------------------------------
   3. Collegamenti
   Di notte il testo dei link ha bisogno dell'accento chiaro. Le eccezioni sono
   gli elementi che stanno gia' su un fondo pieno (pulsanti, testata, menu).
   -------------------------------------------------------------------------- */
html.vx-theme-night body.eventi-page a:not(.vx-btn):not(.btn):not(.logout-btn):not(.header-title-link):not(.vg-menu-item):not(.stat-card-link):not(.vx-cal__ev):not(.vx-cal__day) {
    color: var(--vx-accent-strong);
}

/* --------------------------------------------------------------------------
   4. Superfici scure che restano scure
   .vx-box--soft e .vx-selettore sono barre chiare di giorno: di notte non
   possono limitarsi a --vx-surface2, altrimenti sparisce lo stacco dal
   pannello che le contiene.
   -------------------------------------------------------------------------- */
html.vx-theme-night .vx-box--soft,
html.vx-theme-night .vx-selettore {
    background: var(--vx-featured-bg);
    border-color: var(--vx-featured-bg);
    color: var(--vx-featured-text);
}

/* --------------------------------------------------------------------------
   5. Riempimento automatico e ombre delle finestre modali
   Superfici sovrapposte al contenuto: di notte l'ombra da sola non basta a
   staccarle, serve un bordo.
   -------------------------------------------------------------------------- */
html.vx-theme-night .collab-modal__panel,
html.vx-theme-night .modal-content,
html.vx-theme-night #customizeModal > div {
    border: 1px solid var(--vx-border);
}

/* --------------------------------------------------------------------------
   6. Immagini e firme su fondo bianco
   Una firma raccolta su canvas e' inchiostro scuro su trasparente: sul fondo
   notturno sparirebbe. Il riquadro resta chiaro apposta.
   -------------------------------------------------------------------------- */
html.vx-theme-night .collab-signature-wrap,
html.vx-theme-night .collab-firma-preview {
    background: #ffffff;
}


/* ==========================================================================
   12. RESPONSIVE — ultimo foglio: vince su tutto
   (era includes/mobile.css)
   ========================================================================== */
/**
 * MyVortex — layout mobile (niente scroll orizzontale di pagina)
 */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

/* Fondo di pagina predefinito, a specificita ZERO: qualunque pagina che
   dichiari il proprio fondo (il login sta su un gradiente) vince su questa.
   Cambia col tema da solo, perche' --vx-bg e' ridefinito nella sezione 1. */
:where(html, body) {
  background: var(--vx-bg);
  color: var(--vx-text);
}

img,
video,
svg,
canvas,
iframe,
table {
  max-width: 100%;
}

canvas {
  height: auto;
}

.main-content,
.container,
.collab-wrap,
.doc-wrap,
.eventi-container,
.eventi-main,
.page-header,
.card,
.collab-card,
.welcome-card,
.dashboard-body,
.dashboard-panel,
.quick-actions,
.vx-box,
.vx-grid,
.vx-toolbar,
.vx-filters,
.vx-selettore,
.vx-chart,
.vx-table-wrap {
  max-width: 100%;
  min-width: 0;
}

.header-content,
.header-left,
.header-brand-col,
.user-info,
.collab-grid,
.stats-grid,
.filter-row,
.permissions-grid,
.actions-grid,
.search-bar,
.page-title,
.welcome-card-tools,
.dash-period,
.vx-tabs {
  min-width: 0;
  max-width: 100%;
}

.vx-scroll-x,
.vx-table-wrap,
.table-responsive,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.eventi-container > *,
.main-content > *,
.container > *,
.collab-wrap > *,
.doc-wrap > *,
.vx-box > *,
.card > *,
.collab-card > * {
  min-width: 0;
  max-width: 100%;
}

.vx-dl dd,
.collab-kv dd,
.pg-kv dd,
.dashboard-kv dd,
.doc-item,
.collab-field,
.inv-field {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Solo testi lunghi tecnici, non paragrafi normali */
.page-path,
.doc-table td a,
code,
pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 768px) {
  :root {
    --mv-header-height: 56px;
    --mv-content-gap: 12px;
    --mv-content-gap-x: 16px;
  }

  /* ——— Header app-style ——— */
  .header {
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
  }

  .header-content {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    min-height: var(--mv-header-height);
  }

  .header-left {
    flex: 1 1 auto;
    gap: 10px !important;
    overflow: hidden;
  }

  .header-menu-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
  }

  .header-brand-col,
  .header-title-link {
    min-width: 0;
    overflow: hidden;
  }

  /* Logo + titolo compatto */
  .header-logo {
    height: 36px !important;
    max-width: 110px !important;
  }

  .header h1,
  .header-title-link h1 {
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-info {
    flex: 0 0 auto;
    gap: 6px !important;
    flex-wrap: nowrap;
  }

  /* Nascondi blocco nome/tipo (resta nel menu) */
  .user-info > div:not(.user-avatar):not(.avvisi-wrap) {
    display: none;
  }

  .user-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.72rem !important;
  }

  .logout-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    flex-shrink: 0;
  }

  .logout-btn i {
    font-size: 1rem;
    margin: 0;
  }

  .vx-theme-btn {
    width: 40px;
    height: 40px;
  }

  .avvisi-bell-btn {
    width: 40px;
    height: 40px;
  }

  /* ——— Contenuto ——— */
  .main-content,
  body > .container,
  .collab-wrap,
  .doc-wrap,
  .eventi-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 28px !important;
  }

  .page-title {
    margin-bottom: 16px;
    gap: 12px;
  }

  .page-title h1,
  .vx-page-title,
  .content-header h1,
  .page-header h1 {
    font-size: 1.25rem !important;
    line-height: 1.3;
  }

  .card,
  .collab-card,
  .welcome-card,
  .dashboard-panel,
  .dashboard-alert,
  .quick-actions {
    border-radius: 12px;
    padding: 16px !important;
  }

  .welcome-card h2 {
    font-size: 1.2rem !important;
  }

  /* Bottoni: griglia flessibile, non tutti a tutta larghezza */
  .collab-actions,
  .filter-actions,
  .page-header-actions,
  .doc-perm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .collab-actions .btn,
  .filter-actions .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    justify-content: center;
  }

  .collab-actions .btn:only-child,
  .filter-actions .btn:only-child {
    flex: 1 1 100%;
  }

  /* Toolbar con molti bottoni (es. PDF) */
  .collab-actions--stack-mobile {
    flex-direction: column;
  }

  .collab-actions--stack-mobile .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .search-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px !important;
  }

  .search-bar input {
    flex: 1 1 100%;
    min-width: 0;
  }

  .filters-row,
  .filter-row,
  .form-row {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .filter-group,
  .form-group,
  .filters-row > *,
  .filter-row > *,
  .form-row > * {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    flex: 1 1 100%;
    box-sizing: border-box;
  }

  .save-bar,
  .save-bar-top {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px !important;
  }

  .save-bar-top-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .save-bar-top-actions .btn {
    flex: 1 1 auto;
  }

  .page-info {
    min-width: 0 !important;
  }

  /* ——— Dashboard ——— */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px !important;
  }

  .stat-icon-wrap {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .stat-number {
    font-size: 1.35rem !important;
  }

  .stat-label {
    font-size: 0.8rem !important;
  }

  .dashboard-recent-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px !important;
  }

  .dashboard-recent-stato {
    white-space: normal;
    text-align: center;
  }

  .dashboard-panel-compact .dashboard-panel-head {
    padding: 14px 16px 0 !important;
  }

  .welcome-card-head {
    gap: 14px;
  }

  .welcome-card-head .customize-btn {
    width: 100%;
    justify-content: center;
  }

  .actions-grid {
    grid-template-columns: 1fr !important;
  }

  .action-btn:hover {
    transform: none;
  }

  /* ——— Sidebar ——— */
  .vg-sidebar {
    width: 100% !important;
    left: -100% !important;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
  }

  .vg-sidebar.open {
    left: 0 !important;
  }

  .vg-menu-item {
    padding: 12px 14px !important;
    min-height: 44px;
    font-size: 0.95rem !important;
  }

  .vg-menu-section-title {
    padding: 16px 18px 12px !important;
  }

  .vg-menu-toggle {
    left: 10px !important;
    top: auto !important;
  }

  body.eventi-page .header-left,
  body.eventi-page .header-title-link {
    flex-wrap: nowrap;
    min-width: 0;
  }

  /* Bersaglio di tocco: 44px sui comandi di contenuto (Regola 5.17). I comandi
     della testata restano a 40px di proposito: stanno dentro una barra da 56px
     e sono gia' ben distanziati. */
  .btn,
  .vx-btn,
  button.btn,
  a.btn,
  .action-btn,
  .doc-btn,
  .customize-btn,
  body.eventi-page .vx-btn,
  body.eventi-page a.vx-btn,
  body.eventi-page button.vx-btn {
    min-height: 44px;
  }

  /* Form touch-friendly */
  input,
  select,
  textarea,
  .collab-field input,
  .collab-field select,
  .collab-field textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Griglie: una colonna, niente minmax che sfora */
  .vx-grid,
  .vx-grid--2,
  .vx-grid--fixed-2,
  .vx-grid--wide,
  .vx-form,
  .vx-recipients,
  .pg-grid,
  .doc-grid {
    grid-template-columns: 1fr !important;
  }

  .vx-stat__value,
  .stat-number {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 1.2rem !important;
  }

  .vx-nowrap {
    white-space: normal !important;
  }

  .vx-toolbar,
  .vx-toolbar__group,
  .welcome-card-tools,
  .dash-period {
    width: 100%;
    flex-wrap: wrap;
  }

  .dash-period__item {
    flex: 1 1 auto;
    min-width: 0;
  }

  .vx-tabs {
    gap: 0;
  }

  .vx-tab {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  .vx-chart {
    height: 200px;
  }

  .dash-week {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .dash-week__day {
    padding: 8px 2px;
    min-width: 0;
  }

  .vx-cal {
    table-layout: fixed;
    width: 100%;
  }

  .vx-cal th,
  .vx-cal td {
    overflow: hidden;
    word-break: break-word;
  }

  .vx-cal-legend,
  .vx-cal-layers {
    max-width: 100%;
  }

  .vx-anello-wrap {
    flex-wrap: wrap;
  }

  .vx-form-grid,
  .vx-form-grid--hub-footer {
    grid-template-columns: 1fr !important;
  }

  .hub-spec-table {
    min-width: 0 !important;
  }

  .inv-filters,
  .inv-filters .inv-filter,
  .inv-filters .inv-filter--grow {
    width: 100%;
    min-width: 0;
  }

  .inv-filters input,
  .inv-filters select,
  .inv-filters .inv-filter--grow input {
    min-width: 0 !important;
    width: 100%;
  }

  .inv-grid,
  .collab-filters-grid,
  .permissions-grid,
  .form-row,
  .form-grid,
  .filters-grid {
    grid-template-columns: 1fr !important;
  }

  .doc-actions,
  .pg-actions,
  .collab-page-head__actions,
  .page-header-actions,
  .button-group,
  .action-buttons,
  .actions {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .page-badges,
  .user-permission-list,
  .eventi-editor-actions,
  .license-card-top {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  .doc-actions > *,
  .pg-actions > *,
  .collab-page-head__actions > *,
  .page-header-actions > *,
  .button-group > *,
  .action-buttons > * {
    max-width: 100%;
  }

  /* Tabelle legacy: schede verticali, senza scorrimento orizzontale. */
  .table-container,
  .table-responsive,
  .collab-table-wrap,
  .vx-scroll-x,
  [style*="overflow-x: auto"],
  [style*="overflow-x:auto"] {
    overflow-x: visible !important;
  }

  .hub-spec-table {
    table-layout: fixed;
  }

  .hub-spec-table th,
  .hub-spec-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* L'albero conserva la gerarchia senza allargare la pagina. */
  .tree-container {
    overflow-x: visible !important;
    padding: 14px !important;
  }

  .tree,
  .tree-node,
  .tree-node-content {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .tree .level-1,
  .tree .level-2,
  .tree .level-3,
  .tree .level-4,
  .tree .level-5 {
    margin-left: 8px !important;
  }

  .tree-connector { margin-left: 8px !important; }
  .tree-connector::before,
  .tree-connector::after { left: -8px !important; }

  table.table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  table.table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.table tbody,
  table.table tbody tr {
    display: block;
    width: 100%;
  }

  table.table tbody tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--vx-border);
    border-radius: 12px;
    background: var(--vx-surface);
  }

  table.table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--vx-border) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  table.table tbody td::before {
    content: attr(data-label);
    color: var(--vx-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  table.table tbody td:last-child { border-bottom: 0 !important; }
  table.table tbody td[colspan] { display: block; }
  table.table tbody td[colspan]::before,
  table.table tbody td:not([data-label])::before { content: none; }

  #customizeModal > div {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    left: 12px !important;
    right: 12px !important;
    top: 8% !important;
    transform: none !important;
    max-height: 84vh !important;
  }
}

@media (max-width: 480px) {
  .header h1,
  .header-title-link h1 {
    display: none;
  }

  .header-logo {
    height: 32px !important;
    max-width: 96px !important;
  }

  .user-avatar {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .collab-actions .btn,
  .filter-actions .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) and (pointer: coarse) {
  .stat-card-link:hover,
  .stat-card:hover {
    transform: none;
  }
}

/* Calendario operativo: comandi laterali, area agenda libera e leggibile. */
.vx-cal-layout {
  display: grid;
  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.vx-cal-panel {
  position: sticky;
  top: calc(var(--mv-header-height) + 12px);
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - var(--mv-header-height) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius);
  background: var(--vx-surface2);
  box-shadow: var(--vx-shadow);
}

.vx-cal-panel__check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vx-cal-panel__toggle {
  display: none;
}

.vx-cal-panel__section + .vx-cal-panel__section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--vx-border);
}

.vx-cal-panel__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--vx-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vx-cal-panel__periodo {
  display: block;
  color: var(--vx-text);
  font-size: 1rem;
  text-transform: capitalize;
}

.vx-cal-panel__nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  margin-top: 8px;
}

.vx-cal-panel__oggi { justify-content: center; }

.vx-cal-panel .vx-cal-jump {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
}

.vx-cal-jump__row { display: flex; gap: 6px; margin-top: 4px; }
.vx-cal-panel .vx-cal-jump input[type="date"] { min-width: 0; width: 100%; }
.vx-cal-panel .vx-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.vx-cal-panel .vx-seg__item { padding-inline: 4px; text-align: center; }

.vx-cal-panel__actions {
  display: grid;
  gap: 6px;
}

.vx-cal-panel__actions .vx-btn { width: 100%; justify-content: flex-start; }

.vx-cal-panel__body > .vx-filters {
  margin: 10px -12px -12px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--vx-border);
}

.vx-cal-panel .vx-filters { padding: 0; margin: 0; }
.vx-cal-panel .vx-filters__head { margin-bottom: 8px; }
.vx-cal-panel .vx-filters-grid { grid-template-columns: 1fr; gap: 8px; }
.vx-cal-panel .vx-filters-field--wide { grid-column: auto; }
.vx-cal-panel .vx-filters-field small { display: none; }
.vx-cal-panel .vx-cal-layers {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
}
.vx-cal-panel .vx-cal-layers__item { width: 100%; }
.vx-cal-panel .vx-filters-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vx-cal-panel .vx-filters-actions .vx-btn:last-child { grid-column: 1 / -1; }
.vx-cal-panel .vx-chips { margin-top: 10px; }
.vx-cal-content { min-width: 0; }
.vx-cal-content > .vx-cal { margin-top: 0; }

.vx-cal-fold {
  margin: 0;
  border: 1px solid var(--vx-border);
  border-radius: 8px;
  background: var(--vx-surface);
}
.vx-cal-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--vx-text);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.vx-cal-fold > summary::-webkit-details-marker { display: none; }
.vx-cal-fold > summary::before {
  content: "";
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-15%) rotate(-45deg);
  flex: 0 0 auto;
}
.vx-cal-fold[open] > summary::before {
  transform: translateY(-5%) rotate(45deg);
}
.vx-cal-fold__count {
  margin-left: auto;
  color: var(--vx-muted);
  font-weight: 500;
}
.vx-cal-fold .vx-cal-layers {
  padding: 0 8px 8px;
}

@media (max-width: 1100px) {
  .vx-cal-layout { grid-template-columns: minmax(200px, 220px) minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 850px) {
  .vx-cal-layout { grid-template-columns: 1fr; }
  .vx-cal-panel {
    position: sticky;
    top: calc(var(--mv-header-height) + 8px);
    z-index: 20;
    max-height: none;
    overflow: visible;
    padding: 10px 12px;
  }
  .vx-cal-panel__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    background: var(--vx-surface);
    color: var(--vx-text);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
  }
  .vx-cal-panel__toggle i { color: var(--vx-accent); }
  .vx-cal-panel__toggle::after {
    content: "";
    width: .45em;
    height: .45em;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-15%) rotate(45deg);
  }
  .vx-cal-panel__check:checked + .vx-cal-panel__toggle::after {
    transform: translateY(15%) rotate(-135deg);
  }
  .vx-cal-panel__check:not(:checked) ~ .vx-cal-panel__body { display: none; }
  .vx-cal-panel__check:checked ~ .vx-cal-panel__body {
    display: block;
    max-height: min(58vh, 28rem);
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .vx-cal-panel .vx-filters-grid { grid-template-columns: 1fr; }
  .vx-cal-panel .vx-filters-field--full { grid-column: 1 / -1; }
  .vx-cal-panel .vx-cal-layers { grid-template-columns: 1fr; }
  .vx-cal-panel__body > .vx-filters {
    margin: 16px 0 0;
    padding: 16px 0 0;
  }
}

/* Calendario società: elenco consultabile e editor distinto e sempre visibile. */
.vx-company-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  grid-template-areas: "events editor";
  gap: 18px;
  align-items: start;
}

.vx-company-events { grid-area: events; min-width: 0; }

.vx-company-events__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vx-company-events__head h2 {
  margin: 0 0 3px;
  color: var(--vx-text);
  font-size: 1.1rem;
}

.vx-company-events__head p { margin: 0; color: var(--vx-muted); font-size: .82rem; }

.vx-company-events__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-accent-soft);
  color: var(--vx-accent-strong);
  font-weight: 700;
}

.vx-company-editor {
  grid-area: editor;
  position: sticky;
  top: 16px;
  margin: 0;
}

.vx-company-editor--editing { border: 2px solid var(--vx-accent); }

.vx-company-editor__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-accent-soft);
  color: var(--vx-accent-strong);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vx-company-editor .vx-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vx-company-editor textarea { min-height: 76px; }

.vx-company-event-link {
  color: var(--vx-accent-strong);
  font-weight: 700;
  text-decoration: none;
}

.vx-company-event-link:hover { text-decoration: underline; }

@media (max-width: 1050px) {
  .vx-company-calendar-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "events" "editor";
  }
  .vx-company-editor { position: static; }
}

@media (max-width: 768px) {
  /* Su telefono manteniamo la scala precedente e i campi a 16px per leggibilità
     e per impedire lo zoom automatico di Safari. */
  html,
  body.eventi-page { font-size: 14px; }
}

@media (max-width: 520px) {
  .vx-company-editor .vx-form { grid-template-columns: 1fr; }
}

/* Stato odierno: regola conclusiva intenzionalmente più specifica. Alcuni
   browser mantengono un text-fill del collegamento anche dopo il cambio tema. */
html body.eventi-page .vx-cal td.vx-cal__today .vx-cal__day,
html body.eventi-page .vx-cal td.vx-cal__today .vx-cal__day:hover {
  min-width: 30px;
  height: 30px;
  padding: 0;
  background: var(--vx-featured-bg);
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-size: 0;
  line-height: 1;
  opacity: 1;
  overflow: visible;
}

html body.eventi-page .vx-cal td.vx-cal__today .vx-cal__day::after {
  content: attr(data-day);
  display: block;
  position: relative;
  z-index: 1;
  color: var(--vx-featured-text) !important;
  -webkit-text-fill-color: var(--vx-featured-text);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1;
  visibility: visible;
  opacity: 1;
}

/* Densità desktop condivisa: più contenuto senza ridurre i bersagli touch. */
@media (min-width: 769px) {
  :root {
    --mv-header-height: 72px;
    --mv-content-gap: 12px;
    --mv-content-gap-x: 16px;
    --vx-field-pad-y: 7px;
    --vx-field-pad-x: 10px;
    --vx-field-min-h: 36px;
  }

  .header { padding: 6px 16px 6px 0; }
  .header-logo { height: 52px; max-width: 190px; }
  .header-menu-btn { width: 36px; height: 36px; }
  .main-content { padding-bottom: 24px; }
  .eventi-main { padding: 12px 16px 24px; }
  .eventi-container { max-width: none; margin-right: 0; margin-left: 0; }
  .welcome-card { padding: 18px 22px; margin-bottom: 14px; }
  .stats-grid,
  .dashboard-grid,
  .quick-actions-grid { gap: 12px; }

  .vx-page-title { margin-bottom: 4px; font-size: 1.32rem !important; gap: 8px; }
  .vx-page-sub { margin-bottom: 12px; }
  .vx-breadcrumb { margin-bottom: 7px; }
  .vx-alert { padding: 8px 12px; margin-bottom: 10px; }

  .vx-grid { gap: 10px; margin-bottom: 12px; }
  .vx-stat { padding: 11px 13px; }
  .vx-stat__value { font-size: 1.38rem; }
  .vx-stat__label { margin-bottom: 3px; }
  .vx-stat__hint { margin-top: 3px; }

  .vx-box { padding: 13px 15px; margin-bottom: 12px; }
  .vx-box__title { margin-bottom: 9px; }
  .vx-form { gap: 10px; }
  .vx-field { gap: 4px; }
  .vx-field textarea { min-height: 78px; }

  .vx-btn,
  body.eventi-page a.vx-btn,
  body.eventi-page button.vx-btn {
    min-height: 34px;
    padding: 6px 12px;
  }
  .vx-btn--sm { min-height: 30px; padding: 4px 9px; }
  .vx-actions { gap: 7px; margin: 10px 0; }
  .vx-toolbar { gap: 7px; margin-bottom: 11px; }

  .vx-tabs { margin-bottom: 11px; }
  .vx-tab { padding: 6px 11px; }
  .vx-selettore { gap: 9px; padding: 8px 11px; margin-bottom: 11px; }
  .vx-selettore__campi { gap: 8px; }
  .vx-selettore__label { padding-bottom: 6px; }

  .vx-filters { padding: 11px; margin-bottom: 11px; }
  .vx-filters__head { margin-bottom: 9px; }
  .vx-filters-grid { gap: 8px; }
  .vx-filters-field label { margin-bottom: 4px; }
  .vx-filters-actions { gap: 7px; margin-top: 9px; }

  .vx-table-wrap { margin: 8px 0; }
  table.vx-table th,
  table.vx-table td { padding: 8px 10px; }
}

/* Pagina dedicata all'evento del calendario società. */
.vx-event-editor-page { max-width: 920px; }

.vx-event-editor-page__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--vx-accent);
  border-radius: var(--vx-radius);
  background: var(--vx-accent-soft);
  color: var(--vx-text);
}

.vx-event-editor-page__status > i {
  color: var(--vx-accent-strong);
  font-size: 1.2rem;
}

.vx-event-editor-page__status strong,
.vx-event-editor-page__status span { display: block; }
.vx-event-editor-page__status span { margin-top: 2px; color: var(--vx-muted); font-size: .84rem; }
.vx-event-editor-page__form { border-top: 3px solid var(--vx-accent); }

.vx-event-editor-page__danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  border: 1px solid var(--vx-danger);
  background: var(--vx-danger-soft);
}

.vx-event-editor-page__danger strong,
.vx-event-editor-page__danger span { display: block; }
.vx-event-editor-page__danger strong { color: var(--vx-danger); }
.vx-event-editor-page__danger span { margin-top: 3px; color: var(--vx-muted); font-size: .84rem; }
.vx-event-editor-page__danger form { flex: 0 0 auto; }

/* Hub compatto delle impostazioni del Calendario. */
.vx-calendar-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
}

.vx-settings-card {
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius);
  background: var(--vx-surface);
  box-shadow: var(--vx-shadow-xs);
}

.vx-settings-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--vx-radius);
  background: var(--vx-accent-soft);
  color: var(--vx-accent-strong);
  font-size: 1.05rem;
}

.vx-settings-card__body { flex: 1 1 auto; min-width: 0; }
.vx-settings-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vx-settings-card__heading h2 { margin: 0 0 3px; color: var(--vx-text); font-size: 1.05rem; }
.vx-settings-card__heading p,
.vx-settings-card__hint { margin: 0; color: var(--vx-muted); font-size: .84rem; }
.vx-settings-card__hint { margin: 11px 0; }

.vx-settings-card__count,
.vx-settings-card__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: var(--vx-radius-pill);
  background: var(--vx-surface3);
  color: var(--vx-muted);
  font-size: .76rem;
  font-weight: 700;
}

.vx-settings-card__count {
  min-width: 26px;
  background: var(--vx-accent-soft);
  color: var(--vx-accent-strong);
}

.vx-settings-card__state--ok { background: var(--vx-success-soft); color: var(--vx-success); }

@media (max-width: 760px) {
  .vx-calendar-settings { grid-template-columns: 1fr; }
  .vx-event-editor-page__danger { align-items: stretch; flex-direction: column; }
  .vx-event-editor-page__danger .vx-btn { width: 100%; }
}

/* Dashboard desktop ad alta densità: meno vuoto verticale, stessi contenuti. */
@media (min-width: 769px) {
  body.p-dashboard .main-content {
    max-width: none;
    padding: 12px 16px 24px !important;
  }

  body.p-dashboard .welcome-card {
    padding: 13px 16px;
    margin-bottom: 12px;
    border-radius: var(--vx-radius);
  }

  body.p-dashboard .welcome-card-head { align-items: center; gap: 12px; }
  body.p-dashboard .welcome-card h2 { margin: 0 0 2px; font-size: 1.15rem; line-height: 1.2; }
  body.p-dashboard .welcome-card p { margin: 0; font-size: .86rem; line-height: 1.35; }
  body.p-dashboard .welcome-kicker { margin-bottom: 2px; font-size: .68rem; }
  body.p-dashboard .welcome-card-tools { gap: 8px; }
  body.p-dashboard .dash-period__item { min-width: 48px; padding: 5px 9px; }
  body.p-dashboard .customize-btn { min-height: 34px; padding: 6px 12px; }

  body.p-dashboard .dashboard-alerts { gap: 10px; margin-bottom: 12px; }
  body.p-dashboard .dashboard-alert { padding: 11px 14px; border-radius: var(--vx-radius); }
  body.p-dashboard .dashboard-alert h3 { margin-bottom: 7px; }
  body.p-dashboard .dashboard-progress { height: 7px; margin: 8px 0; }

  body.p-dashboard .dashboard-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 12px;
  }

  body.p-dashboard .dashboard-body-single { grid-template-columns: 1fr; }

  body.p-dashboard .dashboard-primary,
  body.p-dashboard .dashboard-secondary { gap: 12px; }

  body.p-dashboard .dashboard-panel,
  body.p-dashboard .quick-actions {
    padding: 12px 14px;
    border-radius: var(--vx-radius);
  }

  body.p-dashboard .dashboard-panel-head { margin-bottom: 9px; }
  body.p-dashboard .dashboard-panel-compact { padding: 0; }
  body.p-dashboard .dashboard-panel-compact .dashboard-panel-head { padding: 11px 14px 0; }
  body.p-dashboard .dashboard-panel-compact .dashboard-block-empty { padding: 0 14px 11px; }
  body.p-dashboard .dashboard-block-empty { padding: 3px 0; }
  body.p-dashboard .dashboard-section-title,
  body.p-dashboard .quick-actions h3 { font-size: .96rem; }

  /* Sul cruscotto i riquadri sono tanti e servono tutti insieme: si tengono
     alle misure compatte del blocco base, senza ingrandirli di nuovo qui. */
  body.p-dashboard .stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
  }

  body.p-dashboard .stat-card { gap: 10px; padding: 11px 13px; border-radius: 10px; }
  /* La scorciatoia `padding` qui sopra e' piu' specifica di `.stat-card--linea`
     e ne annullava lo spazio in fondo: la nota finiva sotto la linea. */
  body.p-dashboard .stat-card--linea { padding-bottom: 30px; }
  body.p-dashboard .stat-icon-wrap { width: 34px; height: 34px; border-radius: 9px; font-size: .92rem; }
  body.p-dashboard .stat-number { font-size: 1.28rem; }
  body.p-dashboard .stat-label { font-size: .8rem; }

  body.p-dashboard .dashboard-recent-item { padding: 9px 14px; }
  body.p-dashboard .quick-actions h3 { margin-bottom: 9px; }
  body.p-dashboard .actions-grid { gap: 7px; }
  body.p-dashboard .action-btn { gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: .82rem; }

  body.p-dashboard .vx-anello-wrap { gap: 12px; padding: 1px 0 3px; }
  body.p-dashboard .vx-anello { width: 84px; height: 84px; }
  body.p-dashboard .vx-anello::before { width: 60px; height: 60px; }
  body.p-dashboard .vx-anello span { font-size: .96rem; }
  body.p-dashboard .vx-anello__meta strong { font-size: .88rem; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  body.p-dashboard .dashboard-body { grid-template-columns: 1fr; }
  body.p-dashboard .dashboard-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gestione utenti: una riga compatta per utente, azioni affiancate. */
@media (min-width: 769px) {
  body.p-users-index .table { margin-top: 0; }
  body.p-users-index .table th,
  body.p-users-index .table td { padding: 8px 10px; vertical-align: middle; }
  body.p-users-index .table th:first-child { width: 70px; }
  body.p-users-index .table th:nth-child(2) { width: 34%; }
  body.p-users-index td.actions { min-width: 0; }

  body.p-users-index .user-row-name,
  body.p-users-index .user-row-actions {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  body.p-users-index .user-row-name { gap: 8px; }
  body.p-users-index .user-row-actions { flex-wrap: wrap; gap: 5px; }

  body.p-users-index .actions .user-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    margin: 0;
    padding: 4px 8px;
    border-radius: var(--vx-radius-sm);
    white-space: nowrap;
  }

  body.p-users-index .actions .user-row-action i { width: auto; margin: 0; }
  body.p-users-index .actions .user-row-action--danger { color: var(--vx-danger); }
  body.p-users-index .actions .user-row-action--danger:hover {
    border-color: var(--vx-danger);
    background: var(--vx-danger);
    color: var(--vx-on-fill);
  }

  body.p-users-index .user-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--vx-accent);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-accent-soft);
    color: var(--vx-accent-strong);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
  }

  body.p-users-index .user-details-btn:hover {
    background: var(--vx-accent);
    color: var(--vx-on-fill);
  }
}

@media (min-width: 769px) and (max-width: 1050px) {
  body.p-users-index .table th:nth-child(2) { width: auto; }
  body.p-users-index .actions .user-row-action { width: 32px; padding: 4px; }
  body.p-users-index .actions .user-row-action span { display: none; }
}

@media (min-width: 481px) and (max-width: 768px) {
  body.p-users-index .user-card-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================================================== 
   LAYOUT FLUIDO GLOBALE
   Spazi e composizione dipendono dalla superficie disponibile, non da una
   singola risoluzione presunta. Le media query restano il fallback; le
   container query gestiscono pannelli stretti anche dentro schermi larghi.
   ========================================================================== */
:root {
  --mv-fluid-inline: clamp(10px, 1.25vw, 22px);
  --mv-fluid-block: clamp(10px, 1.15vw, 20px);
  --mv-fluid-gap: clamp(8px, .9vw, 15px);
  --mv-fluid-card-pad: clamp(12px, 1.15vw, 20px);
}

.main-content,
.container,
.collab-wrap,
.eventi-main,
.doc-wrap {
  width: 100%;
  padding-right: var(--mv-fluid-inline) !important;
  padding-left: var(--mv-fluid-inline) !important;
}

.main-content,
.container,
.collab-wrap,
.eventi-main { padding-top: var(--mv-fluid-block) !important; }

.card,
.collab-card,
.dashboard-panel,
.quick-actions,
.vx-box,
.page-header { padding: var(--mv-fluid-card-pad); }

.vx-grid,
.stats-grid,
.dashboard-grid,
.quick-actions-grid,
.collab-grid,
.doc-grid,
.permissions-grid { gap: var(--mv-fluid-gap); }

.vx-toolbar,
.vx-toolbar__group,
.vx-actions,
.actions,
.action-buttons,
.page-header-actions,
.filter-actions,
.collab-actions,
.doc-actions,
.rubrica-actions {
  flex-wrap: wrap;
  min-width: 0;
}

.vx-toolbar > *,
.vx-toolbar__group > *,
.vx-actions > *,
.actions > *,
.action-buttons > *,
.page-header-actions > * { max-width: 100%; }

input,
select,
textarea,
button,
[style*="width:"] { max-width: 100%; box-sizing: border-box; }

.table-container,
.table-responsive,
.vx-table-wrap,
.vx-scroll-x,
.collab-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Le griglie più comuni scelgono da sole quante colonne entrano. */
.vx-grid--fixed-2,
.collab-grid--2col,
.pg-field-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@supports (container-type: inline-size) {
  .main-content {
    container-name: mv-main;
    container-type: inline-size;
  }

  .eventi-container {
    container-name: mv-calendar-page;
    container-type: inline-size;
  }

  .card,
  .collab-card,
  .dashboard-panel,
  .quick-actions,
  .vx-box,
  .page-header {
    container-type: inline-size;
  }

  body.p-users-index .table-container {
    container-name: mv-users-table;
    container-type: inline-size;
  }

  /* Una form si ricompone in base alla card che la contiene, non al monitor. */
  @container (max-width: 560px) {
    .vx-form,
    .vx-form-grid,
    .vx-grid--fixed-2,
    .collab-grid--2col,
    .pg-field-row,
    .filters-grid,
    .form-grid,
    .permissions-grid {
      grid-template-columns: 1fr !important;
    }

    .vx-actions,
    .actions,
    .action-buttons,
    .page-header-actions,
    .filter-actions {
      align-items: stretch;
    }
  }

  @container mv-main (max-width: 1050px) {
    body.p-dashboard .dashboard-body { grid-template-columns: 1fr; }
    body.p-dashboard .dashboard-secondary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
  }

  @container mv-calendar-page (max-width: 820px) {
    .vx-cal-layout { grid-template-columns: 1fr; }
    .vx-cal-panel {
      position: sticky;
      top: calc(var(--mv-header-height) + 8px);
      z-index: 20;
      max-height: none;
      overflow: visible;
      padding: 10px 12px;
    }
    .vx-cal-panel__toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 8px 12px;
      border: 1px solid var(--vx-border);
      border-radius: var(--vx-radius);
      background: var(--vx-surface);
      color: var(--vx-text);
      font-size: .92rem;
      font-weight: 700;
      cursor: pointer;
    }
    .vx-cal-panel__toggle i { color: var(--vx-accent); }
    .vx-cal-panel__toggle::after {
      content: "";
      width: .45em;
      height: .45em;
      margin-left: auto;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-15%) rotate(45deg);
    }
    .vx-cal-panel__check:checked + .vx-cal-panel__toggle::after {
      transform: translateY(15%) rotate(-135deg);
    }
    .vx-cal-panel__check:not(:checked) ~ .vx-cal-panel__body { display: none; }
    .vx-cal-panel__check:checked ~ .vx-cal-panel__body {
      display: block;
      max-height: min(58vh, 28rem);
      margin-top: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .vx-cal-panel .vx-filters-grid,
    .vx-cal-panel .vx-cal-layers { grid-template-columns: 1fr; }
    .vx-cal-panel__body > .vx-filters {
      margin: 16px 0 0;
      padding: 16px 0 0;
    }
    .vx-calendar-settings { grid-template-columns: 1fr; }
  }

  @container mv-users-table (max-width: 950px) {
    body.p-users-index .table th:nth-child(2) { width: auto; }
    body.p-users-index .actions .user-row-action { width: 32px; padding: 4px; }
    body.p-users-index .actions .user-row-action span { display: none; }
  }
}

@media (max-width: 768px) {
  .table-container,
  .table-responsive,
  .vx-scroll-x,
  .collab-table-wrap { overflow-x: visible; }

  .main-content,
  .container,
  .collab-wrap,
  .eventi-main,
  .doc-wrap {
    padding-right: var(--mv-fluid-inline) !important;
    padding-left: var(--mv-fluid-inline) !important;
  }
}

/* Dashboard a mosaico: i riepiloghi brevi si affiancano, quelli ricchi
   conservano l'intera riga. auto-fit segue lo spazio reale disponibile. */
body.p-dashboard .dashboard-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: var(--mv-fluid-gap);
}

body.p-dashboard .dashboard-primary > .dashboard-section--wide {
  grid-column: 1 / -1;
}

body.p-dashboard .dashboard-section--compact .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

body.p-dashboard .dashboard-section--compact .stat-card { min-width: 0; }

@container (max-width: 390px) {
  body.p-dashboard .dashboard-section--compact .stats-grid { grid-template-columns: 1fr; }
}

/* Gestione Utenti: ricerca e dettaglio senza colori incorporati. */
body.p-users-index .search-bar__title {
  margin: 0 0 8px;
  color: var(--vx-text);
  font-size: .9rem;
}

body.p-users-index .search-bar__title i { color: var(--vx-accent-strong); }
body.p-users-index .user-admin-actions,
body.p-users-index .user-search-form,
body.p-users-index .user-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.p-users-index .user-admin-actions a,
body.p-users-index .user-detail-actions a { text-decoration: none; }
body.p-users-index .user-search-result { margin: 8px 0 0; color: var(--vx-muted); font-size: .82rem; }
body.p-users-index .user-list-empty { padding: 24px !important; color: var(--vx-muted); text-align: center; }
body.p-users-index .badge-spaced { margin-right: 5px; }
body.p-users-index .user-value-missing { color: var(--vx-faint); }
body.p-users-index .user-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin-top: 14px;
}

body.p-users-index .user-detail-heading { margin-bottom: 8px; color: var(--vx-accent-strong); }
body.p-users-index .user-detail-item { margin-bottom: 7px; color: var(--vx-text-soft); }
body.p-users-index .user-detail-actions-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vx-border);
}

/* Compatibilità tema scuro per le pagine legacy.
   L'audit completo delle pagine ha rilevato dichiarazioni inline storiche:
   questa rete le riconduce ai token senza inseguire ogni singolo template. */
html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#333" i], [style*="#555" i]) {
  color: var(--vx-text) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#666" i], [style*="#6c757d" i], [style*="#888" i], [style*="#999" i],
      [style*="#607d8b" i], [style*="#dee2e6" i], [style*="#e2e8f0" i]) {
  color: var(--vx-muted) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#667eea" i], [style*="#007bff" i], [style*="#1565c0" i], [style*="#312e81" i]) {
  color: var(--vx-accent-strong) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#28a745" i], [style*="#43a047" i], [style*="#2e7d32" i]) {
  color: var(--vx-success) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#c62828" i], [style*="#c0392b" i], [style*="#dc3545" i]) {
  color: var(--vx-danger) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="#ffc107" i], [style*="#856404" i], [style*="#e65100" i], [style*="#d97706" i]) {
  color: var(--vx-warning) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i])[style*="#0c5460" i] {
  color: var(--vx-info) !important;
}

html.vx-theme-night
  :is([style^="color:" i], [style*=";color:" i], [style*="; color:" i]):is([style*="color:white" i], [style*="color: white" i], [style*="color:#fff" i], [style*="color: #fff" i]) {
  color: var(--vx-on-accent) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="background:white" i], [style*="background: white" i], [style*="background:#fff" i],
      [style*="background: #fff" i], [style*="background-color:white" i], [style*="background-color: white" i],
      [style*="background-color:#fff" i], [style*="background-color: #fff" i]) {
  background: var(--vx-surface) !important;
  background-color: var(--vx-surface) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#f8f9fa" i], [style*="#fafafa" i], [style*="#f8f9fc" i]) {
  background: var(--vx-surface2) !important;
  background-color: var(--vx-surface2) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#e9ecef" i], [style*="#eceff120" i]) {
  background: var(--vx-surface3) !important;
  background-color: var(--vx-surface3) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#667eea" i], [style*="#764ba2" i], [style*="#3949ab" i]) {
  background: var(--vx-gradient) !important;
  color: var(--vx-on-accent) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#eef2ff" i], [style*="#f8f9ff" i]) {
  background: var(--vx-accent-soft) !important;
  background-color: var(--vx-accent-soft) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#28a745" i], [style*="#20c997" i]) {
  background: var(--vx-success) !important;
  background-color: var(--vx-success) !important;
  color: var(--vx-on-fill) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#e8f5e9" i], [style*="#f1f8f4" i]) {
  background: var(--vx-success-soft) !important;
  background-color: var(--vx-success-soft) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i])[style*="#fdecea" i] {
  background: var(--vx-danger-soft) !important;
  background-color: var(--vx-danger-soft) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i]):is([style*="#fff8e1" i], [style*="#f39c12" i]) {
  background: var(--vx-warning-soft) !important;
  background-color: var(--vx-warning-soft) !important;
  color: var(--vx-warning) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i])[style*="#d1ecf1" i] {
  background: var(--vx-info-soft) !important;
  background-color: var(--vx-info-soft) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i])[style*="#6c757d" i] {
  background: var(--vx-muted) !important;
  background-color: var(--vx-muted) !important;
  color: var(--vx-on-fill) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i])[style*="#546e7a" i] {
  background: var(--vx-muted) !important;
  background-color: var(--vx-muted) !important;
  color: var(--vx-on-fill) !important;
}

html.vx-theme-night
  :is([style*="background:" i], [style*="background-color:" i])[style*="#0b1220" i] {
  background: var(--vx-featured-bg) !important;
  background-color: var(--vx-featured-bg) !important;
  color: var(--vx-featured-text) !important;
}

html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i]):is([style*="#ddd" i], [style*="#eee" i], [style*="#dee2e6" i], [style*="#e1e5e9" i],
      [style*="#f0f0f0" i], [style*="#e8ecf4" i]) {
  border-color: var(--vx-border) !important;
}

html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i]):is([style*="#667eea" i], [style*="#e8eaf6" i]) { border-color: var(--vx-accent) !important; }
html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i]):is([style*="#dc3545" i], [style*="#ef9a9a" i]) { border-color: var(--vx-danger) !important; }
html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i])[style*="#e0f2e9" i] {
  border-color: var(--vx-success) !important;
}
html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i])[style*="#bee5eb" i] {
  border-color: var(--vx-info) !important;
}
html.vx-theme-night
  :is([style*="border:" i], [style*="border-color:" i]):is([style*="#ffb300" i], [style*="#ffb74d" i], [style*="#ffe082" i]) {
  border-color: var(--vx-warning) !important;
}

/* ==========================================================================
   EDITOR DI TESTO FORMATTATO
   --------------------------------------------------------------------------
   Barra strumenti e area di scrittura delle comunicazioni. Il markup lo crea
   includes/ui/vx-ui.js; qui c'e' solo l'aspetto, tutto su token, cosi' funziona
   anche in tema notturno senza eccezioni.
   ========================================================================== */

.vx-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--vx-border);
  border-bottom: none;
  border-radius: var(--vx-radius) var(--vx-radius) 0 0;
  background: var(--vx-surface2);
}

.vx-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--vx-muted);
  font-size: 14px;
  cursor: pointer;
}

.vx-editor-btn:hover,
.vx-editor-btn:focus-visible {
  border-color: var(--vx-border-strong);
  background: var(--vx-surface);
  color: var(--vx-accent-strong);
}

.vx-editor-area {
  min-height: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--vx-border);
  border-radius: 0 0 var(--vx-radius) var(--vx-radius);
  background: var(--vx-surface);
  color: var(--vx-text);
  font-size: 15px;
  line-height: 1.55;
}

.vx-editor-area:focus {
  outline: none;
  border-color: var(--vx-accent);
  box-shadow: 0 0 0 3px var(--vx-accent-soft);
}

.vx-editor-area p { margin: 0 0 12px; }
.vx-editor-area ul,
.vx-editor-area ol { margin: 0 0 12px; padding-left: 22px; }
.vx-editor-area li { margin: 0 0 6px; }
.vx-editor-area a { color: var(--vx-accent-strong); }

/* Segnaposto: :empty non basta, i browser lasciano dentro un <br>. */
.vx-editor-area:empty::before {
  content: attr(data-segnaposto);
  color: var(--vx-muted);
  pointer-events: none;
}

/* Il messaggio gia' inviato, mostrato nello storico. */
.vx-messaggio-html p { margin: 0 0 12px; }
.vx-messaggio-html ul,
.vx-messaggio-html ol { margin: 0 0 12px; padding-left: 22px; }
.vx-messaggio-html li { margin: 0 0 6px; }
.vx-messaggio-html a { color: var(--vx-accent-strong); }
.vx-messaggio-html blockquote {
  margin: 0 0 12px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--vx-border-strong);
  color: var(--vx-muted);
}

/* Elenco degli allegati, in composizione e nello storico. */
.vx-allegati {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.vx-allegato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--vx-border);
  border-radius: 999px;
  background: var(--vx-surface2);
  color: var(--vx-text);
  font-size: 13px;
  text-decoration: none;
}

.vx-allegato:hover {
  border-color: var(--vx-accent);
  color: var(--vx-accent-strong);
}

.vx-allegato i { color: var(--vx-muted); }
.vx-allegato:hover i { color: var(--vx-accent-strong); }
.vx-allegato-peso { color: var(--vx-muted); }

/* Titoletto dentro un riquadro: piu' piccolo di .vx-box__title, stessa famiglia. */
.vx-box__subtitle {
  margin: 20px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vx-text);
}

.vx-box__subtitle i { color: var(--vx-muted); }

/* ==========================================================================
   TENDINE CON RICERCA
   --------------------------------------------------------------------------
   Il campo di ricerca lo crea includes/ui/vx-ui.js sopra il <select>. Senza
   JavaScript non esiste e la tendina resta quella di sempre: qui c'e' solo
   l'aspetto del campo aggiunto.
   ========================================================================== */

.vx-select-cerca {
  position: relative;
  display: block;
}

.vx-select-cerca__input {
  width: 100%;
  margin: 0 0 4px;
  padding: 7px 10px;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius);
  background: var(--vx-surface2);
  color: var(--vx-text);
  font-size: 13px;
}

.vx-select-cerca__input:focus {
  outline: none;
  border-color: var(--vx-accent);
  box-shadow: 0 0 0 3px var(--vx-accent-soft);
}

.vx-select-cerca__input::placeholder { color: var(--vx-muted); }

.vx-select-cerca__esito {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--vx-muted);
}

.vx-select-cerca__esito:empty { display: none; }

/* ==========================================================================
   DENSITA' DELLE PAGINE
   --------------------------------------------------------------------------
   Ultima sezione del foglio, quindi vince sui valori dichiarati sopra: e' il
   punto unico da cui si regola quanto "respira" l'interfaccia, senza rincorrere
   le decine di regole che assegnano margini una per una.

   Le distanze erano tarate su schermi piccoli e su pagine con pochi blocchi.
   Con una scheda progetto piena di riquadri si finiva a scorrere per vedere
   quattro numeri. Qui si stringe di circa un terzo, mantenendo le proporzioni:
   il titolo resta staccato dal contenuto, i riquadri restano separati fra loro.
   ========================================================================== */

.eventi-main {
  padding: 12px 18px 22px;
}

.vx-page-title {
  margin: 0 0 4px;
}

.vx-page-sub {
  margin: 0 0 12px;
}

.vx-breadcrumb {
  margin: 0 0 8px;
}

.vx-toolbar {
  margin: 0 0 12px;
}

.vx-tabs {
  margin: 0 0 12px;
}

.vx-grid {
  gap: 12px;
  margin-bottom: 12px;
}

.vx-box {
  padding: 14px 16px;
  margin-bottom: 12px;
}

.vx-box__title {
  margin: 0 0 10px;
}

.vx-actions {
  margin: 12px 0;
}

.vx-filters {
  margin: 0 0 12px;
}

/* Il primo blocco dopo il titolo non ha bisogno di staccarsi due volte. */
.vx-page-sub + .vx-box,
.vx-page-sub + .vx-grid,
.vx-page-title + .vx-box,
.vx-page-title + .vx-grid {
  margin-top: 0;
}

/* Ultimo elemento della pagina: niente margine che diventa spazio morto. */
.eventi-container > :last-child {
  margin-bottom: 0;
}

/* Le tabelle dentro un riquadro non raddoppiano il margine del riquadro. */
.vx-box > .vx-table-wrap:last-child {
  margin-bottom: 0;
}

.vx-box > .vx-table-wrap:first-child {
  margin-top: 0;
}

/* Elenchi di definizioni: erano staccati come se fossero blocchi a sé. */
.vx-dl {
  margin: 0;
}

/* Su schermi stretti si stringe ancora: lo spazio orizzontale è più prezioso. */
@media (max-width: 640px) {
  .eventi-main {
    padding: 10px 12px 18px;
  }

  .vx-box {
    padding: 12px 13px;
    margin-bottom: 10px;
  }

  .vx-grid {
    gap: 10px;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   LEGGIBILITA' E LARGHEZZA DELLE CARD
   --------------------------------------------------------------------------
   Due difetti che si vedevano su ogni pagina.

   1. L'area riservata girava a 13px. Su un gestionale che si usa tutto il
      giorno e' piccolo: qui si passa a 15px e si riallineano le taglie
      derivate, che erano state scelte in proporzione al 13.

   2. Le griglie usavano `auto-fit`. Con un solo elemento auto-fit collassa le
      tracce vuote e quell'unico riquadro si allarga su tutta la riga: e' il
      rettangolo lungo e vuoto della pagina Integrazione Aruba. Con `auto-fill`
      le tracce restano, e una card sola occupa una card sola.
   ========================================================================== */

body.eventi-page {
  font-size: 1rem;
}

/* Le tracce restano anche quando gli elementi non bastano a riempirle. */
.vx-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.vx-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.vx-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/* Una card di riepilogo non deve diventare un nastro: oltre una certa
   larghezza il numero resta solo e il resto e' spazio morto. */
.vx-stat,
.vx-stat-card {
  max-width: 420px;
}

/* Il menu laterale resta un filo piu' compatto del contenuto: e' navigazione,
   non lettura, e ingrandirlo mangia larghezza utile alla pagina. */
.vg-sidebar { font-size: .95rem; }

/* --------------------------------------------------------------------------
   Le varianti della griglia vanno RIDICHIARATE dopo l'override di .vx-grid
   qui sopra: hanno la stessa specificita', quindi senza queste righe vincerebbe
   la regola scritta piu' in basso e una griglia a due colonne fisse diventava
   una fila di cinque card strette. E' il difetto della pagina Integrazione Aruba.
   -------------------------------------------------------------------------- */

.vx-grid--fixed-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .vx-grid--fixed-2 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Liste etichetta/valore che non collassano.

   Erano `minmax(150px, 220px) 1fr`: dentro una card stretta l'etichetta si
   teneva 150px e al valore ne restavano dieci, cosi' `overflow-wrap: anywhere`
   mandava a capo una lettera per riga. Ora l'etichetta puo' restringersi, e
   sotto una certa larghezza della card le due colonne diventano una.
   -------------------------------------------------------------------------- */

.vx-dl {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: 14px;
}

@supports (container-type: inline-size) {
  .vx-box {
    container-type: inline-size;
  }

  @container (max-width: 420px) {
    .vx-dl {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 2px;
    }

    .vx-dl dd {
      margin-bottom: 8px;
    }
  }
}

/* Ripiego per i browser senza container query: si guarda la finestra. */
@media (max-width: 1100px) {
  .vx-grid--fixed-2 .vx-dl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
}

/* ==========================================================================
   ECONOMIA SOCIETA'
   Grafico a barre e pesi per categoria del quadro economico. Sono una dozzina
   di valori: una libreria di grafici costerebbe piu' del problema che risolve,
   e il progetto non carica fogli o script aggiuntivi (Regola 5.19).
   Le altezze e le larghezze in percentuale sono l'unico `style=` ammesso qui:
   sono dati, non scelte di stile.
   ========================================================================== */

.eco-mesi {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0 0;
}

.eco-mese {
    flex: 1 0 56px;
    min-width: 56px;
    text-align: center;
}

.eco-mese__barre {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 120px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--vx-border);
}

.eco-barra {
    display: block;
    width: 12px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
}

.eco-barra--entrata { background: var(--vx-success); }
.eco-barra--uscita { background: var(--vx-warning); }

.eco-mese__etichetta {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--vx-muted);
    text-transform: capitalize;
}

.eco-mese__saldo {
    margin: 2px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.eco-mese__saldo.is-positivo { color: var(--vx-success); }
.eco-mese__saldo.is-negativo { color: var(--vx-danger); }

.eco-legenda {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: baseline;
}

.eco-legenda--entrata { background: var(--vx-success); }
.eco-legenda--uscita { background: var(--vx-warning); }

.eco-peso {
    display: inline-block;
    width: 70px;
    height: 6px;
    margin-right: 8px;
    border-radius: 3px;
    background: var(--vx-surface3);
    vertical-align: middle;
    overflow: hidden;
}

.eco-peso__barra {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.eco-peso__barra.is-entrata { background: var(--vx-success); }
.eco-peso__barra.is-uscita { background: var(--vx-warning); }

/* ==========================================================================
   BACHECA DI PROGETTO — stacchi di giornata e allegati immagine
   ========================================================================== */

/* Un filo lungo senza stacchi non si legge: si perde di vista quando è stato
   detto cosa. La riga di data è il punto di riferimento. */
.vx-chat__giorno {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
    color: var(--vx-muted);
    font-size: 0.8rem;
}

.vx-chat__giorno::before,
.vx-chat__giorno::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vx-surface3);
}

.vx-chat__giorno span {
    padding: 2px 10px;
    border: 1px solid var(--vx-border);
    border-radius: 999px;
    background: var(--vx-surface2);
    white-space: nowrap;
}

.vx-allegato small {
    margin-left: 6px;
    color: var(--vx-muted);
    font-size: 0.78rem;
}

/* Anteprima delle immagini: una foto di sopralluogo si guarda, non si scarica
   per guardarla. Il riquadro è limitato perché una foto da telefono non deve
   occupare tutto il filo. */
.vx-allegato-img { list-style: none; }

.vx-allegato-img a {
    display: inline-block;
    max-width: 260px;
    text-decoration: none;
    color: var(--vx-text-soft);
}

.vx-allegato-img img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface2);
}

.vx-allegato-img span {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.vx-allegato-img a:hover img { border-color: var(--vx-accent-strong); }

/* ==========================================================================
   CONSENSO AL TRATTAMENTO DEI DATI (pagina di blocco) e IL MIO UTENTE
   --------------------------------------------------------------------------
   La pagina del consenso non ha menu ne' testata: c'e' una cosa sola da fare e
   qualsiasi altra strada sarebbe una scappatoia. Per questo si regge da sola.
   ========================================================================== */

.vx-privacy-wrap {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    background: var(--vx-bg);
}

.vx-privacy-card {
    width: 100%;
    max-width: 760px;
    background: var(--vx-surface);
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    box-shadow: var(--vx-shadow-lg);
    padding: 28px;
}

.vx-privacy-card h1 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-privacy-card h1 i { color: var(--vx-accent-strong); }

.vx-privacy-intro {
    margin: 0 0 18px;
    color: var(--vx-text-soft);
    line-height: 1.55;
}

/* Il testo scorre nel suo riquadro: la pagina non diventa lunghissima e il
   pulsante di consenso resta sempre raggiungibile. */
.vx-privacy-testo {
    max-height: 46vh;
    overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-surface2);
    line-height: 1.6;
    font-size: .94rem;
    color: var(--vx-text-soft);
}

/* L'informativa privacy dentro una pagina normale non ha bisogno del riquadro
   scorrevole che serve invece quando è l'unica cosa sullo schermo. */
.vx-privacy-testo--pagina {
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
    background: none;
}

.vx-privacy-testo h2 {
    margin: 16px 0 6px;
    font-size: 1rem;
    color: var(--vx-text);
}

.vx-privacy-testo h2:first-child { margin-top: 0; }
.vx-privacy-testo ul { margin: 6px 0 0; padding-left: 20px; }
.vx-privacy-testo li { margin-bottom: 4px; }

.vx-privacy-versione {
    margin: 18px 0 0;
    font-size: .82rem;
    color: var(--vx-muted);
}

.vx-privacy-form { margin-top: 18px; }

.vx-privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    cursor: pointer;
}

.vx-privacy-check input { margin-top: 3px; flex: 0 0 auto; }

.vx-privacy-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Il mio utente: testata con foto e dati affiancati.
   -------------------------------------------------------------------------- */
.vx-utente-testata {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.vx-utente-testata .vx-dl { flex: 1 1 260px; min-width: 0; }

.vx-utente-foto {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--vx-border);
    background: var(--vx-surface2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx-utente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vx-utente-iniziali {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--vx-accent-strong);
    letter-spacing: .02em;
}

/* Foto profilo dentro gli avatar circolari: testata e messaggi della bacheca.
   Il contenitore era pensato per due lettere, l'immagine deve riempirlo senza
   deformarsi. */
.user-avatar img,
.vx-msg__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.user-avatar,
.vx-msg__avatar { overflow: hidden; }

/* --- Relazioni anagrafica (scheda) --- */
.vx-rel-box { margin-top: 24px; }
.vx-rel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vx-rel-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-rel-breadcrumb { margin: 0 0 14px; font-size: 0.92rem; color: var(--vx-muted); }
.vx-rel-breadcrumb a { color: var(--vx-accent-strong); text-decoration: none; }
.vx-rel-breadcrumb a:hover { text-decoration: underline; }
.vx-rel-panel { background: var(--vx-surface2); border: 1px solid var(--vx-border); border-radius: 12px; padding: 14px; }
.vx-rel-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vx-rel-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: 10px; }
.vx-rel-item__frase { margin: 0; color: var(--vx-text); line-height: 1.4; min-width: 0; }
.vx-rel-item__name { color: var(--vx-accent-strong); text-decoration: none; font-weight: 600; word-break: break-word; }
.vx-rel-item__name:hover { text-decoration: underline; }
.vx-rel-item__actions { display: flex; gap: 6px; flex-shrink: 0; }
.vx-rel-inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
}
.vx-rel-form { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vx-border); }
.vx-rel-form label { font-size: 0.82rem; font-weight: 600; color: var(--vx-muted); }
.vx-rel-form select { width: 100%; max-width: 100%; }

/* Tipi di collegamento: form a sinistra, Nome + ambito vicini (non ai due estremi) */
.vx-rel-tipo-form {
  max-width: 40rem;
}
.vx-rel-tipo-fields {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  width: 100%;
}
.vx-rel-tipo-row-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 12px 16px;
  width: 100%;
}
.vx-rel-tipo-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.vx-rel-tipo-field--nome {
  flex: 0 1 14rem;
  width: auto;
  max-width: 16rem;
}
.vx-rel-tipo-field--ambito {
  flex: 0 1 18rem;
  width: auto;
  max-width: 20rem;
}
.vx-rel-tipo-field > label {
  display: block !important;
  margin: 0;
  font-weight: 600;
  color: var(--vx-text);
  line-height: 1.3;
}
.vx-rel-tipo-field input[type="text"],
.vx-rel-tipo-field select {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.vx-rel-tipo-hint {
  display: block;
  margin: 0;
  color: var(--vx-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}
.vx-rel-tipo-check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  color: var(--vx-text);
  cursor: pointer;
  line-height: 1.3;
}
.vx-rel-tipo-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  flex-shrink: 0;
}
.vx-rel-tipo-form .vx-actions {
  margin-top: 16px;
}

.vx-rel-tipo-table {
  margin-top: 12px;
  width: 100%;
  border-collapse: collapse;
}
.vx-rel-tipo-table th,
.vx-rel-tipo-table td {
  vertical-align: middle;
  padding: 12px 10px;
  border-bottom: 1px solid var(--vx-border);
}
.vx-rel-tipo-table tbody tr:last-child td {
  border-bottom: none;
}
.vx-rel-tipo-table tr.is-inactive td {
  opacity: 0.65;
}
.vx-rel-tipo-pos {
  width: 3.75rem;
  text-align: center;
}
.vx-rel-tipo-sposta {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.vx-rel-tipo-sposta .vx-rel-inline-form {
  display: flex;
  margin: 0;
}
.vx-rel-tipo-nome {
  font-weight: 700;
  color: var(--vx-text);
  line-height: 1.3;
}
.vx-rel-tipo-frasi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--vx-text);
  line-height: 1.35;
}
.vx-rel-tipo-meta {
  margin-top: 2px;
  color: var(--vx-muted);
  font-size: 0.82rem;
  line-height: 1.3;
}
.vx-rel-tipo-stato-col {
  width: 6.5rem;
  white-space: nowrap;
}
.vx-rel-tipo-stato {
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  color: var(--vx-text-soft);
  box-sizing: border-box;
}
.vx-rel-tipo-azioni-col {
  width: 1%;
  white-space: nowrap;
}
.vx-rel-tipo-azioni {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 34px;
}
.vx-rel-tipo-azioni .vx-rel-inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.vx-rel-tipo-azioni .vx-btn {
  margin: 0;
}
@media (max-width: 900px) {
  .vx-rel-tipo-azioni {
    flex-wrap: wrap;
  }
  .vx-rel-tipo-azioni-col {
    white-space: normal;
  }
}
@media (max-width: 720px) {
  .vx-rel-tipo-form {
    max-width: none;
  }
  .vx-rel-tipo-field--nome,
  .vx-rel-tipo-field--ambito {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}
.vx-promemoria-righe { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.vx-promemoria-riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vx-promemoria-riga input[type="number"] { width: 7rem; max-width: 100%; }
.vx-promemoria-riga select { min-width: 8rem; }
.vx-promemoria-riga__label { color: var(--vx-muted); font-size: 0.9rem; }
.vx-avvisi-blocco { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vx-border); }
.vx-avvisi-blocco:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.vx-avvisi-blocco__titolo {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vx-text);
}
.vx-avvisi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.vx-avvisi-chip {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.vx-avvisi-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vx-avvisi-chip span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--vx-border);
  border-radius: 999px;
  background: var(--vx-surface2);
  color: var(--vx-text);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.vx-avvisi-chip:hover span { border-color: var(--vx-accent-soft); background: var(--vx-accent-soft); }
.vx-avvisi-chip input:checked + span {
  border-color: var(--vx-accent-strong);
  background: var(--vx-accent-soft);
  color: var(--vx-accent-strong);
}
.vx-avvisi-chip input:focus-visible + span {
  outline: 2px solid var(--vx-accent-strong);
  outline-offset: 2px;
}
.vx-avvisi-extra { margin-top: 4px; }
.vx-avvisi-extra summary {
  cursor: pointer;
  color: var(--vx-accent-strong);
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
}
.vx-avvisi-extra summary::-webkit-details-marker { display: none; }
.vx-avvisi-extra summary::before {
  content: '+ ';
  font-weight: 700;
}
.vx-avvisi-extra[open] summary::before { content: '− '; }
.vx-avvisi-extra .vx-btn { margin-top: 4px; }
@media (max-width: 640px) {
  .vx-rel-item { flex-direction: column; align-items: flex-start; }
  .vx-promemoria-riga { flex-direction: column; align-items: stretch; }
}
