/* ============================================================================
 * VARAVALLO ERP — DESIGN SYSTEM
 * Layer 1: Design tokens (variabili)
 * Layer 2: Componenti base (.vrv-*)
 * Layer 3: Utility (.vrv-num, .vrv-link, ecc.)
 * Layer 4: Compatibility (.sm-*, .erp-*, .hrwrap-*)
 *
 * Uso: wrappa l'app/modulo in <div class="vrv-app">...</div>
 * Per moduli specifici aggiungi anche il prefisso classico (es. sm-*, sol-*).
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ---------------------------------------------------------------------------- */
:root {
    /* — Backgrounds — */
    --vrv-bg-page:        #f3f4f6;  /* sfondo pagina */
    --vrv-bg-card:        #ffffff;  /* card, tabelle, modali */
    --vrv-bg-card-alt:    #f9fafb;  /* hover tabelle, header celle, dropzone */

    /* — Borders — */
    --vrv-border:         #d0d5dd;  /* bordo marcato corporate */
    --vrv-border-soft:    #e5e7eb;  /* separatori riga, divider */

    /* — Testi — */
    --vrv-text-main:      #101828;  /* numeri grandi, h2/h3, valori principali */
    --vrv-text-body:      #344054;  /* testo corrente */
    --vrv-text-muted:     #667085;  /* label, info secondarie */
    --vrv-text-faint:     #98a2b3;  /* placeholder, hint */

    /* — Accent (blu corporate) — */
    --vrv-accent:         #026aa2;  /* CTA, link, focus, attivo */
    --vrv-accent-hover:   #034f7f;
    --vrv-accent-soft:    #f0f9ff;  /* sfondi soft per highlight */

    /* — Stati semantici — */
    --vrv-success:        #027a48;  /* verde corporate */
    --vrv-success-bg:     #ecfdf3;
    --vrv-danger:         #b42318;  /* rosso corporate */
    --vrv-danger-bg:      #fef3f2;
    --vrv-warning:        #b54708;  /* arancio corporate */
    --vrv-warning-bg:     #fef6e7;
    --vrv-chart-yellow:   #ca8a04;
    --vrv-purple:         #6941c6;  /* viola per bottone share / utility */
    --vrv-purple-hover:   #53389e;


    /* — Mid-tones (aggiunti per coprire grigi ricorrenti) — */
    --vrv-text-strong:    #475467;  /* intermedio tra body e muted */
    --vrv-border-faint:   #e4e7ec;  /* bordo molto chiaro card YoY */
    --vrv-border-lighter: #eaecf0;  /* divider HR/team */
    --vrv-bg-hover:       #f2f4f7;  /* hover su sfondi chiari */
    --vrv-bg-info:        #eff8ff;  /* banner info accent (più tenue di accent-soft) */
    --vrv-bg-warning-light: #fffaeb; /* banner warning più tenue */
    --vrv-bg-warning-bright: #fff6ed;/* banner warning brillante (es. timeline) */
    --vrv-warning-strong: #c4320a;  /* arancio scuro */
    --vrv-info:           #03a9f4;  /* azzurro brillante (badge/dot info) */
    --vrv-info-dark:      #0288d1;  /* azzurro scuro hover info */

    /* — Token tipografici — */
    --vrv-text-xs:        11px;
    --vrv-text-sm:        12px;
    --vrv-text-base:      13px;
    --vrv-text-md:        14px;
    --vrv-text-lg:        16px;
    --vrv-text-xl:        22px;
    --vrv-text-display:   26px;

    /* — Typography — */
    --vrv-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --vrv-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --vrv-font:           var(--vrv-font-sans);  /* alias usato da sezioni 16-17 */

    /* — Radius — */
    --vrv-radius-sm:      4px;
    --vrv-radius:         6px;
    --vrv-radius-lg:      10px;

    /* — Shadow — */
    --vrv-shadow-sm:      0 1px 2px rgba(16,24,40,0.04);
    --vrv-shadow:         0 1px 3px rgba(16,24,40,0.06);
    --vrv-shadow-lg:      0 10px 30px rgba(16,24,40,0.10);

    /* — Focus ring — */
    --vrv-ring:           0 0 0 3px rgba(2,106,162,0.15);
}

/* === Box-sizing universale per tutti i wrapper ERP === */
.vrv-app *, .vrv-app *::before, .vrv-app *::after,
.hrwrap *, .hr-wrap *, .dochr-wrap *, .reg-wrap *, .gj-wrap *,
.sm-wrap *, .dor-wrap *, .erp-wrap * { box-sizing: border-box; }


/* ----------------------------------------------------------------------------
 * 2. APP WRAPPER
 * ---------------------------------------------------------------------------- */
.vrv-app {
    background: var(--vrv-bg-page);
    color: var(--vrv-text-body);
    font-family: var(--vrv-font-sans);
    padding: 24px;
    border-radius: var(--vrv-radius-lg);
    box-sizing: border-box;
}
/* ----------------------------------------------------------------------------
 * 3. FILTERS BAR (.vrv-filters)
 * ---------------------------------------------------------------------------- */
.vrv-filters {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    padding: 14px; margin-bottom: 14px;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.vrv-filters label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; color: var(--vrv-text-muted);
}

/* ----------------------------------------------------------------------------
 * 4. INPUTS, SELECTS (.vrv-input, .vrv-select)
 * ---------------------------------------------------------------------------- */
.vrv-input,
.vrv-select,
.vrv-app input[type="text"],
.vrv-app input[type="number"],
.vrv-app input[type="date"],
.vrv-app input[type="email"],
.vrv-app select,
.vrv-app textarea {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-main);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vrv-input:focus,
.vrv-select:focus,
.vrv-app input:focus,
.vrv-app select:focus,
.vrv-app textarea:focus {
    border-color: var(--vrv-accent);
    box-shadow: var(--vrv-ring);
}

/* ----------------------------------------------------------------------------
 * 5. BUTTONS (.vrv-btn)
 * ---------------------------------------------------------------------------- */
.vrv-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--vrv-accent); color: var(--vrv-bg-card);
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: var(--vrv-radius);
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.2;
}
.vrv-btn:hover { background: var(--vrv-accent-hover); }
.vrv-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.vrv-btn-secondary {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-body);
    border-color: var(--vrv-border);
}
.vrv-btn-secondary:hover {
    background: var(--vrv-bg-card-alt);
    border-color: var(--vrv-text-muted);
}

.vrv-btn-success { background: var(--vrv-success); }
.vrv-btn-success:hover { background: #025a36; }

.vrv-btn-danger { background: var(--vrv-danger); }
.vrv-btn-danger:hover { background: #8a1a13; }

.vrv-btn-purple { background: var(--vrv-purple); color: var(--vrv-bg-card); }
.vrv-btn-purple:hover { background: var(--vrv-purple-hover); }

.vrv-btn-ghost {
    background: transparent;
    color: var(--vrv-text-body);
    border-color: var(--vrv-border);
}
.vrv-btn-ghost:hover { background: var(--vrv-bg-card-alt); }

/* ----------------------------------------------------------------------------
 * 6. TABS (.vrv-tabs)
 * ---------------------------------------------------------------------------- */
.vrv-tabs {
    display: flex; flex-wrap: wrap; gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--vrv-border-soft);
}
.vrv-tab {
    background: transparent;
    color: var(--vrv-text-muted);
    border: none;
    padding: 10px 18px;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.vrv-tab:hover { color: var(--vrv-text-main); }
.vrv-tab.is-active {
    color: var(--vrv-accent);
    border-bottom-color: var(--vrv-accent);
}
.vrv-pane { display: none; padding-top: 18px; }
.vrv-pane.is-active { display: block; }

/* ----------------------------------------------------------------------------
 * 7. CARDS (.vrv-card, .vrv-hero)
 * ---------------------------------------------------------------------------- */
.vrv-card {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    padding: 16px;
    box-shadow: var(--vrv-shadow-sm);
}
.vrv-card-header {
    margin: 0 0 12px 0;
    font-size: 14px; font-weight: 700;
    color: var(--vrv-text-main);
}

.vrv-hero {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: var(--vrv-shadow-sm);
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.vrv-hero.is-success { border-top: 4px solid var(--vrv-success); }
.vrv-hero.is-danger  { border-top: 4px solid var(--vrv-danger); }
.vrv-hero.is-warning { border-top: 4px solid var(--vrv-warning); }

/* ----------------------------------------------------------------------------
 * 8. KPI CARDS (.vrv-kpi-grid, .vrv-kpi)
 * ---------------------------------------------------------------------------- */
.vrv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.vrv-kpi {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    padding: 14px 16px;
    box-shadow: var(--vrv-shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vrv-kpi:hover {
    border-color: var(--vrv-accent);
    box-shadow: 0 1px 4px rgba(2,106,162,0.08);
}
.vrv-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--vrv-text-muted);
    margin-bottom: 4px;
}
.vrv-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--vrv-text-main);
    line-height: 1.2;
}
.vrv-kpi-sub {
    font-size: 11px;
    color: var(--vrv-text-muted);
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
 * 9. TABLES (.vrv-table)
 * ---------------------------------------------------------------------------- */
.vrv-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    overflow: hidden;
    box-shadow: var(--vrv-shadow-sm);
}
.vrv-table th {
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-text-muted);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--vrv-border);
}
.vrv-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--vrv-border-soft);
    font-size: 13px;
    color: var(--vrv-text-body);
}
.vrv-table td strong { color: var(--vrv-text-main); }
.vrv-table tbody tr:hover td { background: var(--vrv-bg-card-alt); }
.vrv-table th.num,
.vrv-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
 * 10. EMPTY STATE (.vrv-empty)
 * ---------------------------------------------------------------------------- */
.vrv-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--vrv-text-muted);
    background: var(--vrv-bg-card);
    border-radius: var(--vrv-radius);
    border: 1px dashed var(--vrv-border);
    font-size: 14px;
}

/* ----------------------------------------------------------------------------
 * 11. TAGS / BADGES (.vrv-tag)
 * ---------------------------------------------------------------------------- */
.vrv-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.vrv-tag-success { background: var(--vrv-success-bg); color: var(--vrv-success); border: 1px solid var(--vrv-success); }
.vrv-tag-warning { background: var(--vrv-warning-bg); color: var(--vrv-warning); border: 1px solid var(--vrv-warning); }
.vrv-tag-danger  { background: var(--vrv-danger-bg);  color: var(--vrv-danger);  border: 1px solid var(--vrv-danger); }
.vrv-tag-accent  { background: var(--vrv-accent-soft);color: var(--vrv-accent);  border: 1px solid var(--vrv-accent); }

/* ----------------------------------------------------------------------------
 * 12. MODAL (.vrv-modal)
 * ---------------------------------------------------------------------------- */
.vrv-modal-bg {
    position: fixed; inset: 0;
    background: rgba(16,24,40,0.5);
    backdrop-filter: blur(2px);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vrv-modal-bg.is-open { display: flex; }
.vrv-modal {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius-lg);
    padding: 24px;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--vrv-shadow-lg);
}
.vrv-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.vrv-modal-header h2 {
    margin: 0; color: var(--vrv-text-main);
    font-size: 18px; font-weight: 700;
}
.vrv-modal-close {
    cursor: pointer;
    color: var(--vrv-text-muted);
    font-size: 24px; line-height: 1;
    padding: 0 8px; border-radius: var(--vrv-radius);
    background: transparent; border: none;
    transition: all 0.15s;
}
.vrv-modal-close:hover {
    color: var(--vrv-text-main);
    background: var(--vrv-bg-card-alt);
}

/* ----------------------------------------------------------------------------
 * 13. UTILITY (.vrv-*)
 * ---------------------------------------------------------------------------- */
.vrv-num         { font-variant-numeric: tabular-nums; }
.vrv-link        { color: var(--vrv-accent); text-decoration: none; }
.vrv-link:hover  { color: var(--vrv-accent-hover); text-decoration: underline; }
.vrv-up          { color: var(--vrv-success); font-weight: 700; }
.vrv-down        { color: var(--vrv-danger); font-weight: 700; }
.vrv-zero        { color: var(--vrv-text-muted); }
.vrv-mono        { font-family: var(--vrv-font-mono); }
.vrv-text-main   { color: var(--vrv-text-main); }
.vrv-text-body   { color: var(--vrv-text-body); }
.vrv-text-muted  { color: var(--vrv-text-muted); }
.vrv-text-faint  { color: var(--vrv-text-faint); }

/* ----------------------------------------------------------------------------
 * 14. RESPONSIVE
 * ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vrv-app { padding: 14px; }
    .vrv-kpi-grid { grid-template-columns: 1fr 1fr; }
    .vrv-tab { padding: 8px 12px; font-size: 12px; }
    .vrv-hero { flex-direction: column; }
}

/* ============================================================================
 * 15. COMPATIBILITY LAYER — Andamento Social (.sm-*)
 *
 * Alimenta le classi esistenti del modulo con le variabili del design system.
 * Permette di ottenere il look corporate senza modificare il PHP del modulo.
 * Quando il modulo verrà migrato a .vrv-*, questo blocco si potrà rimuovere.
 * ============================================================================ */

/* Wrapper modulo */
.sm-wrap {
    color: var(--vrv-text-body);
    font-family: var(--vrv-font-sans);
}

/* Wrapper public mode (dashboard cliente) */
.sm-wrap.sm-wrap-public {
    max-width: 1300px;
    margin: 0 auto;
    padding: 14px;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius-lg);
}

/* Filtri bar */
.sm-wrap .sm-filters {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-filters label {
    color: var(--vrv-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sm-wrap .sm-filters select,
.sm-wrap .sm-filters input {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-main);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
}
.sm-wrap .sm-filters select:focus,
.sm-wrap .sm-filters input:focus {
    border-color: var(--vrv-accent);
    box-shadow: var(--vrv-ring);
    outline: none;
}

/* Bottoni — specificità rinforzata per battere reset bottoni del tema WP */
.sm-wrap button.sm-btn {
    background: var(--vrv-accent);
    color: var(--vrv-bg-card);
    border: 1px solid transparent;
}
.sm-wrap button.sm-btn:hover { background: var(--vrv-accent-hover); }

.sm-wrap button.sm-btn-import { background: var(--vrv-success); color: var(--vrv-bg-card); }
.sm-wrap button.sm-btn-import:hover { background: #025a36; }

.sm-wrap button.sm-btn-print { background: var(--vrv-text-strong); color: var(--vrv-bg-card); }
.sm-wrap button.sm-btn-print:hover { background: var(--vrv-text-body); }

.sm-wrap button.sm-btn-share { background: var(--vrv-purple); color: var(--vrv-bg-card); }
.sm-wrap button.sm-btn-share:hover { background: var(--vrv-purple-hover); }

/* Tabs */
.sm-wrap .sm-tabs { border-bottom: 2px solid var(--vrv-border-soft); }
.sm-wrap .sm-tab { color: var(--vrv-text-muted); background: transparent; }
.sm-wrap .sm-tab:hover { color: var(--vrv-text-main); }
.sm-wrap .sm-tab.active {
    color: var(--vrv-accent);
    border-bottom-color: var(--vrv-accent);
}

/* Hero */
.sm-wrap .sm-hero {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-hero.crescita { border-top: 4px solid var(--vrv-success); }
.sm-wrap .sm-hero.calo     { border-top: 4px solid var(--vrv-danger); }
.sm-wrap .sm-hero-status            { color: var(--vrv-text-main); }
.sm-wrap .sm-hero.crescita .sm-hero-status { color: var(--vrv-success); }
.sm-wrap .sm-hero.calo .sm-hero-status     { color: var(--vrv-danger); }
.sm-wrap .sm-hero-msg               { color: var(--vrv-text-muted); }
.sm-wrap .sm-hero-stats             { color: var(--vrv-text-body); }
.sm-wrap .sm-hero-stats strong      { color: var(--vrv-text-main); }

/* KPI */
.sm-wrap .sm-kpi {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-kpi:hover {
    border-color: var(--vrv-accent);
    box-shadow: 0 1px 4px rgba(2,106,162,0.08);
}
.sm-wrap .sm-kpi-lbl { color: var(--vrv-text-muted); }
.sm-wrap .sm-kpi-val { color: var(--vrv-text-main); }
.sm-wrap .sm-kpi-sub { color: var(--vrv-text-muted); }

/* Grafici */
.sm-wrap .sm-grafico-box {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-grafico-box h3 { color: var(--vrv-text-main); }

/* Tabelle */
.sm-wrap .sm-table {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    overflow: hidden;
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-table th {
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-text-muted);
    border-bottom: 1px solid var(--vrv-border);
}
.sm-wrap .sm-table td {
    color: var(--vrv-text-body);
    border-top: 1px solid var(--vrv-border-soft);
}
.sm-wrap .sm-table tr:hover td { background: var(--vrv-bg-card-alt); }
.sm-wrap .sm-up    { color: var(--vrv-success); }
.sm-wrap .sm-down  { color: var(--vrv-danger); }
.sm-wrap .sm-zero  { color: var(--vrv-text-muted); }
.sm-wrap .sm-link  { color: var(--vrv-accent); }
.sm-wrap .sm-link:hover { color: var(--vrv-accent-hover); }
.sm-wrap .sm-tag.org   { background: var(--vrv-success-bg); color: var(--vrv-success); border: 1px solid var(--vrv-success); }
.sm-wrap .sm-tag.paid  { background: var(--vrv-warning-bg); color: var(--vrv-warning); border: 1px solid var(--vrv-warning); }

/* Demo cards (Audience) */
.sm-wrap .sm-demo-card {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.sm-wrap .sm-demo-card h4   { color: var(--vrv-text-main); }
.sm-wrap .sm-demo-label     { color: var(--vrv-text-body); }
.sm-wrap .sm-demo-val       { color: var(--vrv-text-main); }
.sm-wrap .sm-demo-bar       { background: var(--vrv-bg-card-alt); border: 1px solid var(--vrv-border-soft); }
.sm-wrap .sm-demo-bar-fill  { background: linear-gradient(90deg, var(--vrv-accent), #1570ef); }

/* Stato vuoto */
.sm-wrap .sm-empty {
    background: var(--vrv-bg-card);
    border: 1px dashed var(--vrv-border);
    color: var(--vrv-text-muted);
}

/* Post filtri */
.sm-wrap .sm-post-filtri select {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-main);
    border: 1px solid var(--vrv-border);
}
.sm-wrap .sm-post-filtri label { color: var(--vrv-text-muted); }

/* Modali */
.sm-wrap .sm-modal-bg { background: rgba(16,24,40,0.5); backdrop-filter: blur(2px); }
.sm-wrap .sm-modal {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    box-shadow: var(--vrv-shadow-lg);
}
.sm-wrap .sm-modal h2 { color: var(--vrv-text-main); }
.sm-wrap .sm-modal h2 .sm-modal-close { color: var(--vrv-text-muted); }
.sm-wrap .sm-modal h2 .sm-modal-close:hover {
    color: var(--vrv-text-main);
    background: var(--vrv-bg-card-alt);
}
.sm-wrap .sm-modal-info { color: var(--vrv-text-body); border-bottom: 1px solid var(--vrv-border-soft); }
.sm-wrap .sm-modal-info strong { color: var(--vrv-text-main); }
.sm-wrap .sm-modal-cliente {
    background: var(--vrv-accent-soft);
    color: var(--vrv-text-body);
    border: 1px solid #d1e9f4;
}
.sm-wrap .sm-modal-cliente strong { color: var(--vrv-accent); }
.sm-wrap .sm-dz {
    background: var(--vrv-bg-card-alt);
    border: 2px dashed var(--vrv-border);
}
.sm-wrap .sm-dz:hover, .sm-wrap .sm-dz.dragover {
    border-color: var(--vrv-accent);
    background: var(--vrv-accent-soft);
}
.sm-wrap .sm-dz-title { color: var(--vrv-text-main); }
.sm-wrap .sm-dz-sub   { color: var(--vrv-text-muted); }
.sm-wrap .sm-recap-box {
    background: var(--vrv-bg-card-alt);
    border: 1px solid var(--vrv-border-soft);
    color: var(--vrv-text-body);
}
.sm-wrap .sm-recap-box strong { color: var(--vrv-text-main); }
.sm-wrap .sm-modal-progress {
    background: var(--vrv-bg-card-alt);
    border: 1px solid var(--vrv-border-soft);
    color: var(--vrv-text-body);
}
.sm-wrap .sm-modal-result.success {
    background: var(--vrv-success-bg);
    border: 1px solid var(--vrv-success);
    color: var(--vrv-text-body);
}
.sm-wrap .sm-modal-result.error {
    background: var(--vrv-danger-bg);
    border: 1px solid var(--vrv-danger);
    color: var(--vrv-text-body);
}
.sm-wrap .sm-modal-result strong { color: var(--vrv-text-main); }
.sm-wrap .sm-modal-result ul li  { color: var(--vrv-text-body); }

/* Public dashboard */
.sm-wrap .sm-pub-header {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-bottom: none;
}
.sm-wrap .sm-pub-header-text h1 { color: var(--vrv-text-main); }
.sm-wrap .sm-pub-header-text .cliente { color: var(--vrv-accent); }
.sm-wrap .sm-pub-info {
    background: var(--vrv-accent-soft);
    border: 1px solid #d1e9f4;
    border-left: 3px solid var(--vrv-accent);
    color: var(--vrv-text-body);
}

/* Body pubblico */
body:has(.sm-wrap) { background: var(--vrv-bg-page) !important; }

/* Flatpickr (calendario) — light mode */
.flatpickr-calendar {
    background: var(--vrv-bg-card) !important;
    border: 1px solid var(--vrv-border) !important;
    box-shadow: var(--vrv-shadow-lg) !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--vrv-border) !important; }
.flatpickr-month, .flatpickr-current-month,
.flatpickr-monthDropdown-months, .flatpickr-weekday {
    color: var(--vrv-text-main) !important;
    background: transparent !important;
}
.flatpickr-day { color: var(--vrv-text-body) !important; }
.flatpickr-day:hover {
    background: var(--vrv-bg-card-alt) !important;
    border-color: var(--vrv-bg-card-alt) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--vrv-accent) !important;
    border-color: var(--vrv-accent) !important;
    color: var(--vrv-bg-card) !important;
}
.flatpickr-day.today { border-color: var(--vrv-accent) !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--vrv-text-faint) !important; }
.flatpickr-prev-month, .flatpickr-next-month {
    color: var(--vrv-text-body) !important;
    fill: var(--vrv-text-body) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--vrv-accent) !important; }
.numInputWrapper:hover, .flatpickr-monthDropdown-months:hover {
    background: var(--vrv-bg-card-alt) !important;
}

/* Hero center variant (Andamento Social Organico) */
.sm-wrap .sm-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
}
.sm-wrap .sm-hero-row {
    display: flex;
    gap: 60px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}
.sm-wrap .sm-hero-bignum {
    font-size: 48px;
    font-weight: 700;
    color: var(--vrv-text-main);
    line-height: 1;
}
.sm-wrap .sm-hero-bignum-accent {
    color: var(--vrv-accent);
}
.sm-wrap .sm-hero-caption {
    font-size: 13px;
    color: var(--vrv-text-muted);
    margin-top: 8px;
    letter-spacing: 0.5px;
}
.sm-wrap .sm-hero-sep {
    font-size: 32px;
    color: var(--vrv-text-faint);
    align-self: center;
    opacity: 0.6;
}

/* Audience titoli sezione */
.sm-wrap .sm-audience-title {
    color: var(--vrv-text-main);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px 0;
}
.sm-wrap .sm-audience-title-spaced { margin-top: 28px; }

/* Section title generico (es. "Dettaglio per campagna") */
.sm-wrap .sm-section-title {
    color: var(--vrv-text-main);
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0 10px 0;
}

/* Altezze grafici (override) */
.sm-wrap .sm-grafico-wrap-xl { height: 420px; }
.sm-wrap .sm-grafico-wrap-lg { height: 380px; }
.sm-wrap .sm-grafico-wrap    { height: 320px; }

/* KPI Organico unificato (8 box uguali, numeri più grandi) */
.sm-wrap .sm-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.sm-wrap .sm-kpi { padding: 16px 18px; }
.sm-wrap .sm-kpi-val { font-size: 28px; font-weight: 700; line-height: 1.1; }

/* Varianti colore valore KPI */
.sm-wrap .sm-kpi-val-accent  { color: var(--vrv-accent); }
.sm-wrap .sm-kpi-val-success { color: var(--vrv-success); }
.sm-wrap .sm-kpi-val-danger  { color: var(--vrv-danger); }

/* Classe colore per delta follower mensile (renderOrgTable) */
.sm-wrap .sm-foll-arancio {
    color: var(--vrv-chart-yellow);
    font-weight: 600;
}

/* ============================================================================
 * 16. ERP MASTER APP — Sidebar + Content Area + Modali
 * Shortcode: [erp_app_master_desktop]
 * ============================================================================ */

/* --- Wrapper SPA full-width --- */
.erp-app-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--vrv-bg-page);
    font-family: var(--vrv-font);
    overflow: hidden;
}

/* Quando la master app è attiva, nasconde tutto il chrome del tema WP */
.erp-app-page #wpadminbar,
.erp-app-page .site-header,
.erp-app-page .site-footer,
.erp-app-page header,
.erp-app-page footer,
.erp-app-page #masthead,
.erp-app-page #colophon,
.erp-app-page .elementor-location-header,
.erp-app-page .elementor-location-footer,
.erp-app-page h1.entry-title,
.erp-app-page h1.page-title,
.erp-app-page .page-header,
.erp-app-page .entry-header { display: none !important; }

html.erp-app-page { margin-top: 0 !important; }
.erp-app-page .site-content,
.erp-app-page .site-main,
.erp-app-page .container,
.erp-app-page .wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

/* --- Sidebar --- */
.erp-sidebar {
    width: 250px;
    background: var(--vrv-bg-card);
    border-right: 1px solid var(--vrv-border-soft);
    padding-top: 20px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.erp-sidebar-menu-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}
.erp-sidebar-brand {
    padding: 0 20px 30px 20px;
}
.erp-sidebar-brand img {
    max-width: 150px;
    height: auto;
}

/* --- Accordion buttons (gruppi del menu) --- */
.erp-accordion-btn {
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vrv-text-body);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--vrv-border-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--vrv-bg-card-alt);
    transition: background 0.2s, color 0.2s;
}
.erp-accordion-btn:hover {
    background: var(--vrv-border-soft);
}
.erp-accordion-btn.active {
    color: var(--vrv-accent);
    border-left: 3px solid var(--vrv-accent);
    padding-left: 17px;
}
.erp-accordion-btn .arrow {
    font-size: 10px;
    transition: transform 0.2s;
}

.erp-accordion-content {
    display: none;
    padding: 10px 0;
    background: var(--vrv-bg-card);
}
.erp-accordion-content.open {
    display: block;
}

/* --- Voci menu top-level (Home, Chat, Editor, ecc.) --- */
.erp-menu-section {
    padding: 10px 20px;
    border-bottom: 1px solid var(--vrv-border-soft);
}
.erp-menu-section--home {
    background: var(--vrv-accent-soft);
}
.erp-menu-section .erp-menu-item {
    font-weight: 700;
    font-size: 15px;
    padding: 0;
}
.erp-menu-section .erp-menu-icon {
    margin-right: 12px;
    font-size: 18px;
}
.erp-menu-section--home .erp-menu-item {
    color: var(--vrv-accent);
}

/* --- Voci menu standard (link dentro accordion) --- */
.erp-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 35px;
    color: var(--vrv-text-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.erp-menu-item:hover {
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-text-main);
}
.erp-menu-item.active {
    background: var(--vrv-accent-soft);
    color: var(--vrv-accent);
    font-weight: 600;
}
.erp-menu-icon {
    margin-right: 12px;
    font-size: 16px;
    flex-shrink: 0;
}

/* --- Modificatori semantici per voci speciali --- */
.erp-menu-item--accent  { color: var(--vrv-accent); font-weight: 600; }
.erp-menu-item--success { color: var(--vrv-success); font-weight: 700; }
.erp-menu-item--warning { color: var(--vrv-warning); }
.erp-menu-item--danger  { color: var(--vrv-danger); }
.erp-menu-item--divider {
    border-top: 1px solid var(--vrv-border-soft);
    margin-top: 8px;
    padding-top: 14px;
}

/* --- Etichette sezione nei sottomenu --- */
.erp-submenu-label {
    padding: 14px 20px 6px 20px;
    font-size: 10px;
    font-weight: 700;
    color: var(--vrv-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.erp-submenu-label.admin {
    border-top: 1px solid var(--vrv-border-soft);
    margin-top: 10px;
    padding-top: 14px;
    color: var(--vrv-accent);
}
.erp-submenu-label.admin::before {
    content: '🔒 ';
    font-size: 11px;
    opacity: 0.7;
}

/* --- Widget utente in fondo alla sidebar --- */
.erp-user-widget {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--vrv-border-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--vrv-bg-card-alt);
}
.erp-user-avatar {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.erp-user-avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
    transition: outline 0.2s;
}
.erp-user-avatar:hover img {
    outline: 2px solid var(--vrv-accent);
    outline-offset: 2px;
}
.erp-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.erp-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--vrv-text-main);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.erp-user-name:hover {
    color: var(--vrv-accent);
    text-decoration: underline;
}
.erp-user-logout {
    font-size: 12px;
    color: var(--vrv-danger);
    text-decoration: none;
    font-weight: 500;
    margin-top: 4px;
    transition: color 0.2s;
}
.erp-user-logout:hover {
    color: #8a1a13;
    text-decoration: underline;
}

/* --- Content area --- */
.erp-content-area {
    flex-grow: 1;
    padding: 30px 40px;
    height: 100%;
    overflow-y: auto;
    background: var(--vrv-bg-page) !important;
}
.erp-sezione-app {
    display: none;
}
.erp-sezione-app.attiva {
    display: block;
    animation: erpFadeIn 0.2s ease-in-out;
}
@keyframes erpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Box notice (sostituisce gli inline-style di sezione profilo) --- */
.erp-notice {
    padding: 18px;
    border-radius: var(--vrv-radius-lg);
    margin-bottom: 16px;
}
.erp-notice--warning {
    background: var(--vrv-warning-bg);
    border: 1px solid var(--vrv-warning);
    color: var(--vrv-warning);
}
.erp-notice--info {
    background: var(--vrv-accent-soft);
    border: 1px solid var(--vrv-accent);
    color: var(--vrv-accent);
}
.erp-notice--success {
    background: var(--vrv-success-bg);
    border: 1px solid var(--vrv-success);
    color: var(--vrv-success);
}

/* --- Auth required (utente non loggato) --- */
.erp-auth-required {
    text-align: center;
    padding: 50px;
    font-family: var(--vrv-font);
    color: var(--vrv-text-body);
}
.erp-auth-required h2 {
    color: var(--vrv-text-main);
    margin-bottom: 8px;
}

/* --- Modale centrale globale (es. creazione task) --- */
#box-creazione-task-wrap,
.erp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 24, 40, 0.6);
    z-index: 999999;
    backdrop-filter: blur(4px);
}
.erp-modal-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    max-height: 95vh;
    overflow-y: auto;
}
.erp-modal-close-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
    color: var(--vrv-text-faint);
    z-index: 10;
    line-height: 1;
    transition: color 0.2s;
}
.erp-modal-close-btn:hover {
    color: var(--vrv-text-main);
}


/* ============================================================================
 * 17. HR WRAPPER TABS — Shortcode [erp_mia_dashboard] e [erp_gestione_hr_admin]
 * Tab orizzontali con eventuali sotto-tab istantanee
 * ============================================================================ */

.hrwrap {
    font-family: var(--vrv-font);
    color: var(--vrv-text-main);
    box-sizing: border-box;
}
.hrwrap-header { margin-bottom: 22px; }
.hrwrap-header h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    color: var(--vrv-text-main);
}
.hrwrap-header p {
    margin: 0;
    color: var(--vrv-text-muted);
    font-size: 14px;
}

/* --- Tab principali --- */
.hrwrap-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--vrv-border-soft);
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.hrwrap-tabs::-webkit-scrollbar { height: 4px; }
.hrwrap-tabs::-webkit-scrollbar-thumb {
    background: var(--vrv-border);
    border-radius: 2px;
}

/* Specificità rinforzata per battere reset bottoni del tema WP */
.hrwrap .hrwrap-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vrv-text-muted);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    text-decoration: none;
    font-family: inherit;
    box-shadow: none;
    outline: none;
    border-radius: 0;
}
.hrwrap .hrwrap-tab:hover {
    color: var(--vrv-text-main);
    background: var(--vrv-bg-card-alt);
}
.hrwrap .hrwrap-tab.active {
    color: var(--vrv-accent);
    background: transparent;
    border-bottom-color: var(--vrv-accent);
}
.hrwrap-tab .badge {
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-text-body);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}
.hrwrap-tab.active .badge {
    background: var(--vrv-accent-soft);
    color: var(--vrv-accent);
}
.hrwrap-tab .badge.alert {
    background: var(--vrv-danger-bg);
    color: var(--vrv-danger);
    font-weight: 700;
}
.hrwrap-tab.active .badge.alert {
    background: var(--vrv-accent-soft);
    color: var(--vrv-accent);
}

/* --- Pannelli --- */
.hrwrap-panel {
    display: none;
    animation: hrwrapFadeIn 0.2s ease-in-out;
}
.hrwrap-panel.active { display: block; }
@keyframes hrwrapFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Sotto-tab istantanee --- */
.hrwrap-subtabs {
    display: flex;
    gap: 4px;
    background: var(--vrv-bg-card-alt);
    border: 1px solid var(--vrv-border-soft);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
    width: fit-content;
    flex-wrap: wrap;
}
.hrwrap .hrwrap-subtab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vrv-text-body);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    box-shadow: none;
    outline: none;
}
.hrwrap .hrwrap-subtab:hover {
    color: var(--vrv-text-main);
    background: var(--vrv-bg-card);
}
.hrwrap .hrwrap-subtab.active {
    background: var(--vrv-bg-card);
    color: var(--vrv-accent);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.hrwrap-subtab .badge {
    background: var(--vrv-border-soft);
    color: var(--vrv-text-body);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
.hrwrap-subtab.active .badge {
    background: var(--vrv-accent-soft);
    color: var(--vrv-accent);
}
.hrwrap-subtab .badge.alert {
    background: var(--vrv-danger-bg);
    color: var(--vrv-danger);
    font-weight: 700;
}

.hrwrap-subpanel { display: none; }
.hrwrap-subpanel.active { display: block; }

.hrwrap-section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--vrv-border-soft), transparent);
    margin: 32px 0;
}

/* Nasconde tab interne dei moduli embeddati (sostituite dalle hrwrap-subtab) */
#panel-documenti .dochr-tabs { display: none; }
#panel-anagrafica div:has(> .hr-tab) { display: none; }

/* Auth/permessi negati */
.hrwrap-auth-blocked {
    text-align: center;
    padding: 40px;
    color: var(--vrv-text-muted);
}

@media (max-width: 768px) {
    .hrwrap-header h1 { font-size: 22px; }
    .hrwrap-tab { padding: 10px 14px; font-size: 13px; }
    .hrwrap-subtab { padding: 7px 12px; font-size: 12px; }
}

/* ============================================================================
 * 18. COLLAPSIBLE / ACCORDION — Sezioni di contenuto apribili/chiudibili
 *
 * Pattern HTML preferito:
 *   <div class="vrv-collapsible is-open" id="my-section">
 *     <div class="vrv-collapsible-header">
 *       <h3>📊 Titolo</h3>
 *       <span class="vrv-collapsible-arrow">▼</span>
 *     </div>
 *     <div class="vrv-collapsible-content">...</div>
 *   </div>
 *
 * Alias legacy supportati (modulo Social): .sm-coll, .sm-coll-header,
 * .sm-coll-arrow, .sm-coll-content. Per nuove feature usare prefix .vrv-*.
 *
 * Default: chiuso. Aggiungere `.is-open` per stato aperto iniziale.
 * ============================================================================ */

.vrv-collapsible,
.sm-coll {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.vrv-collapsible-header,
.sm-coll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--vrv-bg-card-alt);
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
    gap: 12px;
}
.vrv-collapsible-header:hover,
.sm-coll-header:hover {
    background: var(--vrv-border-soft);
}

.vrv-collapsible-header h3,
.vrv-collapsible-header .vrv-collapsible-title,
.sm-coll-header h3,
.sm-coll-header .sm-coll-title {
    margin: 0;
    font-size: var(--vrv-text-md);
    font-weight: 700;
    color: var(--vrv-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.vrv-collapsible-header h3 small,
.vrv-collapsible-header .vrv-collapsible-subtitle,
.sm-coll-header h3 small,
.sm-coll-header .sm-coll-subtitle {
    font-weight: 400;
    color: var(--vrv-text-muted);
    font-size: var(--vrv-text-sm);
    margin-left: 4px;
}

.vrv-collapsible-arrow,
.sm-coll-arrow {
    color: var(--vrv-text-muted);
    font-size: var(--vrv-text-xs);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    font-family: inherit;
}

.vrv-collapsible-content,
.sm-coll-content {
    display: none;
    padding: 16px;
}

.vrv-collapsible.is-open .vrv-collapsible-content,
.sm-coll.is-open .sm-coll-content { display: block; }

.vrv-collapsible.is-open .vrv-collapsible-header,
.sm-coll.is-open .sm-coll-header { border-bottom-color: var(--vrv-border-soft); }

.vrv-collapsible.is-open .vrv-collapsible-arrow,
.sm-coll.is-open .sm-coll-arrow { transform: rotate(0deg); }

.vrv-collapsible:not(.is-open) .vrv-collapsible-arrow,
.sm-coll:not(.is-open) .sm-coll-arrow { transform: rotate(-90deg); }




/* ============================================================================
 * 19. COMPONENTI RIUSABILI — Card cliccabili, Timeline, Progress bar
 *
 * Pattern usabili da qualsiasi modulo.
 *
 * Esempi d'uso:
 *
 *   <!-- Card cliccabile con filtro reciproco -->
 *   <div class="vrv-card vrv-card-clickable" data-id="123">
 *       <div class="vrv-card-title">Nome</div>
 *       <div class="vrv-card-value">85%</div>
 *       <div class="vrv-card-sub">su 8h previste</div>
 *   </div>
 *   // JS: card.classList.add('is-selected') | 'is-dimmed' | 'is-dimmed is-highlight'
 *
 *   <!-- Timeline verticale (attività, eventi, log) -->
 *   <ul class="vrv-timeline">
 *       <li>
 *           <div class="vrv-timeline-icon">✓</div>
 *           <div class="vrv-timeline-body">
 *               <div class="vrv-timeline-text">Testo evento</div>
 *               <div class="vrv-timeline-date">10/06/2026</div>
 *           </div>
 *       </li>
 *   </ul>
 *
 *   <!-- Progress bar (budget, completamento, % avanzamento) -->
 *   <div class="vrv-progress">
 *       <div class="vrv-progress-title">
 *           <span>Etichetta</span>
 *           <span class="vrv-text-muted">27 / 40h</span>
 *       </div>
 *       <div class="vrv-progress-bar">
 *           <div class="vrv-progress-fill is-warning" style="width:68%;"></div>
 *       </div>
 *   </div>
 * ============================================================================ */

/* ----- Card cliccabile + stati per filtro reciproco ----- */
.vrv-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.2s;
}
.vrv-card-clickable:hover {
    border-color: var(--vrv-accent);
    box-shadow: 0 2px 8px rgba(2, 106, 162, 0.12);
    transform: translateY(-1px);
}
.vrv-card-clickable.is-selected {
    border-color: var(--vrv-accent);
    background: var(--vrv-accent-soft);
    box-shadow: 0 0 0 2px rgba(2, 106, 162, 0.18);
}
.vrv-card-clickable.is-dimmed { opacity: 0.25; }
.vrv-card-clickable.is-dimmed.is-highlight { opacity: 1; }

/* Componenti interni di una vrv-card (titolo, valore grosso, sottotitolo) */
.vrv-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--vrv-text-main);
    margin-bottom: 4px;
}
.vrv-card-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--vrv-text-main);
    margin-bottom: 4px;
}
.vrv-card-value.is-success { color: var(--vrv-success); }
.vrv-card-value.is-warning { color: var(--vrv-warning); }
.vrv-card-value.is-danger  { color: var(--vrv-danger); }
.vrv-card-value.is-accent  { color: var(--vrv-accent); }
.vrv-card-sub {
    font-size: 11px;
    color: var(--vrv-text-muted);
}

/* ----- Timeline verticale ----- */
.vrv-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
}
.vrv-timeline li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vrv-border-soft);
}
.vrv-timeline li:last-child { border-bottom: none; }
.vrv-timeline-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vrv-accent-soft);
    color: var(--vrv-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.vrv-timeline-icon.is-success { background: var(--vrv-success-bg); color: var(--vrv-success); }
.vrv-timeline-icon.is-warning { background: var(--vrv-warning-bg); color: var(--vrv-warning); }
.vrv-timeline-icon.is-danger  { background: var(--vrv-danger-bg);  color: var(--vrv-danger); }
.vrv-timeline-icon.is-muted   { background: var(--vrv-bg-card-alt); color: var(--vrv-text-muted); }
.vrv-timeline-body { flex-grow: 1; min-width: 0; }
.vrv-timeline-text {
    font-size: 12px;
    color: var(--vrv-text-body);
    line-height: 1.4;
}
.vrv-timeline-text strong { color: var(--vrv-text-main); }
.vrv-timeline-date {
    font-size: 10px;
    color: var(--vrv-text-faint);
    display: block;
    margin-top: 3px;
}

/* Variante "right-aligned" per quando l'elemento ha un valore numerico a destra */
.vrv-timeline-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--vrv-accent);
    white-space: nowrap;
    align-self: center;
}

/* ----- Progress bar ----- */
.vrv-progress { margin-bottom: 12px; }
.vrv-progress:last-child { margin-bottom: 0; }
.vrv-progress-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--vrv-text-body);
    margin-bottom: 4px;
}
.vrv-progress-bar {
    background: var(--vrv-border-soft);
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
}
.vrv-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--vrv-accent);
    transition: width 0.5s ease;
}
.vrv-progress-fill.is-success { background: var(--vrv-success); }
.vrv-progress-fill.is-warning { background: var(--vrv-warning); }
.vrv-progress-fill.is-danger  { background: var(--vrv-danger); }

/* ============================================================================
 * MODULO DASHBOARD ORE — Stili specifici (minimal)
 *
 * Tutto ciò che è generico (card, timeline, progress bar, collapsible, empty,
 * tag, button) usa componenti del design system globale.
 *
 * Qui restano solo:
 *   - Pannello "Gestione visibilità del team" (specifico HR)
 *   - Header filtri compatto con titolo+sottotitolo
 *   - Avviso "giorni vuoti" (banner danger inline)
 *   - Layout pannelli laterali (grid responsive)
 *   - Override puntuali per la tabella dettaglio (riga espandibile)
 * ============================================================================ */

/* ----- Header filtri Dashboard Ore ----- */
.dor-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
}
.dor-title strong {
    font-size: 18px;
    color: var(--vrv-text-main);
    display: block;
    font-weight: 700;
}
.dor-title small {
    color: var(--vrv-text-muted);
    font-size: 12px;
}
.dor-filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.dor-filter-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--vrv-text-muted);
}

/* ----- Pannello Gestione Visibilità ----- */
.dor-visib {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    box-shadow: var(--vrv-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}
.dor-visib summary {
    cursor: pointer;
    padding: 12px 16px;
    background: var(--vrv-bg-card-alt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}
.dor-visib summary::-webkit-details-marker { display: none; }
.dor-visib summary:hover { background: var(--vrv-border-soft); }
.dor-visib-summary-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--vrv-text-body);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.dor-visib-summary-text small {
    font-weight: 400;
    color: var(--vrv-text-muted);
    font-size: 12px;
}
.dor-visib-arrow { color: var(--vrv-text-faint); transition: transform 0.2s; font-size: 11px; }
.dor-visib[open] .dor-visib-arrow { transform: rotate(180deg); }
.dor-visib-body { padding: 16px; border-top: 1px solid var(--vrv-border-soft); }
.dor-visib-help {
    font-size: 12px;
    color: var(--vrv-text-muted);
    margin: 0 0 14px;
}
.dor-visib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.dor-visib-chk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--vrv-border-soft);
    border-radius: var(--vrv-radius);
    cursor: pointer;
    background: var(--vrv-bg-card);
    transition: all 0.15s;
}
.dor-visib-chk:hover { background: var(--vrv-bg-card-alt); border-color: var(--vrv-border); }
.dor-visib-chk.is-nascosto { opacity: 0.55; background: var(--vrv-bg-card-alt); }
.dor-visib-chk input { margin: 0; cursor: pointer; flex-shrink: 0; }
.dor-visib-nome { font-size: 13px; color: var(--vrv-text-main); font-weight: 600; }
.dor-visib-stato { font-size: 11px; color: var(--vrv-danger); font-style: italic; margin-left: auto; }

.dor-visib-msg {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--vrv-radius);
    font-size: 12px;
}
.dor-visib-msg.is-ok  { background: var(--vrv-success-bg); color: var(--vrv-success); }
.dor-visib-msg.is-err { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

/* ----- Banner avviso giorni vuoti ----- */
.dor-avviso {
    background: var(--vrv-danger-bg);
    border: 1px solid var(--vrv-danger);
    color: var(--vrv-danger);
    padding: 14px 16px;
    border-radius: var(--vrv-radius);
    margin-bottom: 16px;
}
.dor-avviso strong { display: block; margin-bottom: 4px; font-size: 14px; }
.dor-avviso-dates {
    font-family: var(--vrv-font-mono);
    font-size: 12px;
    color: var(--vrv-danger);
    line-height: 1.6;
    opacity: 0.85;
}

/* ----- Grid per cards di confronto (team/clienti/commesse) ----- */
.dor-confronto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* Mini-grafico inline nelle card del team */
.dor-conf-chart {
    height: 60px;
    margin-top: 8px;
}

/* Hint "filtrato" nelle header collapsibili */
.dor-hint-reset {
    font-size: 12px;
    color: var(--vrv-accent);
    font-weight: 600;
    margin-left: auto;
    margin-right: 12px;
}
.dor-reset-link {
    color: var(--vrv-accent);
    text-decoration: underline;
    cursor: pointer;
}
.dor-reset-link:hover { color: var(--vrv-accent-hover); }

/* ----- Layout pannelli laterali (attività · ore per progetto · budget) ----- */
.dor-side-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

/* ----- Tabella dettaglio giornaliero ----- */
.dor-tabella tbody tr.dor-futuro { opacity: 0.5; }
.dor-tabella tbody tr.dor-expandable { cursor: pointer; }
.dor-tabella tbody tr.dor-expandable:hover { background: var(--vrv-bg-card-alt); }
.dor-tabella tbody tr.dor-row-dettaglio { background: var(--vrv-bg-card-alt); }
.dor-tabella tbody tr.dor-row-dettaglio td { padding: 12px 16px; font-size: 12px; color: var(--vrv-text-body); }

.dor-stato-label { font-weight: 600; font-size: 12px; }

.dor-dett-box { display: flex; flex-direction: column; gap: 6px; }
.dor-dett-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--vrv-border-soft);
}
.dor-dett-row:last-child { border-bottom: none; }
.dor-dett-ore {
    font-weight: 700;
    color: var(--vrv-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
 * 20. MODULO DIPENDENTI DASHBOARD — Cartellino + pannello admin contratti
 * Estratto da erp_hr_print_styles() del modulo dipendenti-dashboard.
 * Prefissi: .hr-*
 * ============================================================================ */

        .hr-wrap {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--vrv-text-main);
            box-sizing: border-box;
        }
        .hr-wrap * { box-sizing: border-box; }

        .hr-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .hr-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            color: var(--vrv-text-main);
        }
        .hr-header p {
            margin: 4px 0 0;
            color: var(--vrv-text-muted);
            font-size: 14px;
        }

        /* KPI cards (cartellino dipendente) */
        .hr-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .hr-kpi {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .hr-kpi-label {
            font-size: 12px;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .hr-kpi-value {
            font-size: 26px;
            font-weight: 700;
            color: var(--vrv-text-main);
            line-height: 1.1;
        }
        .hr-kpi-sub {
            font-size: 12px;
            color: var(--vrv-text-muted);
            margin-top: 6px;
        }
        .hr-kpi.pos { border-top: 3px solid #12b76a; }
        .hr-kpi.neg { border-top: 3px solid #f04438; }
        .hr-kpi.info { border-top: 3px solid var(--vrv-info); }
        .hr-kpi.warn { border-top: 3px solid #f79009; }

        /* Sezioni card */
        .hr-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 22px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .hr-card h3 {
            margin: 0 0 16px;
            font-size: 17px;
            font-weight: 700;
            color: var(--vrv-text-main);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
        }

        /* Liste chiave-valore */
        .hr-kv {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px 20px;
        }
        .hr-kv-row {
            display: flex;
            flex-direction: column;
            padding: 6px 0;
        }
        .hr-kv-label {
            font-size: 11px;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .hr-kv-value {
            font-size: 14px;
            color: var(--vrv-text-main);
            font-weight: 500;
        }
        .hr-kv-value.empty { color: var(--vrv-text-faint); font-style: italic; font-weight: 400; }

        /* Tabella dipendenti (admin) */
        .hr-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .hr-table thead th {
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
            font-weight: 600;
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .hr-table tbody td {
            padding: 12px;
            border-bottom: 1px solid var(--vrv-bg-hover);
            vertical-align: middle;
        }
        .hr-table tbody tr:hover { background: var(--vrv-bg-card-alt); }
        .hr-avatar-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .hr-avatar-cell img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--vrv-border-lighter);
        }
        .hr-avatar-cell strong {
            color: var(--vrv-text-main);
            font-weight: 600;
        }
        .hr-avatar-cell small {
            display: block;
            color: var(--vrv-text-muted);
            font-size: 12px;
        }

        /* Badge */
        .hr-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .hr-badge.gray { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }
        .hr-badge.blue { background: var(--vrv-bg-info); color: var(--vrv-accent); }
        .hr-badge.green { background: var(--vrv-success-bg); color: var(--vrv-success); }
        .hr-badge.orange { background: var(--vrv-bg-warning-bright); color: var(--vrv-warning-strong); }
        .hr-badge.red { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

        /* Bottoni */
        .hr-btn {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--vrv-border);
            background: var(--vrv-bg-card);
            color: var(--vrv-text-body);
            text-decoration: none;
            transition: all 0.2s;
        }
        .hr-btn:hover { background: var(--vrv-bg-card-alt); }
        .hr-btn.primary { background: var(--vrv-info); color: var(--vrv-bg-card); border-color: var(--vrv-info); }
        .hr-btn.primary:hover { background: var(--vrv-info-dark); }
        .hr-btn.small { padding: 6px 12px; font-size: 12px; }

        /* Form contratto */
        .hr-form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px 18px;
        }
        .hr-form-grid .full { grid-column: 1 / -1; }
        .hr-field label {
            display: block;
            font-size: 12px;
            color: var(--vrv-text-body);
            font-weight: 600;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .hr-field input,
        .hr-field select,
        .hr-field textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--vrv-border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            color: var(--vrv-text-main);
            background: var(--vrv-bg-card);
            transition: border-color 0.2s;
        }
        .hr-field input:focus,
        .hr-field select:focus,
        .hr-field textarea:focus {
            outline: none;
            border-color: var(--vrv-info);
            box-shadow: 0 0 0 3px rgba(3,169,244,0.1);
        }

        /* Modale modifica contratto */
        .hr-modal-bg {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(16,24,40,0.5);
            z-index: 9999;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 20px;
            overflow-y: auto;
        }
        .hr-modal-bg.show { display: flex; }
        .hr-modal {
            background: var(--vrv-bg-card);
            border-radius: 12px;
            padding: 28px;
            max-width: 760px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(16,24,40,0.3);
        }
        .hr-modal-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 22px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--vrv-border-lighter);
        }
        .hr-modal-head h3 { margin: 0; font-size: 18px; color: var(--vrv-text-main); }
        .hr-modal-close {
            background: none;
            border: none;
            font-size: 26px;
            color: var(--vrv-text-faint);
            cursor: pointer;
            line-height: 1;
        }
        .hr-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 24px;
            padding-top: 18px;
            border-top: 1px solid var(--vrv-border-lighter);
        }

        /* Toast */
        .hr-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--vrv-text-main);
            color: var(--vrv-bg-card);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(16,24,40,0.3);
            z-index: 10000;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
        }
        .hr-toast.show { opacity: 1; transform: translateY(0); }
        .hr-toast.error { background: var(--vrv-danger); }
        .hr-toast.success { background: var(--vrv-success); }

        /* Mobile */
        @media (max-width: 768px) {
            .hr-table thead { display: none; }
            .hr-table tbody td {
                display: block;
                padding: 6px 0;
                border: none;
            }
            .hr-table tbody tr {
                display: block;
                background: var(--vrv-bg-card);
                border: 1px solid var(--vrv-border-lighter);
                border-radius: 10px;
                padding: 14px;
                margin-bottom: 12px;
            }
            .hr-modal {
                padding: 20px;
            }
        }

/* ============================================================================
 * 21. MODULO DOCUMENTI HR — Upload, archivio, matrice visione
 * Estratto da erp_dochr_print_styles() del modulo documenti-hr.
 * Prefissi: .dochr-*
 * ============================================================================ */

        .dochr-wrap {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--vrv-text-main);
            box-sizing: border-box;
        }
        .dochr-wrap * { box-sizing: border-box; }

        .dochr-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 22px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .dochr-card h3 {
            margin: 0 0 16px;
            font-size: 17px;
            font-weight: 700;
            color: var(--vrv-text-main);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
        }

        /* Tabs */
        .dochr-tabs {
            display: flex;
            gap: 4px;
            border-bottom: 2px solid var(--vrv-border-lighter);
            margin-bottom: 22px;
            flex-wrap: wrap;
        }
        .dochr-tab {
            padding: 10px 18px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            color: var(--vrv-text-muted);
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }
        .dochr-tab.active { color: var(--vrv-info); border-bottom-color: var(--vrv-info); }

        /* Dropzone */
        .dochr-dropzone {
            border: 3px dashed var(--vrv-border);
            border-radius: 14px;
            padding: 50px 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #fafbfc;
        }
        .dochr-dropzone:hover,
        .dochr-dropzone.dragover {
            border-color: var(--vrv-info);
            background: var(--vrv-bg-info);
        }
        .dochr-dropzone-icon { font-size: 56px; margin-bottom: 12px; }
        .dochr-dropzone-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--vrv-text-main);
            margin-bottom: 6px;
        }
        .dochr-dropzone-sub {
            font-size: 13px;
            color: var(--vrv-text-muted);
        }

        /* Progresso */
        .dochr-progress {
            margin-top: 18px;
            background: var(--vrv-bg-hover);
            border-radius: 999px;
            overflow: hidden;
            height: 10px;
        }
        .dochr-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--vrv-info), var(--vrv-info-dark));
            width: 0%;
            transition: width 0.3s;
        }
        .dochr-status {
            margin-top: 10px;
            font-size: 13px;
            color: var(--vrv-text-strong);
            text-align: center;
        }

        /* Tabella assegnazioni */
        .dochr-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            margin-top: 14px;
        }
        .dochr-table thead th {
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
            font-weight: 600;
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .dochr-table tbody td {
            padding: 12px;
            border-bottom: 1px solid var(--vrv-bg-hover);
            vertical-align: middle;
        }
        .dochr-table tbody tr.match-alto { background: #f0fdf4; }
        .dochr-table tbody tr.match-medio { background: var(--vrv-bg-warning-light); }
        .dochr-table tbody tr.match-nessuno { background: var(--vrv-danger-bg); }

        .dochr-pagina-badge {
            display: inline-block;
            background: var(--vrv-bg-hover);
            color: var(--vrv-text-body);
            padding: 3px 10px;
            border-radius: 6px;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 12px;
            font-weight: 600;
        }
        .dochr-pagina-badge.copia {
            background: var(--vrv-bg-warning-bright);
            color: var(--vrv-warning-strong);
        }

        .dochr-cf {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11px;
            color: var(--vrv-text-strong);
            background: var(--vrv-bg-card-alt);
            padding: 3px 6px;
            border-radius: 4px;
            display: inline-block;
        }

        /* Badge */
        .dochr-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .dochr-badge.green  { background: var(--vrv-success-bg); color: var(--vrv-success); }
        .dochr-badge.orange { background: var(--vrv-bg-warning-bright); color: var(--vrv-warning-strong); }
        .dochr-badge.red    { background: var(--vrv-danger-bg); color: var(--vrv-danger); }
        .dochr-badge.blue   { background: var(--vrv-bg-info); color: var(--vrv-accent); }
        .dochr-badge.purple { background: #f4f3ff; color: #5925dc; }
        .dochr-badge.gray   { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }

        /* Bottoni */
        .dochr-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--vrv-border);
            background: var(--vrv-bg-card);
            color: var(--vrv-text-body);
            text-decoration: none;
            transition: all 0.2s;
        }
        .dochr-btn:hover { background: var(--vrv-bg-card-alt); }
        .dochr-btn.primary { background: var(--vrv-info); color: var(--vrv-bg-card); border-color: var(--vrv-info); }
        .dochr-btn.primary:hover { background: var(--vrv-info-dark); }
        .dochr-btn.success { background: #12b76a; color: var(--vrv-bg-card); border-color: #12b76a; }
        .dochr-btn.success:hover { background: var(--vrv-success); }
        .dochr-btn.small { padding: 6px 12px; font-size: 12px; }
        .dochr-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Form select correzione */
        .dochr-select {
            padding: 6px 8px;
            border: 1px solid var(--vrv-border);
            border-radius: 6px;
            font-size: 13px;
            background: var(--vrv-bg-card);
            min-width: 200px;
        }

        /* Riepilogo finale */
        .dochr-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 18px;
        }
        .dochr-summary-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .dochr-summary-num {
            font-size: 24px;
            font-weight: 700;
            color: var(--vrv-text-main);
            line-height: 1;
        }
        .dochr-summary-label {
            font-size: 11px;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
            margin-top: 4px;
        }

        /* Toast */
        .dochr-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--vrv-text-main);
            color: var(--vrv-bg-card);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(16,24,40,0.3);
            z-index: 10000;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
        }
        .dochr-toast.show { opacity: 1; transform: translateY(0); }
        .dochr-toast.error { background: var(--vrv-danger); }
        .dochr-toast.success { background: var(--vrv-success); }

/* ============================================================================
 * 22. MODULO BUSTE PAGA — Box residui ufficiali
 * Estratto da erp_residui_render_styles() del modulo buste-paga.
 * Prefissi: .residui-*
 * ============================================================================ */

        .residui-box {
            background: linear-gradient(135deg, var(--vrv-bg-card) 0%, var(--vrv-bg-card-alt) 100%);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 14px;
            padding: 22px;
            margin: 16px 0;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        .residui-header { margin-bottom: 16px; }
        .residui-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--vrv-text-main);
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .residui-badge-ufficiale {
            display: inline-block;
            background: var(--vrv-success-bg);
            color: var(--vrv-success);
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .residui-sub {
            font-size: 12px;
            color: var(--vrv-text-muted);
            margin-top: 4px;
        }
        .residui-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
        }
        .residui-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 10px;
            padding: 16px;
            position: relative;
        }
        .residui-card-ferie { border-top: 3px solid var(--vrv-info); }
        .residui-card-permessi { border-top: 3px solid #7c3aed; }
        .residui-card-icona { font-size: 26px; margin-bottom: 4px; }
        .residui-card-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 6px;
        }
        .residui-card-value strong {
            font-size: 30px;
            font-weight: 700;
            color: var(--vrv-text-main);
            line-height: 1;
        }
        .residui-card-value span {
            font-size: 13px;
            color: var(--vrv-text-muted);
            margin-left: 6px;
        }
        .residui-card-sub {
            font-size: 12px;
            color: var(--vrv-text-muted);
            margin-top: 6px;
        }
        .residui-card-detail {
            font-size: 11px;
            color: var(--vrv-text-faint);
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--vrv-border-lighter);
        }
        .residui-delta {
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid var(--vrv-border-lighter);
        }
        .residui-delta-header {
            font-size: 13px;
            color: var(--vrv-text-strong);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .residui-delta-badge {
            background: var(--vrv-bg-warning-bright);
            color: var(--vrv-warning-strong);
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .residui-delta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }
        .residui-delta-card {
            background: var(--vrv-bg-warning-light);
            border: 1px solid #fedf89;
            border-radius: 8px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .residui-delta-icona { font-size: 22px; }
        .residui-delta-card strong {
            display: block;
            color: var(--vrv-text-main);
            font-size: 16px;
            font-weight: 700;
        }
        .residui-delta-card small {
            display: block;
            color: var(--vrv-text-faint);
            font-size: 11px;
            margin-top: 2px;
        }
        .residui-footer {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--vrv-border-lighter);
            color: var(--vrv-text-faint);
            font-size: 11px;
        }
        .residui-empty {
            background: var(--vrv-bg-card-alt);
            border: 1px dashed var(--vrv-border);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .residui-icon { font-size: 32px; }
        .residui-empty-text strong { color: var(--vrv-text-strong); font-size: 14px; }
        .residui-empty-text p { margin: 4px 0 0; color: var(--vrv-text-faint); font-size: 12px; }

/* ============================================================================
 * 23. MODULO REGISTRO ASSENZE — Registro mensile + riepilogo team
 * Estratto da erp_reg_print_styles() del modulo registro-assenze.
 * Prefissi: .reg-*
 * ============================================================================ */

        .reg-wrap {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--vrv-text-main);
            box-sizing: border-box;
        }
        .reg-wrap * { box-sizing: border-box; }

        .reg-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 22px;
        }
        .reg-header h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            color: var(--vrv-text-main);
        }
        .reg-header p {
            margin: 4px 0 0;
            color: var(--vrv-text-muted);
            font-size: 13px;
        }

        /* Filtri */
        .reg-filtri {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        /* I select del tema tendono a espandersi al 100% e spaccare la riga:
           li riporto a larghezza naturale così frecce e menu restano in fila */
        .reg-filtri select {
            width: auto !important;
            min-width: 130px;
            max-width: 180px;
            flex: 0 0 auto;
            margin: 0 !important;
        }
        .reg-filtri select,
        .reg-filtri button {
            padding: 9px 14px;
            border: 1px solid var(--vrv-border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: var(--vrv-bg-card);
            color: var(--vrv-text-main);
            cursor: pointer;
        }
        .reg-filtri select:focus { outline: none; border-color: var(--vrv-info); }
        .reg-btn-nav {
            background: var(--vrv-bg-card);
            color: var(--vrv-text-body);
            font-weight: 600;
            transition: all 0.2s;
        }
        .reg-btn-nav:hover { background: var(--vrv-bg-card-alt); }
        /* Frecce navigazione mese (‹ ›) → pulsanti quadrati con icona chevron,
           dimensione fissa così non si "rompono" nel flex dei filtri */
        .reg-btn-nav-arrow {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            padding: 0 !important;
            flex: 0 0 auto;
            color: var(--vrv-text-body);
        }
        .reg-btn-nav-arrow svg { display: block; }
        .reg-btn-nav-arrow:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-accent); }
        .reg-btn-export {
            background: var(--vrv-info) !important;
            color: var(--vrv-bg-card) !important;
            border-color: var(--vrv-info) !important;
            font-weight: 600;
        }
        .reg-btn-export:hover { background: var(--vrv-info-dark) !important; }

        /* KPI riepilogo mese */
        .reg-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            margin-bottom: 22px;
        }
        .reg-kpi {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 10px;
            padding: 14px 16px;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .reg-kpi-label {
            font-size: 11px;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .reg-kpi-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--vrv-text-main);
            line-height: 1.1;
        }
        .reg-kpi-sub {
            font-size: 11px;
            color: var(--vrv-text-muted);
            margin-top: 4px;
        }
        .reg-kpi.ferie    { border-top: 3px solid var(--vrv-info); }
        .reg-kpi.permesso { border-top: 3px solid #7c3aed; }
        .reg-kpi.malattia { border-top: 3px solid #f04438; }
        .reg-kpi.congedo  { border-top: 3px solid #f79009; }
        .reg-kpi.altro    { border-top: 3px solid var(--vrv-text-muted); }

        /* Tabella registro */
        .reg-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .reg-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .reg-table thead th {
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
            font-weight: 600;
            text-align: left;
            padding: 12px 14px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .reg-table tbody td {
            padding: 11px 14px;
            border-bottom: 1px solid var(--vrv-bg-hover);
            vertical-align: middle;
        }
        .reg-table tbody tr.weekend {
            background: #fafbfc;
            color: var(--vrv-text-faint);
        }
        .reg-table tbody tr.festivita {
            background: var(--vrv-bg-warning-light);
        }
        .reg-table tbody tr.giustificato {
            background: var(--vrv-accent-soft);
        }
        .reg-table tbody tr.oggi {
            background: var(--vrv-success-bg);
            font-weight: 600;
        }

        .reg-data-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .reg-data-num {
            font-size: 16px;
            font-weight: 700;
            color: var(--vrv-text-main);
            min-width: 28px;
        }
        .reg-data-dow {
            font-size: 12px;
            color: var(--vrv-text-muted);
            text-transform: capitalize;
        }
        .weekend .reg-data-num,
        .weekend .reg-data-dow { color: var(--vrv-text-faint); }

        /* Badge tipologia */
        .reg-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .reg-tag.ferie    { background: var(--vrv-bg-info); color: var(--vrv-accent); }
        .reg-tag.permesso { background: #f4f3ff; color: #5925dc; }
        .reg-tag.malattia { background: var(--vrv-danger-bg); color: var(--vrv-danger); }
        .reg-tag.congedo  { background: var(--vrv-bg-warning-bright); color: var(--vrv-warning-strong); }
        .reg-tag.altro    { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }
        .reg-tag.in_attesa { opacity: 0.65; font-style: italic; }
        .reg-tag.weekend  { background: var(--vrv-bg-hover); color: var(--vrv-text-faint); }
        .reg-tag.festivita { background: var(--vrv-bg-warning-bright); color: var(--vrv-warning-strong); }

        /* Bottoni richiesta */
        .reg-btn-richiedi {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 12px;
            border: 1px solid var(--vrv-info);
            background: var(--vrv-bg-card);
            color: var(--vrv-info);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s;
        }
        .reg-btn-richiedi:hover { background: var(--vrv-info); color: var(--vrv-bg-card); }

        /* Mobile */
        @media (max-width: 768px) {
            .reg-table thead { display: none; }
            .reg-table tbody td { display: block; padding: 4px 0; border: none; }
            .reg-table tbody tr {
                display: block;
                background: var(--vrv-bg-card);
                border: 1px solid var(--vrv-border-lighter);
                border-radius: 10px;
                padding: 12px;
                margin-bottom: 8px;
            }
        }

        /* Print layout dedicato per export PDF */
        @media print {
            body * { visibility: hidden; }
            #reg-print-area, #reg-print-area * { visibility: visible; }
            #reg-print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 20px;
            }
            .reg-filtri, .reg-btn-richiedi, .no-print { display: none !important; }
            .reg-kpi { break-inside: avoid; }
            .reg-table { font-size: 11px; }
            .reg-table thead { display: table-header-group; }
        }

/* ============================================================================
 * 24. MODULO FERIE & PERMESSI — Form richieste, lista, admin, calendario
 * Estratto da erp_giust_print_styles() del modulo ferie-permessi.
 * Prefissi: .giust-*
 * ============================================================================ */

        .gj-wrap {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--vrv-text-main);
            box-sizing: border-box;
        }
        .gj-wrap * { box-sizing: border-box; }

        .gj-card {
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 22px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(16,24,40,0.04);
        }
        .gj-card h3 {
            margin: 0 0 16px;
            font-size: 17px;
            font-weight: 700;
            color: var(--vrv-text-main);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
        }

        /* Selettore tipo richiesta (card cliccabili) */
        .gj-tipo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 22px;
        }
        .gj-tipo-card {
            border: 2px solid var(--vrv-border-lighter);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            background: var(--vrv-bg-card);
        }
        .gj-tipo-card:hover {
            border-color: var(--vrv-border);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(16,24,40,0.08);
        }
        .gj-tipo-card.selected {
            border-color: var(--vrv-info);
            background: var(--vrv-bg-info);
            box-shadow: 0 0 0 4px rgba(3,169,244,0.1);
        }
        .gj-tipo-icona {
            font-size: 32px;
            display: block;
            margin-bottom: 6px;
        }
        .gj-tipo-label {
            font-weight: 700;
            font-size: 14px;
            color: var(--vrv-text-main);
            margin-bottom: 4px;
        }
        .gj-tipo-desc {
            font-size: 11px;
            color: var(--vrv-text-muted);
            line-height: 1.3;
        }

        /* Form fields */
        .gj-form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            margin-bottom: 16px;
        }
        .gj-field label {
            display: block;
            font-size: 12px;
            color: var(--vrv-text-body);
            font-weight: 600;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .gj-field input,
        .gj-field select,
        .gj-field textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--vrv-border);
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            color: var(--vrv-text-main);
            background: var(--vrv-bg-card);
            transition: border-color 0.2s;
        }
        .gj-field input:focus,
        .gj-field select:focus,
        .gj-field textarea:focus {
            outline: none;
            border-color: var(--vrv-info);
            box-shadow: 0 0 0 3px rgba(3,169,244,0.1);
        }
        .gj-field textarea { min-height: 80px; resize: vertical; }

        /* Box riepilogo durata */
        .gj-riepilogo {
            background: var(--vrv-bg-card-alt);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
            padding: 14px 16px;
            margin: 14px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .gj-riepilogo-label {
            font-size: 12px;
            color: var(--vrv-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .gj-riepilogo-value {
            font-size: 22px;
            font-weight: 700;
            color: var(--vrv-text-main);
        }
        .gj-riepilogo-value.warn { color: var(--vrv-warning-strong); }
        .gj-riepilogo-value.ok   { color: var(--vrv-success); }

        /* Avvisi (scoperto / sovrapposizione) */
        .gj-alert {
            border-radius: 8px;
            padding: 12px 14px;
            margin: 14px 0;
            font-size: 13px;
            line-height: 1.5;
            border: 1px solid;
        }
        .gj-alert-warn {
            background: var(--vrv-bg-warning-light);
            color: #93370d;
            border-color: #fedf89;
        }
        .gj-alert-info {
            background: var(--vrv-bg-info);
            color: var(--vrv-accent);
            border-color: #b2ddff;
        }
        .gj-alert-success {
            background: var(--vrv-success-bg);
            color: var(--vrv-success);
            border-color: #abefc6;
        }
        .gj-alert-error {
            background: var(--vrv-danger-bg);
            color: var(--vrv-danger);
            border-color: #fecdca;
        }
        .gj-alert strong { display: block; margin-bottom: 4px; font-weight: 700; }
        .gj-alert ul { margin: 6px 0 0 0; padding-left: 20px; }
        .gj-alert li { margin-bottom: 3px; }

        /* Bottoni */
        .gj-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--vrv-border);
            background: var(--vrv-bg-card);
            color: var(--vrv-text-body);
            text-decoration: none;
            transition: all 0.2s;
        }
        .gj-btn:hover { background: var(--vrv-bg-card-alt); }
        .gj-btn.primary { background: var(--vrv-info); color: var(--vrv-bg-card); border-color: var(--vrv-info); }
        .gj-btn.primary:hover { background: var(--vrv-info-dark); }
        .gj-btn.danger { background: var(--vrv-bg-card); color: var(--vrv-danger); border-color: #fecdca; }
        .gj-btn.danger:hover { background: var(--vrv-danger-bg); }
        .gj-btn.small { padding: 6px 12px; font-size: 12px; }
        .gj-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Badge stato + tipo */
        .gj-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        .gj-badge.gray   { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }
        .gj-badge.blue   { background: var(--vrv-bg-info); color: var(--vrv-accent); }
        .gj-badge.green  { background: var(--vrv-success-bg); color: var(--vrv-success); }
        .gj-badge.orange { background: var(--vrv-bg-warning-bright); color: var(--vrv-warning-strong); }
        .gj-badge.red    { background: var(--vrv-danger-bg); color: var(--vrv-danger); }
        .gj-badge.purple { background: #f4f3ff; color: #5925dc; }

        /* Tabella richieste personali */
        .gj-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .gj-table thead th {
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
            font-weight: 600;
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .gj-table tbody td {
            padding: 12px;
            border-bottom: 1px solid var(--vrv-bg-hover);
            vertical-align: middle;
        }
        .gj-table tbody tr:hover { background: var(--vrv-bg-card-alt); }
        .gj-table tbody tr.stato-annullato,
        .gj-table tbody tr.stato-rifiutato {
            opacity: 0.6;
        }

        /* Toast */
        .gj-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: var(--vrv-text-main);
            color: var(--vrv-bg-card);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(16,24,40,0.3);
            z-index: 10000;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
        }
        .gj-toast.show { opacity: 1; transform: translateY(0); }
        .gj-toast.error { background: var(--vrv-danger); }
        .gj-toast.success { background: var(--vrv-success); }

        /* Mobile */
        @media (max-width: 768px) {
            .gj-tipo-grid { grid-template-columns: repeat(2, 1fr); }
            .gj-table thead { display: none; }
            .gj-table tbody td {
                display: block;
                padding: 6px 0;
                border: none;
            }
            .gj-table tbody tr {
                display: block;
                background: var(--vrv-bg-card);
                border: 1px solid var(--vrv-border-lighter);
                border-radius: 10px;
                padding: 14px;
                margin-bottom: 12px;
            }
        }

/* ============================================================================
 * 25. MODULO DOCUMENTI HR — Timeline retribuzioni mensili
 * Vista stile "Dipendenti in Cloud": griglia 12 mesi con buste + netto totale.
 * Prefissi: .dochr-timeline-*, .dochr-tl-*
 * ============================================================================ */

.dochr-timeline-wrap {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius-lg);
    box-shadow: var(--vrv-shadow-sm);
    padding: 18px;
    margin-bottom: 20px;
    overflow: hidden;
}
.dochr-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.dochr-timeline-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--vrv-text-main);
}
.dochr-timeline-sub {
    font-size: 13px;
    color: var(--vrv-text-muted);
}
.dochr-timeline-sub strong { color: var(--vrv-success); }
.dochr-timeline-anno {
    padding: 7px 10px;
    border: 1px solid var(--vrv-border);
    border-radius: var(--vrv-radius);
    background: var(--vrv-bg-card);
    color: var(--vrv-text-main);
    font-size: 13px;
    cursor: pointer;
}

/* Griglia 12 mesi — scroll orizzontale su mobile */
.dochr-timeline-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(78px, 1fr));
    gap: 0;
    border: 1px solid var(--vrv-border-soft);
    border-radius: var(--vrv-radius);
    overflow-x: auto;
}
.dochr-tl-col {
    padding: 14px 8px;
    text-align: center;
    border-right: 1px solid var(--vrv-border-soft);
    transition: background 0.15s;
    min-width: 78px;
}
.dochr-tl-col:last-child { border-right: none; }
.dochr-tl-col.has-data { background: var(--vrv-success-bg); }
.dochr-tl-col.is-current {
    box-shadow: inset 0 -3px 0 var(--vrv-accent);
}
.dochr-tl-col.is-current .dochr-tl-mese { color: var(--vrv-accent); font-weight: 700; }

.dochr-tl-mese {
    font-size: 13px;
    font-weight: 600;
    color: var(--vrv-text-body);
    margin-bottom: 14px;
    white-space: nowrap;
}
.dochr-tl-buste {
    font-size: 11px;
    color: var(--vrv-text-muted);
    margin-bottom: 2px;
}
.dochr-tl-col.has-data .dochr-tl-buste { color: var(--vrv-success); }
.dochr-tl-importo {
    font-size: 13px;
    font-weight: 700;
    color: var(--vrv-text-main);
    white-space: nowrap;
    min-height: 18px;
}
.dochr-tl-col.has-data .dochr-tl-importo { color: var(--vrv-success); }
.dochr-tl-noimporto { color: var(--vrv-text-faint); }

@media (max-width: 768px) {
    .dochr-timeline-grid { grid-template-columns: repeat(12, 80px); }
}

/* --- Fisarmonica per mese nell'archivio documenti HR --- */
.dochr-month-header {
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
    cursor: pointer;
    user-select: none;
    border-top: 2px solid var(--vrv-border-soft, var(--vrv-border-lighter));
    transition: background 0.12s;
}
.dochr-month-header:hover { background: var(--vrv-bg-hover, var(--vrv-bg-hover)); }
.dochr-month-header td { padding-top: 12px; padding-bottom: 12px; }
.dochr-month-caret {
    display: inline-block;
    width: 16px;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-size: 11px;
    margin-right: 6px;
    transition: transform 0.12s;
}
.dochr-month-count {
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-weight: 400;
    font-size: 13px;
    margin-left: 8px;
}
.dochr-month-tot { color: var(--vrv-success, var(--vrv-success)); font-size: 14px; }

/* ============================================================================
 * 26. MODULO REGISTRO ASSENZE — Box Saldo Ferie & Permessi (FASE 2)
 * Mostra residuo ufficiale (da busta) + richieste + disponibilità stimata.
 * Prefissi: .reg-saldo-*
 * ============================================================================ */

.reg-saldo-wrap {
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    border: 1px solid var(--vrv-border, var(--vrv-border-lighter));
    border-radius: var(--vrv-radius-lg, 14px);
    box-shadow: var(--vrv-shadow-sm, 0 1px 3px rgba(16,24,40,0.1));
    padding: 20px;
    margin-bottom: 20px;
}
.reg-saldo-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.reg-saldo-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--vrv-text-main, var(--vrv-text-main));
}
.reg-saldo-fonte {
    font-size: 13px;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
}

/* Le due card principali */
.reg-saldo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.reg-saldo-card {
    border: 1px solid var(--vrv-border-soft, var(--vrv-border-lighter));
    border-radius: 12px;
    padding: 16px;
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
}
.reg-saldo-card.ferie    { border-top: 3px solid var(--vrv-info); }
.reg-saldo-card.permessi { border-top: 3px solid #7c3aed; }
.reg-saldo-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.reg-saldo-card-icon { font-size: 20px; }
.reg-saldo-card-nome {
    font-weight: 700;
    font-size: 15px;
    color: var(--vrv-text-body, var(--vrv-text-body));
}
.reg-saldo-disp {
    font-size: 26px;
    font-weight: 800;
    color: var(--vrv-success, var(--vrv-success));
    line-height: 1.1;
    margin-bottom: 12px;
}
.reg-saldo-disp.neg { color: var(--vrv-danger, #d92d20); }
.reg-saldo-disp-lbl {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.reg-saldo-dettaglio {
    border-top: 1px dashed var(--vrv-border-soft, var(--vrv-border-lighter));
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reg-saldo-riga {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--vrv-text-body, var(--vrv-text-strong));
}
.reg-saldo-riga.sottrai strong { color: var(--vrv-danger, #d92d20); }
.reg-saldo-riga.attesa { color: var(--vrv-warning, var(--vrv-warning)); }

/* Empty state */
.reg-saldo-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
    border: 1px dashed var(--vrv-border, var(--vrv-border));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.reg-saldo-empty-icon { font-size: 32px; }
.reg-saldo-empty strong { color: var(--vrv-text-main, var(--vrv-text-main)); }
.reg-saldo-empty p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
}

/* Dettagli espandibili */
.reg-saldo-monte, .reg-saldo-richieste {
    margin-top: 12px;
    border: 1px solid var(--vrv-border-soft, var(--vrv-border-lighter));
    border-radius: 10px;
    overflow: hidden;
}
.reg-saldo-monte summary, .reg-saldo-richieste summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--vrv-text-body, var(--vrv-text-body));
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
    user-select: none;
}
.reg-saldo-monte summary:hover, .reg-saldo-richieste summary:hover {
    background: var(--vrv-bg-hover, var(--vrv-bg-hover));
}
.reg-saldo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.reg-saldo-table th {
    text-align: left;
    padding: 10px 16px;
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-weight: 600;
    border-top: 1px solid var(--vrv-border-soft, var(--vrv-border-lighter));
}
.reg-saldo-table td {
    padding: 10px 16px;
    border-top: 1px solid var(--vrv-border-soft, var(--vrv-border-lighter));
    color: var(--vrv-text-body, var(--vrv-text-strong));
}
.reg-saldo-table th:not(:first-child),
.reg-saldo-table td:not(:first-child) { text-align: center; }

.reg-saldo-nota {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--vrv-bg-subtle, var(--vrv-bg-card-alt));
    border-radius: 8px;
}

@media (max-width: 600px) {
    .reg-saldo-cards { grid-template-columns: 1fr; }
}

/* ============================================================================
 * 27. MODULO REPORT ORE  (.erp-report-*)
 * Sezione front-end report attività: filtri, KPI, tabella, toggle AOT,
 * menù commessa per riga. Usa i design token --vrv-*.
 * ============================================================================ */

.erp-report-wrap { font-family: var(--vrv-font-sans); color: var(--vrv-text-body, var(--vrv-text-body)); }

/* — Barra filtri — */
.erp-report-filtri {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    border: 1px solid var(--vrv-border, var(--vrv-border));
    border-radius: var(--vrv-radius, 6px);
    box-shadow: var(--vrv-shadow-sm, 0 1px 2px rgba(16,24,40,0.04));
    padding: 14px 16px;
}
/* Forza i controlli in fila: il tema mette i select a 100%, qui li riportiamo a misura */
.erp-report-filtri > select,
.erp-report-filtri > input,
.erp-report-filtri .erp-report-select {
    width: auto !important;
    flex: 0 1 auto;
    display: inline-block !important;
    margin: 0 !important;
    box-sizing: border-box;
    max-width: 220px;
}
.erp-report-filtri input[type="date"].erp-report-select { max-width: 160px; }
.erp-report-filtri-label {
    font-weight: 700;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.erp-report-select {
    border: 1px solid var(--vrv-border, var(--vrv-border));
    border-radius: var(--vrv-radius, 6px);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--vrv-text-body, var(--vrv-text-body));
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    min-width: 130px;
    width: auto;
}
.erp-report-select:focus {
    outline: none;
    border-color: var(--vrv-accent, var(--vrv-accent));
    box-shadow: 0 0 0 3px var(--vrv-accent-soft, var(--vrv-accent-soft));
}
.erp-report-clear {
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.erp-report-clear:hover { color: var(--vrv-accent, var(--vrv-accent)); }
.erp-report-export {
    margin-left: auto !important;
    border: 1px solid var(--vrv-accent, var(--vrv-accent));
    color: var(--vrv-accent, var(--vrv-accent));
    font-weight: 600;
    border-radius: var(--vrv-radius, 6px);
    padding: 8px 10px;
    font-size: 13px;
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    width: auto !important;
    max-width: 160px;
    flex: 0 0 auto;
}

/* — Riga KPI — */
.erp-report-kpis {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.erp-report-kpi {
    flex: 1;
    min-width: 160px;
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    padding: 20px 15px;
    border-radius: var(--vrv-radius-lg, 10px);
    box-shadow: var(--vrv-shadow, 0 1px 3px rgba(16,24,40,0.06));
    text-align: center;
    border-top: 3px solid var(--vrv-accent, var(--vrv-accent));
}
.erp-report-kpi h3 {
    margin: 0 0 10px 0;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.erp-report-kpi p {
    margin: 0;
    color: var(--vrv-text-main, var(--vrv-text-main));
    font-size: 24px;
    font-weight: 700;
}
.erp-report-kpi.is-success { border-top-color: var(--vrv-success, var(--vrv-success)); }
.erp-report-kpi.is-success p { color: var(--vrv-success, var(--vrv-success)); }
.erp-report-kpi.is-warning { border-top-color: var(--vrv-warning, var(--vrv-warning)); }
.erp-report-kpi.is-warning p { color: var(--vrv-warning, var(--vrv-warning)); }
.erp-report-kpi.is-yellow  { border-top-color: var(--vrv-chart-yellow, var(--vrv-chart-yellow)); }
.erp-report-kpi.is-purple  { border-top-color: var(--vrv-purple, var(--vrv-purple)); }
.erp-report-kpi.is-purple p { color: var(--vrv-purple, var(--vrv-purple)); }

/* — Box tabella — */
.erp-report-tablebox {
    background: var(--vrv-bg-card, var(--vrv-bg-card));
    padding: 25px;
    border-radius: var(--vrv-radius-lg, 10px);
    box-shadow: var(--vrv-shadow, 0 1px 3px rgba(16,24,40,0.06));
    overflow-x: auto;
}
.erp-report-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}
.erp-report-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    background: var(--vrv-bg-card-alt, var(--vrv-bg-card-alt));
    border-bottom: 1px solid var(--vrv-border, var(--vrv-border));
    padding: 12px 10px;
}
.erp-report-table tbody td {
    vertical-align: top;
    border-bottom: 1px solid var(--vrv-border-soft, var(--vrv-border-soft));
    padding: 12px 10px;
}
.erp-report-table tbody tr:hover { background: var(--vrv-bg-card-alt, var(--vrv-bg-card-alt)); }

/* — Toggle AOT ($) — */
.erp-dollar-toggle {
    cursor: pointer;
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--vrv-radius-sm, 4px);
    font-size: 16px;
    font-weight: 600;
    transition: 0.2s;
    user-select: none;
}
.erp-dollar-toggle:hover { background: var(--vrv-bg-card-alt, var(--vrv-bg-hover)); }
.erp-dollar-toggle.status-billable { color: var(--vrv-success, var(--vrv-success)); }
.erp-dollar-toggle.status-non-billable { color: var(--vrv-border, var(--vrv-border)); }

/* — Menù a tendina commessa per riga — */
.erp-rc-select {
    border: 1px solid var(--vrv-border, var(--vrv-border));
    border-radius: var(--vrv-radius, 6px);
    padding: 4px 6px;
    font-size: 13px;
    color: var(--vrv-accent, var(--vrv-accent));
    font-weight: 500;
    max-width: 180px;
    cursor: pointer;
    background: var(--vrv-bg-card, var(--vrv-bg-card));
}
.erp-rc-select:focus {
    outline: none;
    border-color: var(--vrv-accent, var(--vrv-accent));
    box-shadow: 0 0 0 3px var(--vrv-accent-soft, var(--vrv-accent-soft));
}

/* — Badge tag, cella progetto statica, loader — */
.erp-report-wrap .tag-badge {
    background: var(--vrv-bg-card-alt, var(--vrv-bg-hover));
    color: var(--vrv-text-body, var(--vrv-text-body));
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}
.erp-report-prog-static { color: var(--vrv-accent, var(--vrv-accent)); font-weight: 500; }
.erp-report-loading {
    display: none;
    text-align: center;
    padding: 15px;
    color: var(--vrv-text-muted, var(--vrv-text-muted));
    font-size: 13px;
}

@media (max-width: 700px) {
    .erp-report-kpis { gap: 10px; }
    /* 2 card per riga: min-width calcolato per forzare il wrap a 2 colonne.
       (3 card da 120px + gap stavano in riga e le label lunghe uscivano) */
    .erp-report-kpi {
        flex: 1 1 calc(50% - 5px);
        min-width: calc(50% - 5px);
        padding: 14px 10px;
        box-sizing: border-box;
    }
    .erp-report-kpi p { font-size: 20px; }
    .erp-report-kpi h3 { font-size: 11px; }
}

/* — Celle tabella report (allineamenti e colori per colonna) — */
.erp-report-table td.is-nowrap { white-space: nowrap; }
.erp-report-table td.is-center { text-align: center; }
.erp-report-table .cell-data    { color: var(--vrv-text-muted, var(--vrv-text-muted)); white-space: nowrap; }
.erp-report-table .cell-titolo  { color: var(--vrv-text-main, var(--vrv-text-main)); display: block; }
.erp-report-table .cell-task    { color: var(--vrv-text-muted, var(--vrv-text-muted)); font-size: 12px; }
.erp-report-table .cell-cliente { color: var(--vrv-text-muted, var(--vrv-text-muted)); }
.erp-report-table .cell-utente  { color: var(--vrv-text-body, var(--vrv-text-body)); }
.erp-report-table .cell-orario  { color: var(--vrv-text-muted, var(--vrv-text-muted)); white-space: nowrap; }
.erp-report-table .cell-tempo   { font-weight: 600; color: var(--vrv-text-main, var(--vrv-text-main)); white-space: nowrap; }
.erp-report-table .cell-importo { font-weight: 600; color: var(--vrv-text-body, var(--vrv-text-body)); white-space: nowrap; }
.erp-report-table .erp-report-empty { text-align: center; padding: 20px; color: var(--vrv-text-muted, var(--vrv-text-muted)); }


/* ========================================================================
 * 28. YoY (Year-over-Year) — Card e filtri per confronto periodo (Social)
 *
 * Componenti specifici per le sezioni "Confronto periodo YoY". Le fisarmoniche
 * che li ospitano usano il componente Collapsible della sezione 18.
 * ======================================================================== */

.sm-yoy-section { margin-bottom: 18px; }
.sm-yoy-section:last-child { margin-bottom: 0; }
.sm-yoy-section h4 {
    color: var(--vrv-accent);
    margin: 0 0 10px 0;
    font-size: var(--vrv-text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Barra filtri */
.sm-yoy-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    margin-bottom: 14px; padding: 12px;
    background: var(--vrv-bg-card-alt);
    border: 1px solid var(--vrv-border-soft);
    border-radius: var(--vrv-radius);
}
.sm-yoy-bar label {
    display: flex; flex-direction: column;
    font-size: var(--vrv-text-xs); color: var(--vrv-text-body);
    gap: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.sm-yoy-bar select {
    background: var(--vrv-bg-card); color: var(--vrv-text-main);
    border: 1px solid var(--vrv-border); border-radius: var(--vrv-radius);
    padding: 7px 10px; font-size: var(--vrv-text-base); min-width: 140px;
}

/* Banner periodo */
.sm-yoy-periodo {
    margin-bottom: 12px; font-size: var(--vrv-text-base);
    color: var(--vrv-text-body); padding: 8px 12px;
    background: var(--vrv-bg-info);
    border-left: 3px solid var(--vrv-accent);
    border-radius: var(--vrv-radius-sm);
}
.sm-yoy-periodo:empty { display: none; }
.sm-yoy-periodo strong { color: var(--vrv-text-main); }

/* Card */
.sm-yoy-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.sm-yoy-card {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border-soft);
    border-radius: 8px; padding: 14px;
    box-shadow: var(--vrv-shadow-sm);
}
.sm-yoy-card-lbl {
    font-size: var(--vrv-text-xs); color: var(--vrv-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 6px; font-weight: 600;
}
.sm-yoy-card-val {
    font-size: var(--vrv-text-xl); font-weight: 700;
    color: var(--vrv-text-main); line-height: 1.1;
}
.sm-yoy-card-prev {
    font-size: var(--vrv-text-xs);
    color: var(--vrv-text-muted); margin-top: 4px;
}
.sm-yoy-card-delta {
    font-size: var(--vrv-text-base); font-weight: 700;
    margin-top: 6px; display: inline-block;
    padding: 2px 8px; border-radius: var(--vrv-radius-sm);
}
.sm-yoy-card-delta.up   { color: var(--vrv-success); background: var(--vrv-success-bg); }
.sm-yoy-card-delta.down { color: var(--vrv-danger);  background: var(--vrv-danger-bg); }
.sm-yoy-card-delta.zero { color: var(--vrv-text-muted); background: var(--vrv-bg-card-alt); }
.sm-yoy-card-delta.na   { color: var(--vrv-text-faint); background: var(--vrv-bg-card-alt); font-weight: 400; }

/* Empty state condiviso */
.sm-yoy-content .sm-empty,
.sm-coll-content .sm-empty,
.vrv-collapsible-content .sm-empty {
    color: var(--vrv-text-muted);
    padding: 24px; text-align: center;
    background: var(--vrv-bg-card-alt);
    border-radius: var(--vrv-radius);
    font-size: var(--vrv-text-base);
}

/* ============================================================================
 * 29. MODULO SCRITTURA — Editor unificato + Condivisione
 *
 * Stile MINIMALE e DIFENSIVO. Niente rosso, niente bordi colorati.
 * Tutti i button/link sono blindati con !important per neutralizzare gli stili
 * aggressivi del tema WordPress (bordi e hover rosa/magenta).
 *
 * Shortcode: [erp_scrittura_editor]
 * ============================================================================ */

/* ---------- RESET DIFENSIVO TOTALE ---------- */

/* Tutti gli elementi interattivi: azzera bordi/ombre/outline ereditati dal tema */
.erp-writer-app button,
.erp-writer-app a,
.erp-writer-app input,
.erp-writer-app select,
.erp-writer-app textarea {
	font-family: inherit;
	box-shadow: none;
}
.erp-writer-app button,
.erp-writer-app a {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	background-image: none !important;
}
/* Neutralizza QUALSIASI colore/hover rosso del tema sui link-button del modulo */
.erp-writer-app a,
.erp-writer-app a:hover,
.erp-writer-app a:focus,
.erp-writer-app button:hover,
.erp-writer-app button:focus {
	color: inherit;
}
/* Focus accessibile ma neutro */
.erp-writer-app button:focus-visible,
.erp-writer-app input:focus-visible,
.erp-writer-app select:focus-visible,
.erp-writer-app textarea:focus-visible {
	outline: 2px solid var(--vrv-border) !important;
	outline-offset: 1px;
}
/* Rimuovi il focus ring di default sugli input testuali, sostituito da bordo */
.erp-writer-app input:focus,
.erp-writer-app select:focus,
.erp-writer-app textarea:focus {
	border-color: var(--vrv-text-faint) !important;
	box-shadow: none !important;
}

/* ---------- WRAPPER ---------- */

.erp-writer-app {
	display: flex;
	gap: 16px;
	width: 100%;
	min-height: 600px;
	box-sizing: border-box;
	align-items: stretch;
	position: relative;
	color: var(--vrv-text-body);
}
.erp-writer-app * { box-sizing: border-box; }

/* ---------- SIDEBAR ARCHIVIO ---------- */

.erp-writer-sidebar {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	background: var(--vrv-bg-card);
	border-radius: 10px;
	overflow: hidden;
}

.erp-writer-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 10px;
}
.erp-writer-sidebar-head h3 {
	margin: 0;
	font-size: var(--vrv-text-md);
	font-weight: 700;
	color: var(--vrv-text-main);
	letter-spacing: -0.01em;
}
.erp-writer-sidebar-head [data-new-doc] { font-size: var(--vrv-text-sm); padding: 6px 12px; }

.erp-writer-filters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 16px 10px;
}
.erp-writer-filter-row { display: flex; gap: 6px; }
.erp-writer-filter-row-2 > * { flex: 1 1 0; min-width: 0; }
.erp-writer-filters input,
.erp-writer-filters select {
	width: 100%;
	border: 1px solid var(--vrv-border-faint) !important;
	border-radius: 6px;
	padding: 7px 10px;
	font-size: var(--vrv-text-base);
	background: var(--vrv-bg-card);
	color: var(--vrv-text-main);
}
.erp-writer-filters input::placeholder { color: var(--vrv-text-faint); }

.erp-writer-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 600px;
}
.erp-writer-empty {
	padding: 22px 16px;
	text-align: center;
	color: var(--vrv-text-faint);
	font-size: var(--vrv-text-base);
}

/* List item: padding uniforme, testo a sinistra, nessun bordo card */
.erp-writer-list-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	text-align: left !important;
	background: transparent !important;
	padding: 11px 16px !important;
	cursor: pointer;
	transition: background 0.12s ease;
	border-radius: 0 !important;
	color: var(--vrv-text-main) !important;
	font: inherit;
	text-indent: 0 !important;
}
.erp-writer-list-item + .erp-writer-list-item { border-top: 1px solid var(--vrv-border-faint); }
.erp-writer-list-item:hover { background: var(--vrv-bg-card-alt) !important; }
.erp-writer-list-item.is-active {
	background: var(--vrv-bg-hover) !important;
	box-shadow: inset 3px 0 0 var(--vrv-text-main);
}
.erp-writer-list-title {
	display: block;
	font-size: var(--vrv-text-md);
	font-weight: 600;
	color: var(--vrv-text-main);
	line-height: 1.35;
	margin: 0 0 3px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.erp-writer-list-meta {
	display: block;
	font-size: var(--vrv-text-xs);
	font-weight: 500;
	color: var(--vrv-text-muted);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.erp-wshare-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 10px;
	background: var(--vrv-accent-soft);
	color: var(--vrv-accent);
	vertical-align: middle;
}
.erp-wshare-badge.shared-with-me { background: var(--vrv-success-bg); color: var(--vrv-success); }

/* ---------- MAIN EDITOR ---------- */

.erp-writer-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--vrv-bg-card);
	border-radius: 10px;
	padding: 18px 20px;
}

.erp-writer-main-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: -4px;
	min-height: 20px;
}

.erp-writer-status {
	font-size: var(--vrv-text-sm);
	color: var(--vrv-text-faint);
	font-weight: 500;
	margin-left: auto;
}
.erp-writer-status.is-dirty  { color: var(--vrv-warning); }
.erp-writer-status.is-saving { color: var(--vrv-text-strong); }
.erp-writer-status.is-saved  { color: var(--vrv-success); }
.erp-writer-status.is-error  { color: var(--vrv-danger); }

.erp-wshare-readonly-banner {
	display: none;
	margin: 0;
	padding: 10px 14px;
	background: var(--vrv-bg-warning-light);
	color: var(--vrv-warning);
	font-size: var(--vrv-text-base);
	font-weight: 500;
	border-radius: 6px;
}
.erp-writer-app[data-readonly="1"] [data-readonly-banner] { display: block; }
.erp-writer-app[data-readonly="1"] [data-save],
.erp-writer-app[data-readonly="1"] [data-delete],
.erp-writer-app[data-readonly="1"] [data-share] { display: none !important; }
.erp-writer-app[data-readonly="1"] [data-title],
.erp-writer-app[data-readonly="1"] [data-type],
.erp-writer-app[data-readonly="1"] [data-client],
.erp-writer-app[data-readonly="1"] [data-tags] { pointer-events: none; opacity: 0.75; }

.erp-writer-title {
	width: 100%;
	background: transparent !important;
	padding: 2px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--vrv-text-main);
	letter-spacing: -0.02em;
	border: 0 !important;
}
.erp-writer-title::placeholder { color: var(--vrv-text-faint); font-weight: 600; }

.erp-writer-meta {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
.erp-writer-field { margin: 0; }
.erp-writer-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--vrv-text-muted);
}
.erp-writer-field input,
.erp-writer-field select {
	width: 100%;
	border: 1px solid var(--vrv-border-faint) !important;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: var(--vrv-text-base);
	background: var(--vrv-bg-card);
	color: var(--vrv-text-main);
}

/* ---------- EDITOR LEGGERO (contenteditable + toolbar) ---------- */

.erp-writer-editor-wrap {
	border: 1px solid var(--vrv-border-faint);
	border-radius: 8px;
	overflow: hidden;
	background: var(--vrv-bg-card);
}

.erp-writer-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	background: var(--vrv-bg-card-alt);
	border-bottom: 1px solid var(--vrv-border-faint);
}
.erp-writer-tb-format {
	border: 1px solid var(--vrv-border-faint) !important;
	border-radius: 6px;
	padding: 5px 8px;
	font-size: var(--vrv-text-sm);
	background: var(--vrv-bg-card);
	color: var(--vrv-text-main);
	margin-right: 4px;
	cursor: pointer;
}
.erp-writer-tb-sep {
	width: 1px;
	height: 20px;
	background: var(--vrv-border-faint);
	margin: 0 4px;
}
.erp-writer-tb-btn {
	min-width: 30px;
	height: 30px;
	padding: 0 7px;
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	color: var(--vrv-text-body) !important;
	font-size: var(--vrv-text-md);
	line-height: 1;
	cursor: pointer;
	transition: background 0.1s ease, color 0.1s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.erp-writer-tb-btn:hover {
	background: var(--vrv-bg-hover) !important;
	color: var(--vrv-text-main) !important;
}
.erp-writer-tb-btn.is-active {
	background: var(--vrv-accent-soft) !important;
	color: var(--vrv-accent) !important;
}

.erp-writer-editor {
	min-height: 420px;
	max-height: 65vh;
	overflow-y: auto;
	padding: 16px 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--vrv-text-main);
	background: var(--vrv-bg-card);
	outline: 0;
}
.erp-writer-editor:empty::before {
	content: attr(data-placeholder);
	color: var(--vrv-text-faint);
}
.erp-writer-editor:focus { outline: 0; }
.erp-writer-editor p { margin: 0 0 12px; }
.erp-writer-editor h2 { font-size: 22px; font-weight: 700; margin: 20px 0 10px; line-height: 1.25; }
.erp-writer-editor h3 { font-size: 18px; font-weight: 700; margin: 18px 0 8px; line-height: 1.3; }
.erp-writer-editor h4 { font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
.erp-writer-editor ul,
.erp-writer-editor ol { margin: 0 0 12px; padding-left: 26px; }
.erp-writer-editor li { margin-bottom: 4px; }
.erp-writer-editor blockquote {
	margin: 14px 0;
	padding: 8px 16px;
	border-left: 3px solid var(--vrv-border);
	color: var(--vrv-text-body);
	background: var(--vrv-bg-card-alt);
	border-radius: 0 6px 6px 0;
}
.erp-writer-editor a { color: var(--vrv-accent); text-decoration: underline; }

.erp-writer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
	padding-top: 6px;
}
.erp-writer-actions [data-save] { margin-left: auto; }
.erp-writer-actions [data-share] { margin-left: 6px; }

/* ---------- BOTTONI (minimal, blindati) ---------- */

.erp-writer-btn {
	border: 0 !important;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: var(--vrv-text-base);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
	background: transparent;
	color: var(--vrv-text-body);
}

/* Primary (Salva, +Nuovo) */
.erp-writer-btn-dark,
.erp-writer-btn-dark:hover,
.erp-writer-btn-dark:focus {
	background: var(--vrv-text-main) !important;
	color: var(--vrv-bg-card) !important;
}
.erp-writer-btn-dark:hover { background: var(--vrv-text-body) !important; }

/* Secondary (Importa, HTML, TXT, PDF, Copia) */
.erp-writer-btn-light {
	background: transparent !important;
	color: var(--vrv-text-body) !important;
}
.erp-writer-btn-light:hover {
	background: var(--vrv-bg-card-alt) !important;
	color: var(--vrv-text-main) !important;
}

/* Danger (Elimina) — neutro, rosso solo on-hover */
.erp-writer-btn-danger {
	background: transparent !important;
	color: var(--vrv-text-muted) !important;
}
.erp-writer-btn-danger:hover {
	background: var(--vrv-danger-bg) !important;
	color: var(--vrv-danger) !important;
}

/* Share */
.erp-writer-btn-share {
	background: var(--vrv-accent) !important;
	color: var(--vrv-bg-card) !important;
}
.erp-writer-btn-share:hover { background: var(--vrv-accent-hover) !important; }

.erp-writer-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- BACKUP BOX ---------- */

.erp-writer-backup {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--vrv-bg-warning-light);
	border-radius: 6px;
	color: var(--vrv-text-main);
	font-size: var(--vrv-text-base);
}
.erp-writer-backup span { display: block; margin-top: 2px; color: var(--vrv-text-strong); }
.erp-writer-backup-actions { display: flex; gap: 6px; flex-shrink: 0; }
.erp-writer-backup-actions button {
	background: var(--vrv-bg-card) !important;
	color: var(--vrv-text-main) !important;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: var(--vrv-text-sm);
	font-weight: 600;
	cursor: pointer;
}
.erp-writer-backup-actions button:hover { background: var(--vrv-bg-card-alt) !important; }

.erp-writer-alert {
	padding: 14px;
	border-radius: 8px;
	background: var(--vrv-bg-warning-light);
	color: var(--vrv-text-main);
	font-size: var(--vrv-text-base);
}

/* ---------- MODALE CONDIVISIONE ---------- */

.erp-wshare-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(16,24,40,0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.erp-wshare-modal-overlay.is-open { display: flex; }
.erp-wshare-modal {
	background: var(--vrv-bg-card);
	border-radius: 12px;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--vrv-shadow-lg);
}
.erp-wshare-modal-header {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.erp-wshare-modal-header h3 {
	margin: 0;
	font-size: var(--vrv-text-lg);
	font-weight: 700;
	color: var(--vrv-text-main);
}
.erp-wshare-modal-header .close-btn {
	background: transparent !important;
	color: var(--vrv-text-muted) !important;
	font-size: 22px;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 6px;
	line-height: 1;
}
.erp-wshare-modal-header .close-btn:hover { background: var(--vrv-bg-card-alt) !important; color: var(--vrv-text-main) !important; }
.erp-wshare-modal-body { padding: 4px 20px 16px; overflow-y: auto; flex: 1; }
.erp-wshare-search-row { position: relative; margin-bottom: 12px; }
.erp-wshare-search-row input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--vrv-border-faint) !important;
	border-radius: 6px;
	font-size: var(--vrv-text-md);
	background: var(--vrv-bg-card);
}
.erp-wshare-suggestions {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	max-height: 240px;
	overflow-y: auto;
	background: var(--vrv-bg-card);
	border: 1px solid var(--vrv-border-faint);
	border-radius: 8px;
	box-shadow: var(--vrv-shadow);
	z-index: 10;
}
.erp-wshare-suggestions.is-open { display: block; }
.erp-wshare-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
}
.erp-wshare-suggestion + .erp-wshare-suggestion { border-top: 1px solid var(--vrv-border-faint); }
.erp-wshare-suggestion:hover { background: var(--vrv-bg-card-alt); }
.erp-wshare-suggestion.is-empty { cursor: default; color: var(--vrv-text-muted); }
.erp-wshare-suggestion img { width: 32px; height: 32px; border-radius: 50%; }
.erp-wshare-suggestion .name { font-weight: 600; color: var(--vrv-text-main); font-size: var(--vrv-text-md); }
.erp-wshare-suggestion .email { font-size: var(--vrv-text-sm); color: var(--vrv-text-muted); }
.erp-wshare-list-empty {
	padding: 14px;
	text-align: center;
	color: var(--vrv-text-muted);
	font-size: var(--vrv-text-md);
	background: var(--vrv-bg-card-alt);
	border-radius: 6px;
}
.erp-wshare-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}
.erp-wshare-row + .erp-wshare-row { border-top: 1px solid var(--vrv-border-faint); }
.erp-wshare-row img { width: 36px; height: 36px; border-radius: 50%; }
.erp-wshare-row .info { flex: 1; min-width: 0; }
.erp-wshare-row .info .name { font-weight: 600; color: var(--vrv-text-main); font-size: var(--vrv-text-md); }
.erp-wshare-row .info .email { font-size: var(--vrv-text-sm); color: var(--vrv-text-muted); }
.erp-wshare-row select {
	padding: 5px 8px;
	border: 1px solid var(--vrv-border-faint) !important;
	border-radius: 6px;
	font-size: var(--vrv-text-base);
	background: var(--vrv-bg-card);
}
.erp-wshare-row .remove-btn {
	background: transparent !important;
	color: var(--vrv-text-muted) !important;
	cursor: pointer;
	font-size: 18px;
	padding: 4px 10px;
	border-radius: 6px;
}
.erp-wshare-row .remove-btn:hover { background: var(--vrv-danger-bg) !important; color: var(--vrv-danger) !important; }
.erp-wshare-modal-footer {
	padding: 12px 20px 16px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.erp-wshare-modal-footer button {
	padding: 8px 16px;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	font-size: var(--vrv-text-md);
	font-weight: 600;
	color: var(--vrv-text-body);
}
.erp-wshare-modal-footer button:hover { background: var(--vrv-bg-card-alt); }
.erp-wshare-modal-footer button.primary,
.erp-wshare-modal-footer button.primary:hover {
	background: var(--vrv-text-main) !important;
	color: var(--vrv-bg-card) !important;
}
.erp-wshare-modal-footer button.primary:hover { background: var(--vrv-text-body) !important; }

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
	.erp-writer-app { flex-direction: column; gap: 10px; }
	.erp-writer-sidebar { flex: 0 0 auto; width: 100%; }
	.erp-writer-list { max-height: 40vh; }
	.erp-writer-main { width: 100%; }
	.erp-writer-meta { grid-template-columns: 1fr; gap: 8px; }
	.erp-writer-title { font-size: 22px; }
	/* Sidebar e editor restano entrambi visibili in colonna:
	   l'archivio è sempre raggiungibile scrollando, niente pulsante "indietro". */
}

/* ============================================================================
 * 30. MODULO CHAT — Interfaccia chat interna
 *
 * Chat ERP: sidebar (canali + DM), area messaggi, input, modali, reazioni,
 * presenza, ricerca. Più badge non-letti nel menu e fix scroll desktop/mobile.
 *
 * Shortcode: [erp_chat_interface]
 * Colori convertiti ai token --vrv-*. I residui sono accenti specifici chat.
 * ============================================================================ */

/* --- Reset difensivo: neutralizza il rosa #c36 del TEMA (Sage/normalize) ---
   Il tema definisce:  button,[type=button],[type=submit]{border:1px solid #c36;color:#c36}
                       button:hover{background:#c36;color:#fff}
                       a{color:#c36}
   Qui vinciamo a parità di specificità usando gli stessi selettori [type] + !important
   e l'ordine di caricamento (questo CSS è caricato dopo il tema). --- */

/* Tutti i button della chat, qualunque sia il loro type */
.erp-chat-wrapper button,
.erp-chat-wrapper [type=button],
.erp-chat-wrapper [type=submit],
.erp-chat-modal-overlay button,
.erp-chat-modal-overlay [type=button],
.erp-chat-members-modal button,
#sezione-chat button,
#sezione-chat [type=button],
#sezione-chat [type=submit] {
	outline: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	border-color: var(--vrv-border) !important;
}

/* Hover/focus/active: MAI rosa, mai background pieno indesiderato */
.erp-chat-wrapper button:hover,
.erp-chat-wrapper button:focus,
.erp-chat-wrapper button:active,
.erp-chat-wrapper [type=button]:hover,
.erp-chat-wrapper [type=button]:focus,
.erp-chat-wrapper [type=submit]:hover,
.erp-chat-wrapper [type=submit]:focus,
.erp-chat-modal-overlay button:hover,
.erp-chat-modal-overlay button:focus,
.erp-chat-members-modal button:hover,
.erp-chat-members-modal button:focus,
#sezione-chat button:hover,
#sezione-chat button:focus,
#sezione-chat button:active,
#sezione-chat [type=button]:hover,
#sezione-chat [type=submit]:hover {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: var(--vrv-border) !important;
}

/* Bottoni primari/icona senza bordo: bordo trasparente, sempre */
.erp-chat-wrapper .btn-send,
.erp-chat-wrapper .btn-attach,
.erp-chat-wrapper [class*="btn-drive"],
.erp-chat-wrapper .close-btn,
#sezione-chat .btn-send,
#sezione-chat .btn-attach,
#sezione-chat [class*="btn-drive"],
#sezione-chat .close-btn {
	border: 1px solid transparent !important;
}
.erp-chat-wrapper .btn-attach,
#sezione-chat .btn-attach {
	border-color: var(--vrv-border) !important;
}

/* Bottone Invia: resta accent pieno anche in hover (non deve diventare rosa) */
.erp-chat-wrapper .btn-send,
.erp-chat-wrapper .btn-send:hover,
.erp-chat-wrapper .btn-send:focus,
#sezione-chat .btn-send,
#sezione-chat .btn-send:hover,
#sezione-chat .btn-send:focus {
	background-color: var(--vrv-accent) !important;
	color: var(--vrv-bg-card) !important;
}

/* Link dentro la chat: usano l'accent, non il rosa del tema */
.erp-chat-wrapper a,
#sezione-chat a {
	color: var(--vrv-accent);
}
.erp-chat-wrapper a:hover,
#sezione-chat a:hover {
	color: var(--vrv-accent-hover);
}

/* Focus accessibile neutro */
.erp-chat-wrapper button:focus-visible,
.erp-chat-modal-overlay button:focus-visible,
#sezione-chat button:focus-visible {
	outline: 2px solid var(--vrv-border) !important;
	outline-offset: 1px;
}

.erp-chat-wrapper {
            display: flex;
            height: calc(100vh - 100px);
            min-height: 520px;
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 12px;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
            position: relative;
        }

        .erp-chat-wrapper button,
        .erp-chat-modal-overlay button,
        .erp-chat-members-modal button {
            font-family: inherit;
        }

        .erp-chat-wrapper .dashicons {
            font-family: dashicons !important;
            width: 18px;
            height: 18px;
            font-size: 18px;
            line-height: 1;
        }

        .erp-chat-sidebar {
            width: 280px;
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
            background: var(--vrv-bg-card-alt);
            border-right: 1px solid var(--vrv-border-lighter);
            overflow: hidden;
        }

        .erp-chat-sidebar-header {
            padding: 24px 24px;
            background: var(--vrv-bg-card);
            border-bottom: 1px solid var(--vrv-border-lighter);
        }

        .erp-chat-sidebar-header h2 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            color: var(--vrv-text-main);
        }

        .erp-chat-sidebar-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 10px 0;
        }

        .erp-chat-section-title {
            padding: 10px 20px 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--vrv-text-muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
        }

        .erp-chat-section-title button {
            background: transparent;
            border: none;
            color: var(--vrv-accent);
            font-size: 20px;
            font-weight: 800;
            cursor: pointer;
            border-radius: 4px;
            padding: 2px 8px;
            line-height: 1;
        }

        .erp-chat-section-title button:hover {
            background: #eaf1fa;
        }

        .erp-chat-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 20px;
            border-left: 3px solid transparent;
            color: var(--vrv-text-body);
            font-size: 14px;
            cursor: pointer;
            transition: background .15s ease;
        }

        .erp-chat-item:hover {
            background: var(--vrv-bg-hover);
        }

        .erp-chat-item.active {
            background: #eaf1fa;
            border-left-color: var(--vrv-accent);
            color: var(--vrv-accent);
            font-weight: 700;
        }

        .erp-chat-item img {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .erp-chat-item .hash {
            width: 28px;
            color: var(--vrv-text-faint);
            text-align: center;
            font-size: 18px;
        }

        .erp-chat-item .nome {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .erp-chat-item .badge {
            min-width: 20px;
            padding: 2px 7px;
            border-radius: 999px;
            background: var(--vrv-danger);
            color: var(--vrv-bg-card);
            font-size: 11px;
            font-weight: 800;
            text-align: center;
            line-height: 1.4;
        }

        .erp-chat-item .presence-dot {
            position: absolute;
            left: 42px;
            bottom: 6px;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 2px solid var(--vrv-bg-card-alt);
            background: var(--vrv-text-faint);
        }

        .erp-chat-item.active .presence-dot {
            border-color: #eaf1fa;
        }

        .erp-chat-item .presence-dot.online {
            background: var(--vrv-success);
        }

        .erp-chat-empty {
            padding: 14px 20px;
            color: var(--vrv-text-faint);
            font-size: 13px;
            font-style: italic;
        }

        .erp-chat-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            background: var(--vrv-bg-card);
        }

        .erp-chat-placeholder {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            color: var(--vrv-text-faint);
            font-size: 14px;
            text-align: center;
        }

        #erp-chat-active-view {
            flex: 1;
            min-height: 0;
            display: none;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        .erp-chat-main-header {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 24px 24px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            background: var(--vrv-bg-card);
        }

        .erp-chat-main-header .info {
            flex: 1;
            min-width: 0;
        }

        .erp-chat-main-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 800;
            color: var(--vrv-text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .erp-chat-main-header .descr {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--vrv-text-muted);
            font-size: 12px;
        }

        .presence-dot-header {
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 999px;
            background: var(--vrv-text-faint);
        }

        .presence-dot-header.online {
            background: var(--vrv-success);
        }

        .erp-chat-header-icon-btn,
        .erp-chat-members-btn {
            flex: 0 0 auto;
            border: 1px solid var(--vrv-border);
            background: var(--vrv-bg-card);
            color: var(--vrv-text-body);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .erp-chat-header-icon-btn:hover,
        .erp-chat-members-btn:hover {
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-accent);
        }

		.erp-chat-delete-channel-btn {
			flex: 0 0 auto;
			border: 1px solid var(--vrv-border-faint);
			background: transparent;
			color: var(--vrv-text-muted);
			border-radius: 8px;
			padding: 8px 12px;
			font-size: 13px;
			font-weight: 800;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.erp-chat-delete-channel-btn:hover {
			background: var(--vrv-danger-bg);
			color: var(--vrv-danger);
			border-color: var(--vrv-danger-bg);
		}

        .erp-chat-messages {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 20px 24px;
            background: var(--vrv-bg-card);
        }

        .erp-msg {
            display: flex;
            gap: 12px;
            position: relative;
        }

        .erp-msg .avatar {
            width: 36px;
            height: 36px;
            border-radius: 999px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .erp-msg .body {
            flex: 1;
            min-width: 0;
        }

        .erp-msg .head {
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 3px;
        }

        .erp-msg .nome {
            color: var(--vrv-text-main);
            font-size: 14px;
            font-weight: 800;
        }

        .erp-msg .ora,
        .erp-msg .modificato-label {
            color: var(--vrv-text-faint);
            font-size: 11px;
        }

        .erp-msg .testo {
            color: var(--vrv-text-body);
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
        }

        /* === V5: STILI RICCHI per messaggi formattati === */
        .erp-msg .testo p { margin: 0 0 4px; }
        .erp-msg .testo p:last-child { margin-bottom: 0; }
        .erp-msg .testo a { color: var(--vrv-accent); text-decoration: underline; word-break: break-all; }
        .erp-msg .testo ul,
        .erp-msg .testo ol { margin: 4px 0 4px 20px; padding: 0; }
        .erp-msg .testo li { margin-bottom: 2px; }
        .erp-msg .testo blockquote {
            margin: 6px 0;
            padding: 6px 12px;
            border-left: 3px solid var(--vrv-border);
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
        }
        .erp-msg .testo code {
            background: var(--vrv-bg-hover);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            color: var(--vrv-warning);
        }
        .erp-msg .testo pre {
            background: #1d2939;
            color: var(--vrv-bg-card-alt);
            padding: 10px 14px;
            border-radius: 6px;
            overflow-x: auto;
        }
        .erp-msg .testo pre code { background: transparent; color: inherit; padding: 0; }
        /* V5: heading inline ai messaggi (compatti per la chat) */
        .erp-msg .testo h1,
        .erp-msg .testo h2,
        .erp-msg .testo h3,
        .erp-msg .testo h4 {
            margin: 8px 0 4px 0;
            line-height: 1.25;
            color: var(--vrv-text-main);
            font-weight: 800;
        }
        .erp-msg .testo h1 { font-size: 19px; }
        .erp-msg .testo h2 { font-size: 17px; }
        .erp-msg .testo h3 { font-size: 15px; }
        .erp-msg .testo h4 { font-size: 14px; }
        .erp-msg .testo strong, .erp-msg .testo b { font-weight: 700; color: var(--vrv-text-main); }
        .erp-msg .testo em, .erp-msg .testo i { font-style: italic; }
        .erp-msg .testo u { text-decoration: underline; }
        .erp-msg .testo s, .erp-msg .testo strike, .erp-msg .testo del { text-decoration: line-through; color: var(--vrv-text-muted); }

        .erp-chat-mention { background:var(--vrv-bg-info); color:var(--vrv-accent); padding:1px 5px; border-radius:4px; font-weight:700; text-decoration:none; }

        .erp-msg-reply {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin: 0 0 8px;
            padding: 8px 10px;
            background: var(--vrv-bg-card-alt);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
            cursor: pointer;
        }

        .erp-msg-reply:hover { background: var(--vrv-bg-hover); }
        .reply-line { width: 3px; min-height: 34px; background: var(--vrv-accent); border-radius: 3px; flex-shrink: 0; }
        .reply-name { color: var(--vrv-accent); font-size: 12px; font-weight: 800; }
        .reply-snippet { color: var(--vrv-text-strong); font-size: 12px; line-height: 1.4; }

        .erp-msg .attach {
            margin-top: 7px;
            display: inline-flex;
            flex-direction: column;
            gap: 6px;
            max-width: 420px;
            padding: 8px 12px;
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
            background: var(--vrv-bg-card-alt);
            font-size: 13px;
        }

        .erp-msg .attach a { color: var(--vrv-accent); font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .erp-msg .attach img.preview { display: block; max-width: 320px; max-height: 220px; border-radius: 6px; }

        .erp-msg .azioni {
            display: none;
            position: absolute;
            top: -12px;
            right: 0;
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 7px;
            box-shadow: 0 2px 8px rgba(0,0,0,.10);
            overflow: hidden;
            z-index: 10;
        }

        .erp-msg:hover .azioni { display: flex; }
        .erp-msg .azioni button { border: none; background: transparent; padding: 6px 10px; color: var(--vrv-text-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .erp-msg .azioni button:hover { background: var(--vrv-bg-card-alt); }

        .reazioni { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
        .reaz-chip { border: 1px solid var(--vrv-border-lighter); border-radius: 999px; background: var(--vrv-bg-hover); padding: 2px 8px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
        .reaz-chip.me-reacted { background: var(--vrv-bg-info); border-color: #b2ddff; color: var(--vrv-accent); font-weight: 800; }
        .reaz-chip .count { font-size: 11px; font-weight: 800; }

        .erp-chat-emoji-popup {
            position: absolute;
            z-index: 1000;
            display: flex;
            gap: 4px;
            padding: 8px;
            background: var(--vrv-bg-card);
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,.12);
        }

        .erp-chat-emoji-popup button { border: none; background: transparent; padding: 4px 6px; font-size: 20px; cursor: pointer; border-radius: 4px; }
        .erp-chat-emoji-popup button:hover { background: var(--vrv-bg-card-alt); transform: scale(1.12); }

        .erp-msg-highlight { outline: 2px solid #b2ddff; border-radius: 10px; background: var(--vrv-bg-info); }

        /* Divisore giornaliero tra messaggi */
        .erp-chat-day-divider {
            display: flex;
            align-items: center;
            margin: 18px 0 10px;
            gap: 12px;
        }
        .erp-chat-day-divider::before,
        .erp-chat-day-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--vrv-border-lighter);
        }
        .erp-chat-day-divider .label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--vrv-text-muted);
            background: var(--vrv-bg-card-alt);
            padding: 4px 12px;
            border-radius: 12px;
            border: 1px solid var(--vrv-border-lighter);
            white-space: nowrap;
        }

        .erp-chat-input-wrap {
            flex: 0 0 auto;
            border-top: 1px solid var(--vrv-border-lighter);
            background: var(--vrv-bg-card);
        }

        .erp-chat-reply-preview-bar {
            display: none;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 20px;
            background: var(--vrv-bg-card-alt);
            border-bottom: 1px solid var(--vrv-border-lighter);
            color: var(--vrv-text-strong);
            font-size: 13px;
        }

        .erp-chat-reply-preview-bar.open { display: flex; }
        .erp-chat-reply-preview-bar strong { color: var(--vrv-accent); }
        .erp-chat-reply-preview-bar button { border: none; background: transparent; color: var(--vrv-text-muted); cursor: pointer; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
        .erp-chat-reply-preview-bar button:hover { background: var(--vrv-bg-hover); color: var(--vrv-text-main); }

        /* === V5: TOOLBAR ESTESA stile Scrittura === */
        .erp-chat-toolbar {
            display: flex;
            gap: 2px;
            padding: 6px 20px;
            border-bottom: 1px solid var(--vrv-bg-hover);
            background: var(--vrv-bg-card-alt);
            flex-wrap: wrap;
            align-items: center;
        }

        .erp-chat-toolbar button {
            width: 30px;
            height: 30px;
            border: 1px solid transparent;
            border-radius: 4px;
            background: transparent;
            color: var(--vrv-text-strong);
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .erp-chat-toolbar button:hover { background: var(--vrv-bg-hover); border-color: var(--vrv-border-lighter); }
        .erp-chat-toolbar button.active { background: var(--vrv-bg-info); border-color: #b2ddff; color: var(--vrv-accent); }
        .erp-chat-toolbar .sep { width: 1px; background: var(--vrv-border-lighter); margin: 4px 6px; align-self: stretch; }

        .erp-chat-input-area { padding: 10px 20px 14px; }
        .erp-chat-input-row { display: flex; gap: 10px; align-items: flex-end; }

        .erp-chat-editor {
            flex: 1;
            min-height: 40px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px 14px;
            border: 1px solid var(--vrv-border);
            border-radius: 8px;
            outline: none;
            background: var(--vrv-bg-card);
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
        }

        .erp-chat-editor:focus { border-color: var(--vrv-accent); }
        .erp-chat-editor:empty::before { content: attr(data-placeholder); color: var(--vrv-text-faint); pointer-events: none; display: block; }

        /* V5: stili dentro l'editor (anteprima formattazione mentre scrivi) */
        .erp-chat-editor h1 { font-size: 19px; font-weight: 800; margin: 6px 0 2px; }
        .erp-chat-editor h2 { font-size: 17px; font-weight: 800; margin: 6px 0 2px; }
        .erp-chat-editor h3 { font-size: 15px; font-weight: 800; margin: 6px 0 2px; }
        .erp-chat-editor h4 { font-size: 14px; font-weight: 800; margin: 6px 0 2px; }
        .erp-chat-editor blockquote {
            margin: 4px 0;
            padding: 4px 10px;
            border-left: 3px solid var(--vrv-border);
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
        }
        .erp-chat-editor ul, .erp-chat-editor ol { margin: 2px 0 2px 20px; padding: 0; }
        .erp-chat-editor a { color: var(--vrv-accent); text-decoration: underline; }
        .erp-chat-editor [style*="text-align: center"] { text-align: center; }
        .erp-chat-editor [style*="text-align: right"] { text-align: right; }
        .erp-chat-editor [style*="text-align: left"] { text-align: left; }

        .btn-attach,
        .btn-send {
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .btn-attach {
            border: 1px solid var(--vrv-border);
            background: var(--vrv-bg-card-alt);
            color: var(--vrv-text-strong);
            padding: 10px 14px;
        }

        .btn-send {
            border: none;
            background: var(--vrv-accent);
            color: var(--vrv-bg-card);
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 800;
        }

        .btn-send:hover { background: var(--vrv-accent-hover); }
        .btn-send:disabled { background: var(--vrv-text-faint); cursor: not-allowed; }

        .erp-chat-file-preview {
            display: none;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            padding: 8px 12px;
            border: 1px solid #b2ddff;
            border-radius: 6px;
            background: #eaf1fa;
            color: var(--vrv-accent);
            font-size: 13px;
        }

        .erp-chat-file-preview button { border: none; background: transparent; color: var(--vrv-text-muted); cursor: pointer; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
        .erp-chat-file-preview button:hover { background: var(--vrv-bg-hover); color: var(--vrv-text-main); }

        /* TYPING INDICATOR */
        .erp-chat-typing-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 4px 6px;
            font-size: 12px;
            color: var(--vrv-text-muted);
            font-style: italic;
            min-height: 20px;
        }
        .erp-typing-dots {
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .erp-typing-dots span {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--vrv-text-faint);
            animation: erp-typing-bounce 1.2s infinite ease-in-out;
        }
        .erp-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
        .erp-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes erp-typing-bounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
            40% { transform: translateY(-4px); opacity: 1; }
        }

        .erp-chat-search-panel {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 50;
            flex-direction: column;
            overflow: hidden;
            background: var(--vrv-bg-card);
            padding: 20px 24px;
        }

        .erp-chat-search-panel.open { display: flex; }
        .erp-chat-search-header { display: flex; gap: 10px; align-items: center; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--vrv-border-lighter); }
        .erp-chat-search-header input { flex: 1; border: 1px solid var(--vrv-border); border-radius: 8px; padding: 10px 14px; font-size: 14px; outline: none; }
        .erp-chat-search-header button { border: 1px solid var(--vrv-border); border-radius: 8px; background: var(--vrv-bg-card-alt); padding: 10px 14px; cursor: pointer; font-weight: 700; }
        .erp-chat-search-results { flex: 1; overflow-y: auto; }
        .erp-chat-search-result { padding: 12px; border: 1px solid var(--vrv-border-lighter); border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
        .erp-chat-search-result:hover { background: var(--vrv-bg-card-alt); }
        .erp-chat-search-result .sr-meta { font-size: 12px; color: var(--vrv-text-muted); margin-bottom: 4px; }
        .erp-chat-search-result .sr-testo { font-size: 14px; color: var(--vrv-text-body); line-height: 1.4; }
        .erp-chat-search-result mark { background: #fef3c7; border-radius: 3px; padding: 1px 3px; }

        .erp-chat-modal-overlay,
        .erp-chat-members-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 999999;
            background: rgba(16,24,40,.60);
            backdrop-filter: blur(4px);
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        .erp-chat-modal-overlay.open,
        .erp-chat-members-modal.open { display: flex; }

        .erp-chat-modal,
        .erp-chat-members-modal__box {
            width: min(540px, calc(100vw - 30px));
            max-height: calc(100vh - 60px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: var(--vrv-bg-card);
            border-radius: 16px;
            box-shadow: 0 24px 80px rgba(16,24,40,.22);
        }

        .erp-chat-modal-header,
        .erp-chat-members-modal__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--vrv-border-lighter);
            background: var(--vrv-bg-card-alt);
        }

        .erp-chat-modal-header h3,
        .erp-chat-members-modal__header h3 {
            margin: 0 0 4px;
            font-size: 18px;
            font-weight: 800;
            color: var(--vrv-text-main);
        }

        .erp-chat-members-modal__header p {
            margin: 0;
            font-size: 13px;
            color: var(--vrv-text-muted);
            line-height: 1.4;
        }

        .close-btn,
        .erp-chat-members-close {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 999px;
            background: var(--vrv-bg-hover);
            color: var(--vrv-text-body);
            font-size: 18px;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
        }

        .erp-chat-modal-body,
        .erp-chat-members-search-wrap {
            padding: 18px 22px;
        }

        .erp-chat-modal-body label {
            display: block;
            margin: 0 0 6px;
            color: var(--vrv-text-body);
            font-size: 13px;
            font-weight: 700;
        }

        .erp-chat-modal-body input[type="text"],
        .erp-chat-modal-body input[type="url"],
        #erp-chat-members-search {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--vrv-border);
            border-radius: 9px;
            padding: 10px 12px;
            font-size: 14px;
            outline: none;
            margin-bottom: 14px;
        }

        .erp-chat-members-search-wrap {
            border-bottom: 1px solid var(--vrv-border-lighter);
        }

        #erp-chat-members-search { margin-bottom: 0; }

        .utenti-list,
        .erp-chat-members-list {
            overflow-y: auto;
            max-height: 330px;
            padding: 6px;
            border: 1px solid var(--vrv-border-lighter);
            border-radius: 8px;
        }

        .erp-chat-members-list {
            border: none;
            border-radius: 0;
            padding: 8px;
            max-height: 390px;
        }

        .utente-checkbox,
        .erp-chat-member-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }

        .utente-checkbox:hover,
        .erp-chat-member-row:hover { background: var(--vrv-bg-card-alt); }
        .utente-checkbox img,
        .erp-chat-member-row img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
        .utente-checkbox .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--vrv-text-faint); display: inline-block; }
        .utente-checkbox .dot.online { background: var(--vrv-success); }

        .erp-chat-member-row span { display: flex; flex-direction: column; min-width: 0; }
        .erp-chat-member-row strong { font-size: 14px; color: var(--vrv-text-main); font-weight: 800; }
        .erp-chat-member-row small { font-size: 12px; color: var(--vrv-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .creator-badge { width: fit-content; margin-top: 4px; padding: 3px 7px; border-radius: 999px; background: #e0f2fe; color: var(--vrv-accent); font-size: 11px; font-weight: 800; font-style: normal; }

        .erp-chat-modal-footer,
        .erp-chat-members-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 22px;
            border-top: 1px solid var(--vrv-border-lighter);
            background: var(--vrv-bg-card-alt);
        }

        .erp-chat-modal-footer button,
        .erp-chat-members-actions button {
            border: none;
            border-radius: 9px;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
        }

        .annulla,
        .erp-chat-members-cancel { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }
        .conferma,
        .erp-chat-members-save { background: var(--vrv-accent); color: var(--vrv-bg-card); }
        .erp-chat-members-save:disabled { opacity: .65; cursor: wait; }
        .erp-chat-members-loading,
        .erp-chat-members-empty,
        .erp-chat-members-error { padding: 18px; color: var(--vrv-text-muted); font-size: 14px; }
        .erp-chat-members-error { color: var(--vrv-danger); }

        @media (max-width: 768px) {
            .erp-chat-wrapper { height: calc(100vh - 80px); min-height: 0; border-radius: 0; }
            .erp-chat-sidebar { width: 220px; flex-basis: 220px; }
            .erp-chat-messages { padding: 14px 12px; }
            .erp-chat-main-header { padding: 10px 12px; }
            /* v5.1: toolbar minimale, niente da nascondere su mobile */
            .erp-chat-toolbar { padding: 4px 12px; gap: 0; }
            .erp-chat-input-area { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
            .btn-send { width: 42px; height: 42px; border-radius: 999px; padding: 0; font-size: 0; }
            .btn-send::before { content: "↑"; font-size: 25px; font-weight: 900; line-height: 1; }
            .btn-attach { width: 42px; height: 42px; border-radius: 999px; padding: 0; }
        }
#sezione-chat .btn-attach-file { /* eredita stile da .btn-attach */ }
        #sezione-chat .btn-attach-file .dashicons { font-size: 18px; }

        #sezione-chat .erp-chat-messages-area { position: relative; }

        #sezione-chat .erp-chat-drop-overlay {
            position: absolute;
            inset: 0;
            background: rgba(2, 106, 162, 0.08);
            border: 2px dashed var(--vrv-accent);
            border-radius: 12px;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
            pointer-events: none;
        }
        #sezione-chat .erp-chat-drop-overlay.active { display: flex; }
        #sezione-chat .erp-chat-drop-inner {
            background: var(--vrv-bg-card);
            padding: 22px 28px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(16,24,40,0.12);
            text-align: center;
            color: var(--vrv-accent);
            font-weight: 700;
        }
        #sezione-chat .erp-chat-drop-inner .dashicons {
            font-size: 36px; width: 36px; height: 36px; display: block; margin: 0 auto 6px;
        }
        #sezione-chat .erp-chat-drop-inner .hint {
            font-size: 12px; font-weight: 500; color: var(--vrv-text-muted); margin-top: 4px;
        }

        /* Anteprima multipla nel preview-bar */
        #sezione-chat .erp-chat-file-preview { gap: 8px; flex-wrap: wrap; }
        #sezione-chat .erp-chat-file-preview .preview-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--vrv-bg-hover);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 13px;
        }
        #sezione-chat .erp-chat-file-preview .preview-item img {
            width: 28px; height: 28px; object-fit: cover; border-radius: 4px;
        }
        #sezione-chat .erp-chat-file-preview .preview-item button {
            border: none; background: transparent; color: var(--vrv-text-muted); cursor: pointer; font-weight: 700; border-radius: 6px; padding: 2px 7px;
        }
        #sezione-chat .erp-chat-file-preview .preview-item button:hover { background: var(--vrv-bg-hover); color: var(--vrv-text-main); }
        #sezione-chat .erp-chat-file-preview .preview-item.uploading {
            opacity: 0.6; pointer-events: none;
									 }

/* === Badge contatore non letti nel menu === */
#erp-chat-badge-menu, .erp-chat-badge-menu {
	margin-left: auto;
	background: var(--vrv-accent);
	color: var(--vrv-bg-card);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 10px;
	line-height: 1.4;
	min-width: 20px;
	text-align: center;
	display: none;
}


/* === Fix scroll desktop/mobile (assorbito da snippet) === */
/* ============================================================
       DESKTOP (>= 769px)
    ============================================================ */
    @media (min-width: 769px) {
        #sezione-chat.erp-sezione-app.attiva {
            height: 100% !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }
        #sezione-chat .erp-chat-wrapper {
            display: flex !important;
            flex-direction: row !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            flex: 1 1 0 !important;
            overflow: hidden !important;
        }
        #sezione-chat .erp-chat-main {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            min-height: 0 !important;
            max-height: 100% !important;
            overflow: hidden !important;
            flex: 1 1 0 !important;
        }
        #sezione-chat #erp-chat-active-view {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
            flex: 1 1 0 !important;
        }
        #sezione-chat .erp-chat-messages-area {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 0 !important;
            min-height: 0 !important;
            max-height: 100% !important;
            height: auto !important;
            overflow: hidden !important;
            position: relative !important;
        }
        #sezione-chat #erp-chat-messages.erp-chat-messages {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 0 !important;
            min-height: 0 !important;
            max-height: 100% !important;
            height: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
    }
    
    /* ============================================================
       MOBILE (<= 768px) — solo in conversazione
       (toolbar visibile + scroll messaggi)
    ============================================================ */
    @media (max-width: 768px) {
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-main {
            display: flex !important;
            flex-direction: column !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            min-height: 0 !important;
            overflow: hidden !important;
            width: 100% !important;
        }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation #erp-chat-placeholder {
            display: none !important;
        }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation #erp-chat-active-view {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 0 !important;
            min-height: 0 !important;
            height: 100% !important;
            overflow: hidden !important;
        }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-main-header {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--vrv-bg-card) !important;
    border-bottom: 1px solid var(--vrv-border-lighter) !important;
		   }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-messages-area {
            flex: 1 1 0 !important;
            min-height: 0 !important;
            height: auto !important;
            overflow: hidden !important;
            position: relative !important;
        }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation #erp-chat-messages {
            height: 100% !important;
            max-height: 100% !important;
            min-height: 0 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-input-wrap {
            flex: 0 0 auto !important;
            display: block !important;
            visibility: visible !important;
            background: var(--vrv-bg-card) !important;
            border-top: 1px solid var(--vrv-border-lighter) !important;
        }
    }
		   
	/* Blocca scroll della pagina quando sei in conversazione mobile */
body:has(#sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation) {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* Il wrapper occupa tutto lo schermo come overlay */
#sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    height: 100dvh !important;
    background: var(--vrv-bg-card) !important;
}

/* Padding perimetrale uniforme per tutte le sezioni — SOLO desktop.
   Su mobile (<=1024px) il padding laterale è già gestito dal wrapper della sezione 44. */
@media (min-width: 1025px) {
    .erp-sezione-app.attiva {
        padding: 28px 32px;
        box-sizing: border-box;
    }
}

/* Chat usa height:100% flex — il padding romperebbe lo scroll */
#sezione-chat.erp-sezione-app.attiva {
    padding: 0 !important;
}

@media (min-width: 769px) {
    #sezione-chat.erp-sezione-app.attiva {
        padding: 0 !important;
        height: 100% !important;
    }
}

@media (max-width: 768px) {
    #sezione-chat.erp-sezione-app.attiva {
        padding: 0 !important;
    }
}

/* ============================================================================
 * 31. MODULO CONTABILITÀ PERSONALE — Patrimonio familiare
 *
 * Sezione finanza personale: conti BNL/Fineco, asset extra (postepay, contante,
 * libretti, buoni), import estratti XLSX, movimenti categorizzati.
 *
 * Shortcode: [erp_admin_personale]
 * Prefissi: .pers-*, #erp-personale-wrapper, #pers-modale, #pers-toast
 * ============================================================================ */

/* Fix anti-tema: forza sans-serif su h1/h2/h3 dei moduli amministrazione,
   perché alcuni temi WP iniettano serif sui titoli h2 ereditando dal corpo. */
[id^="erp-personale"] h1, [id^="erp-personale"] h2, [id^="erp-personale"] h3,
[id^="erp-anagrafica"] h1, [id^="erp-anagrafica"] h2, [id^="erp-anagrafica"] h3,
.sol-header h1, .sol-header h2, .sol-header h3,
.fin-header h1, .fin-header h2, .fin-header h3, .fin-cassa-title,
.and-header h1, .and-header h2, .and-header h3,
.prev-header h1, .prev-header h2, .prev-header h3,
.trf-header h1, .trf-header h2, .trf-header h3, .trf-title,
.f24-header h1, .f24-header h2, .f24-header h3,
.erp-log-wrap h1, .erp-log-wrap h2, .erp-log-wrap h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    color: var(--vrv-text-main) !important;
    letter-spacing: -0.01em;
}



/* ============================================================
 * MODULO CONTABILITÀ PERSONALE — Stile chiaro coordinato
 * Allineato al design system varavallo-erp-design.css.
 * Selettori .pers-* mantenuti invariati per compatibilità.
 * Colori derivati dai token --vrv-*.
 * ============================================================ */

#erp-personale-wrapper {
    background: var(--vrv-bg-page, #f3f4f6);
    color: var(--vrv-text-body, #344054);
    padding: 24px;
    border-radius: var(--vrv-radius-lg, 10px);
    margin-bottom: 30px;
    font-family: var(--vrv-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    box-sizing: border-box;
}
#erp-personale-wrapper *, #erp-personale-wrapper *::before, #erp-personale-wrapper *::after { box-sizing: border-box; }

/* Header */
.pers-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 22px; padding-bottom: 16px;
    border-bottom: 1px solid var(--vrv-border-soft, #e4e7ec);
}
.pers-header h2 {
    margin: 0 0 4px 0; font-size: 22px;
    color: var(--vrv-text-main, #101828); font-weight: 700;
    letter-spacing: -0.01em;
}
.pers-header p {
    margin: 0; color: var(--vrv-text-muted, #667085); font-size: 13px;
}

/* Hero patrimonio (card chiara con accento) */
.pers-hero {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    border-top: 3px solid var(--vrv-success, var(--vrv-success));
    border-radius: var(--vrv-radius-lg, 10px);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--vrv-shadow-sm, 0 1px 2px rgba(16,24,40,0.04));
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.pers-hero-label {
    font-size: 11px; font-weight: 700; color: var(--vrv-text-muted, #667085);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.pers-hero-totale {
    font-size: 36px; font-weight: 800;
    color: var(--vrv-text-main, #101828); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pers-hero-var { text-align: right; font-size: 13px; }
.pers-hero-var .var-label { color: var(--vrv-text-muted, #667085); }
.pers-hero-var .var-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pers-hero-var .var-val.up { color: var(--vrv-success, var(--vrv-success)); }
.pers-hero-var .var-val.down { color: var(--vrv-danger, var(--vrv-danger)); }

/* Sezioni a 2 colonne (Conti / Asset Extra) */
.pers-2col {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; margin-bottom: 20px;
}
.pers-section {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    border-radius: var(--vrv-radius-lg, 10px);
    padding: 20px;
    box-shadow: var(--vrv-shadow-sm, 0 1px 2px rgba(16,24,40,0.04));
}
.pers-section h3 {
    margin: 0 0 14px 0; font-size: 15px;
    color: var(--vrv-text-main, #101828); font-weight: 700;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.pers-section h3 small {
    font-size: 11px; color: var(--vrv-text-muted, #667085);
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Riga conto / asset */
.pers-conto-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--vrv-border-soft, #e4e7ec);
}
.pers-conto-row:last-child { border-bottom: none; }
.pers-conto-info { display: flex; flex-direction: column; min-width: 0; }
.pers-conto-name {
    font-size: 14px; font-weight: 600;
    color: var(--vrv-text-main, #101828);
    display: inline-flex; align-items: center; gap: 8px;
}
.pers-conto-meta {
    font-size: 11px; color: var(--vrv-text-muted, #667085); margin-top: 3px;
    display: inline-flex; align-items: center; gap: 5px;
}
.pers-conto-saldo {
    font-size: 18px; font-weight: 700;
    color: var(--vrv-text-main, #101828);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pers-conto-saldo.zero { color: var(--vrv-text-muted, #667085); }
.pers-conto-azioni { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.pers-mini-btn {
    background: var(--vrv-bg-card, #ffffff);
    color: var(--vrv-text-body, #344054);
    border: 1px solid var(--vrv-border, #d0d5dd);
    padding: 5px 10px; border-radius: var(--vrv-radius-sm, 4px);
    font-size: 11px; cursor: pointer; transition: all 0.15s;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.pers-mini-btn:hover {
    background: var(--vrv-bg-card-alt, #f9fafb);
    border-color: var(--vrv-text-muted, #667085);
    color: var(--vrv-text-main, #101828);
}
.pers-mini-btn.danger { color: var(--vrv-danger, var(--vrv-danger)); }
.pers-mini-btn.danger:hover {
    background: var(--vrv-danger-bg, #fef3f2);
    border-color: var(--vrv-danger, var(--vrv-danger));
}

/* Box importazione (card con bordo tratteggiato leggero) */
.pers-import-box {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px dashed var(--vrv-border, #d0d5dd);
    border-radius: var(--vrv-radius-lg, 10px);
    padding: 20px;
    margin-bottom: 20px;
    display: grid; grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px; align-items: end;
}
.pers-import-box label {
    font-size: 11px;
    color: var(--vrv-text-muted, #667085);
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px;
    display: block; margin-bottom: 6px;
}
.pers-import-box select,
.pers-import-box input[type="file"] {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    color: var(--vrv-text-main, #101828);
    padding: 8px 12px; border-radius: var(--vrv-radius, 6px);
    font-size: 13px; width: 100%;
    font-family: inherit;
}
.pers-import-box select:focus,
.pers-import-box input[type="file"]:focus {
    outline: none;
    border-color: var(--vrv-accent, #026aa2);
    box-shadow: var(--vrv-ring, 0 0 0 3px var(--vrv-accent-soft));
}
.pers-import-btn {
    background: var(--vrv-accent, #026aa2);
    color: var(--vrv-bg-card, #ffffff);
    border: 1px solid transparent;
    padding: 10px 20px; border-radius: var(--vrv-radius, 6px);
    font-weight: 600; cursor: pointer; font-size: 13px;
    white-space: nowrap; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.15s;
}
.pers-import-btn:hover { background: var(--vrv-accent-hover, #034f7f); }

/* Filtri compatti */
.pers-filtri-compact {
    margin-bottom: 14px;
    padding: 14px 18px;
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    border-radius: var(--vrv-radius, 6px);
    box-shadow: var(--vrv-shadow-sm, 0 1px 2px rgba(16,24,40,0.04));
}
.pers-filtri-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.pers-filtri-title {
    font-size: 14px; font-weight: 700; color: var(--vrv-text-main, #101828);
    margin-right: auto;
    display: inline-flex; align-items: center; gap: 8px;
}
.pers-filtri-toggle, .pers-filtri-reset {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    color: var(--vrv-text-body, #344054);
    padding: 5px 12px; border-radius: var(--vrv-radius-sm, 4px);
    font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: 0.15s;
}
.pers-filtri-toggle:hover, .pers-filtri-reset:hover {
    background: var(--vrv-bg-card-alt, #f9fafb);
    color: var(--vrv-text-main, #101828);
}
.pers-filtri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.pers-filtri-grid.collassato { display: none; }
.pers-filtro-item { display: flex; flex-direction: column; gap: 4px; }
.pers-filtro-item label {
    font-size: 9px; color: var(--vrv-text-muted, #667085);
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px;
}
.pers-filtro-item select,
.pers-filtro-item input {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    color: var(--vrv-text-main, #101828);
    padding: 7px 10px; border-radius: var(--vrv-radius-sm, 4px);
    font-size: 12px; outline: none; font-family: inherit; height: 32px;
}
.pers-filtro-item select:focus,
.pers-filtro-item input:focus {
    border-color: var(--vrv-accent, #026aa2);
    box-shadow: 0 0 0 2px var(--vrv-accent-soft);
}
.pers-filtro-item.pers-filtro-search { grid-column: span 2; }

/* Vecchi stili .pers-filtri-bar — uniformati */
.pers-filtri-bar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: var(--vrv-bg-card, #ffffff);
    padding: 14px 18px;
    border-radius: var(--vrv-radius, 6px);
    border: 1px solid var(--vrv-border, #d0d5dd);
    margin-bottom: 16px;
}
.pers-filtri-bar label {
    font-size: 11px; color: var(--vrv-text-muted, #667085);
    text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px;
}
.pers-filtri-bar select, .pers-filtri-bar input {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    color: var(--vrv-text-main, #101828);
    padding: 7px 10px; border-radius: var(--vrv-radius-sm, 4px);
    font-size: 12px; outline: none; font-family: inherit;
}
.pers-filtri-bar select:focus, .pers-filtri-bar input:focus { border-color: var(--vrv-accent, #026aa2); }

/* Tabella movimenti */
.pers-table-wrap {
    background: var(--vrv-bg-card, #ffffff);
    border-radius: var(--vrv-radius-lg, 10px);
    border: 1px solid var(--vrv-border, #d0d5dd);
    overflow: hidden;
    max-height: 540px;
    overflow-y: auto;
    box-shadow: var(--vrv-shadow-sm, 0 1px 2px rgba(16,24,40,0.04));
}
.pers-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pers-table th {
    text-align: left; padding: 11px 14px;
    color: var(--vrv-text-muted, #667085);
    border-bottom: 1px solid var(--vrv-border, #d0d5dd);
    font-weight: 700; position: sticky; top: 0;
    background: var(--vrv-bg-card-alt, #f9fafb); z-index: 2;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.pers-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--vrv-border-soft, #e4e7ec);
    color: var(--vrv-text-body, #344054);
    vertical-align: middle;
}
.pers-table tbody tr:hover td { background: var(--vrv-bg-card-alt, #f9fafb); }
.pers-cat-select {
    background: var(--vrv-bg-card, #ffffff);
    border: 1px solid var(--vrv-border, #d0d5dd);
    color: var(--vrv-text-main, #101828);
    padding: 4px 8px; border-radius: var(--vrv-radius-sm, 4px);
    font-size: 11px; cursor: pointer; max-width: 150px;
    font-family: inherit;
}
.pers-cat-select:focus {
    outline: none;
    border-color: var(--vrv-accent, #026aa2);
}
.pers-tipo-badge.entrata {
    background: var(--vrv-success-bg, var(--vrv-success-bg));
    color: var(--vrv-success, var(--vrv-success));
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pers-tipo-badge.uscita  {
    background: var(--vrv-danger-bg, #fef3f2);
    color: var(--vrv-danger, var(--vrv-danger));
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pers-prop-badge {
    font-size: 10px; padding: 2px 7px;
    border-radius: var(--vrv-radius-sm, 4px);
    background: var(--vrv-bg-card-alt, #f9fafb);
    color: var(--vrv-text-body, #344054);
    border: 1px solid var(--vrv-border-soft, #e4e7ec);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pers-desc-cell {
    max-width: 380px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; cursor: help;
}

/* Categorie chart (barre) */
.pers-cat-bar-wrap { padding: 8px 0; }
.pers-cat-row {
    display: grid; grid-template-columns: 130px 1fr 110px;
    gap: 12px; align-items: center; padding: 6px 0;
}
.pers-cat-name {
    font-size: 12px; color: var(--vrv-text-body, #344054);
}
.pers-cat-bar-out {
    background: var(--vrv-bg-card-alt, #f9fafb);
    height: 16px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--vrv-border-soft, #e4e7ec);
}
.pers-cat-bar-in { height: 100%; border-radius: 8px; }
.pers-cat-bar-in.entrata { background: var(--vrv-success, var(--vrv-success)); }
.pers-cat-bar-in.uscita  { background: var(--vrv-danger, var(--vrv-danger)); }
.pers-cat-val {
    text-align: right; font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pers-cat-val.entrata { color: var(--vrv-success, var(--vrv-success)); }
.pers-cat-val.uscita  { color: var(--vrv-danger, var(--vrv-danger)); }

/* Modale asset */
#pers-modale-bg {
    display: none; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(16,24,40,0.5);
    z-index: 9998; backdrop-filter: blur(2px);
}
#pers-modale {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--vrv-bg-card, #ffffff);
    padding: 26px;
    border-radius: var(--vrv-radius-lg, 10px);
    z-index: 9999; width: 480px; max-width: 95vw;
    color: var(--vrv-text-main, #101828);
    box-shadow: var(--vrv-shadow-lg, 0 10px 30px rgba(16,24,40,0.10));
}
#pers-modale h3 {
    margin: 0 0 18px 0; padding-bottom: 14px;
    border-bottom: 1px solid var(--vrv-border-soft, #e4e7ec);
    font-size: 17px;
}
#pers-modale .form-group { margin-bottom: 14px; }
#pers-modale .form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--vrv-text-body, #344054);
    margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
#pers-modale .form-group input,
#pers-modale .form-group select {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--vrv-border, #d0d5dd);
    border-radius: var(--vrv-radius, 6px);
    font-size: 14px; outline: none; font-family: inherit;
    color: var(--vrv-text-main, #101828);
    background: var(--vrv-bg-card, #ffffff);
}
#pers-modale .form-group input:focus,
#pers-modale .form-group select:focus {
    border-color: var(--vrv-accent, #026aa2);
    box-shadow: var(--vrv-ring, 0 0 0 3px var(--vrv-accent-soft));
}
#pers-modale .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#pers-modale .modale-azioni {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--vrv-border-soft, #e4e7ec);
}
#pers-modale .btn-salva {
    background: var(--vrv-accent, #026aa2);
    color: var(--vrv-bg-card, #ffffff);
    border: 1px solid transparent;
    padding: 9px 18px; border-radius: var(--vrv-radius, 6px);
    font-weight: 600; cursor: pointer; font-size: 14px;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
#pers-modale .btn-salva:hover { background: var(--vrv-accent-hover, #034f7f); }
#pers-modale .btn-annulla {
    background: transparent;
    color: var(--vrv-text-body, #344054);
    border: 1px solid var(--vrv-border, #d0d5dd);
    padding: 9px 16px; border-radius: var(--vrv-radius, 6px);
    font-weight: 600; cursor: pointer; font-size: 14px;
    font-family: inherit;
}
#pers-modale .btn-annulla:hover {
    background: var(--vrv-bg-card-alt, #f9fafb);
}

/* Toast */
#pers-toast {
    position: fixed; top: 24px; right: 24px; z-index: 10000;
    background: var(--vrv-success, var(--vrv-success));
    color: var(--vrv-bg-card, #ffffff);
    padding: 12px 20px;
    border-radius: var(--vrv-radius, 6px);
    font-weight: 600;
    box-shadow: var(--vrv-shadow-lg, 0 10px 30px rgba(16,24,40,0.10));
    display: none;
    animation: persToastIn 0.3s ease;
}
#pers-toast.errore { background: var(--vrv-danger, var(--vrv-danger)); }
@keyframes persToastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
    .pers-2col { grid-template-columns: 1fr; }
    .pers-import-box { grid-template-columns: 1fr; }
    .pers-hero { flex-direction: column; align-items: flex-start; }
    .pers-hero-var { text-align: left; }
    #erp-personale-wrapper { padding: 16px; }
}

/* ============================================================================
 * 32. MODULO LOG EMAIL RINNOVI
 *
 * Storico email inviate dal motore rinnovi e gestione ordini.
 * Prefissi: .erp-log-*
 * ============================================================================ */

.erp-log-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; max-width:1200px; }
    .erp-log-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:20px; }
    .erp-log-stat { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:8px; padding:16px; }
    .erp-log-stat .num { font-size:28px; font-weight:800; color: var(--vrv-text-main); line-height:1; }
    .erp-log-stat .lbl { font-size:12px; color: var(--vrv-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:6px; }
    .erp-log-stat.ok .num { color: var(--vrv-success); }
    .erp-log-stat.fail .num { color: var(--vrv-danger); }
    .erp-log-stat.warn .num { color: var(--vrv-warning); }

    .erp-log-filters { background: var(--vrv-bg-card-alt); border: 1px solid var(--vrv-border-soft); border-radius:8px; padding:16px; margin-bottom:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
    .erp-log-filters label { display:flex; flex-direction:column; gap:4px; font-size:12px; color: var(--vrv-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
    .erp-log-filters select, .erp-log-filters input[type="text"], .erp-log-filters input[type="number"] {
padding:8px 10px; border: 1px solid var(--vrv-border); border-radius:6px; font-size:14px; background: var(--vrv-bg-card); min-width:120px;
    }
    .erp-log-filters button { padding:9px 18px; background: var(--vrv-bg-page); color: var(--vrv-text-main); border:none; border-radius:6px; font-weight:600; cursor:pointer; }
    .erp-log-filters .reset-btn { background: var(--vrv-bg-hover); color: var(--vrv-text-body); }

    .erp-log-table { width:100%; border-collapse:collapse; background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:8px; overflow:hidden; }
    .erp-log-table th { background: var(--vrv-bg-card-alt); text-align:left; padding:12px; font-size:12px; color: var(--vrv-text-strong); text-transform:uppercase; letter-spacing:0.5px; }
    .erp-log-table td { padding:12px; border-top:1px solid #f0f0f0; font-size:14px; color: var(--vrv-text-body); vertical-align:top; }
    .erp-log-table tr:hover td { background:#fafbfc; }

    .erp-log-badge { display:inline-block; padding:3px 8px; border-radius:12px; font-size:11px; font-weight:700; text-transform:uppercase; }
    .erp-log-badge.ok       { background: var(--vrv-success-bg); color: var(--vrv-success); }
    .erp-log-badge.fallita  { background: var(--vrv-danger-bg); color: var(--vrv-danger); }
    .erp-log-badge.no_email { background: var(--vrv-bg-warning-light); color: var(--vrv-warning); }

    .erp-log-empty { text-align:center; padding:40px; color: var(--vrv-text-faint); font-style:italic; }
    .erp-log-link { color: var(--vrv-accent); text-decoration:none; font-weight:600; }
    .erp-log-link:hover { text-decoration:underline; }

/* ============================================================================
 * 33. MODULO ANAGRAFICA CLIENTI ADMIN
 *
 * Anagrafica clienti con modali ACF per inserimento/modifica.
 * Prefissi: .anagrafica-*, .btn-add-cliente, .modale-cliente-*
 * ============================================================================ */

#erp-anagrafica-wrapper { background: var(--vrv-bg-card); padding: 20px 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin-bottom: 30px; }
.anagrafica-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.anagrafica-header h2 { margin: 0; font-size: 24px; font-weight: 500; color: var(--vrv-text-main); }
.btn-add-cliente { background: var(--vrv-bg-page); border: none; color: var(--vrv-text-main); padding: 10px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s;}
.btn-add-cliente:hover { background: var(--vrv-bg-page); }

.btn-modifica-cliente { background: var(--vrv-bg-hover); color: var(--vrv-text-body); border: 1px solid var(--vrv-border); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: 0.2s; }
.btn-modifica-cliente:hover { background: #e4e7ec; color: var(--vrv-text-main); }

.anagrafica-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; border: 1px solid var(--vrv-border-soft); }
.anagrafica-table th { padding: 12px; border-bottom: 2px solid #eaecf0; color: var(--vrv-text-strong); font-weight: 600; background: var(--vrv-bg-card-alt); }
.anagrafica-table td { padding: 12px; border-bottom: 1px solid var(--vrv-border-soft); color: var(--vrv-text-main); vertical-align: middle; }
.anagrafica-table tr:hover { background: var(--vrv-bg-card-alt); }

/* Stili Modali */
#modale-cliente-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(16, 24, 40, 0.5); z-index: 9998; backdrop-filter: blur(2px); }
.modale-cliente-finestra { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--vrv-bg-card); padding: 30px; border-radius: 8px; z-index: 9999; width: 650px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

/* Modifica UX pulsante di salvataggio ACF */
.acf-form-submit { margin-top: 20px; text-align: right; }
.acf-form-submit input[type="submit"] { background: var(--vrv-bg-page); color: var(--vrv-text-main); border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.acf-form-submit input[type="submit"]:hover { background: var(--vrv-bg-page); }

@media screen and (max-width: 768px) {
    .anagrafica-table { display: block; overflow-x: auto; white-space: nowrap; }
    .modale-cliente-finestra { width: 95%; padding: 15px; }
}

/* ============================================================================
 * 34. MODULO GESTIONE ORDINI
 *
 * Frontend ordini WooCommerce: stati, note, sollecito, fantasma.
 * Prefissi: .go-* (vedi shortcode)
 * ============================================================================ */

.erp-ord-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; max-width:1200px; }
    .erp-ord-wrap h2 { margin-top:0; color: var(--vrv-text-main); }
    .erp-ord-msg { padding:14px 18px; border-radius:8px; margin-bottom:18px; font-weight:600; }
    .erp-ord-msg.success { background: var(--vrv-success-bg); color: var(--vrv-success); }
    .erp-ord-msg.error   { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

    /* Stats */
    .erp-ord-stats { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:20px; }
    .erp-ord-stat { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:8px; padding:14px; }
    .erp-ord-stat .num { font-size:24px; font-weight:800; color: var(--vrv-text-main); line-height:1; }
    .erp-ord-stat .lbl { font-size:11px; color: var(--vrv-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:6px; }
    .erp-ord-stat.attesa  .num { color: var(--vrv-warning); }
    .erp-ord-stat.completato .num { color: var(--vrv-success); }
    .erp-ord-stat.cancellato .num { color: var(--vrv-danger); }
    .erp-ord-stat.processing .num { color: var(--vrv-accent); }

    /* Filtri */
    .erp-ord-filters { background: var(--vrv-bg-card-alt); border: 1px solid var(--vrv-border-soft); border-radius:8px; padding:16px; margin-bottom:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
    .erp-ord-filters label { display:flex; flex-direction:column; gap:4px; font-size:11px; color: var(--vrv-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
    .erp-ord-filters select, .erp-ord-filters input {
padding:8px 10px; border: 1px solid var(--vrv-border); border-radius:6px; font-size:14px; background: var(--vrv-bg-card); min-width:130px;
    }
    .erp-ord-filters button { padding:9px 18px; background: var(--vrv-bg-page); color: var(--vrv-text-main); border:none; border-radius:6px; font-weight:600; cursor:pointer; }
    .erp-ord-filters .reset-btn { background: var(--vrv-bg-hover); color: var(--vrv-text-body); text-decoration:none; padding:9px 18px; border-radius:6px; font-weight:600; }

    /* Tabella */
    .erp-ord-table { width:100%; border-collapse:collapse; background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:8px; overflow:hidden; }
    .erp-ord-table th { background: var(--vrv-bg-card-alt); text-align:left; padding:12px; font-size:11px; color: var(--vrv-text-strong); text-transform:uppercase; letter-spacing:0.5px; }
    .erp-ord-table td { padding:12px; border-top:1px solid #f0f0f0; font-size:14px; color: var(--vrv-text-body); vertical-align:top; }
    .erp-ord-table tr:hover td { background:#fafbfc; }

    /* Status badges */
    .erp-ord-status { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; text-transform:uppercase; }
    .erp-ord-status.pending,
    .erp-ord-status.on-hold     { background: var(--vrv-bg-warning-light); color: var(--vrv-warning); }
    .erp-ord-status.processing  { background:#cfe2ff; color: var(--vrv-accent); }
    .erp-ord-status.completed   { background: var(--vrv-success-bg); color: var(--vrv-success); }
    .erp-ord-status.cancelled,
    .erp-ord-status.failed,
    .erp-ord-status.refunded    { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

    /* Detail */
    .erp-ord-detail { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:8px; padding:24px; }
    .erp-ord-detail h3 { margin-top:24px; color: var(--vrv-text-body); font-size:14px; text-transform:uppercase; letter-spacing:0.5px; }
    .erp-ord-detail h3:first-child { margin-top:0; }
    .erp-ord-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; }
    .erp-ord-detail-box { background: var(--vrv-bg-card-alt); border: 1px solid var(--vrv-border-soft); border-radius:6px; padding:16px; }
    .erp-ord-detail-box p { margin:6px 0; color: var(--vrv-text-body); }
    .erp-ord-detail-box strong { color: var(--vrv-text-main); }

    .erp-ord-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; padding:16px; background: var(--vrv-bg-card-alt); border-radius:8px; }
    .erp-ord-actions form { display:inline-flex; gap:8px; align-items:center; }
    .erp-ord-actions button, .erp-ord-actions select, .erp-ord-actions a {
padding:8px 14px; border-radius:6px; font-size:13px; font-weight:600; border: 1px solid var(--vrv-border); background: var(--vrv-bg-card); color: var(--vrv-text-body); cursor:pointer; text-decoration:none;
    }
    .erp-ord-actions button.primary { background: var(--vrv-bg-page); color: var(--vrv-text-main); border-color: var(--vrv-accent); }
    .erp-ord-actions button.danger  { background: var(--vrv-danger-bg); color: var(--vrv-danger); border-color:var(--vrv-danger-bg); }

    .erp-ord-notes { margin-top:14px; }
    .erp-ord-note { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:6px; padding:12px; margin-bottom:8px; font-size:13px; }
    .erp-ord-note.is-customer { background: var(--vrv-bg-info); border-color:#b2ddff; }
    .erp-ord-note .meta { color: var(--vrv-text-muted); font-size:11px; margin-bottom:4px; }

    .erp-ord-back { color: var(--vrv-accent); text-decoration:none; font-weight:600; margin-bottom:14px; display:inline-block; }
    .erp-ord-back:hover { text-decoration:underline; }

    .erp-ord-empty { text-align:center; padding:40px; color: var(--vrv-text-faint); font-style:italic; }
    .erp-ord-link { color: var(--vrv-accent); text-decoration:none; font-weight:600; }
    .erp-ord-link:hover { text-decoration:underline; }

/* ============================================================================
 * 35. MODULO SOLIDITÀ FINANZIARIA
 *
 * Utile = margine acquisito − costi reali aziendali.
 * Prefissi: .sol-*
 * ============================================================================ */

#erp-solidita-wrapper {
    background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 40px; border-radius: 12px;
    margin-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); box-sizing: border-box;
}
#erp-solidita-wrapper *, #erp-solidita-wrapper *::before, #erp-solidita-wrapper *::after { box-sizing: border-box; }

.sol-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid var(--vrv-border-soft); padding-bottom: 18px; }
.sol-header h2 { color: var(--vrv-text-main); margin: 0 0 6px 0; font-size: 26px; font-weight: 600; }
.sol-header p { margin: 0; color: var(--vrv-text-faint); font-size: 14px; }

/* HERO UTILE */
.sol-hero {
    border-radius: 12px; padding: 28px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.sol-hero.positivo { background: var(--vrv-bg-card); border: 1px solid var(--vrv-success); }
.sol-hero.negativo { background: var(--vrv-bg-card); border: 1px solid var(--vrv-danger); }
.sol-hero-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.sol-hero.positivo .sol-hero-label { color: var(--vrv-success); }
.sol-hero.negativo .sol-hero-label { color: var(--vrv-danger); }
.sol-hero-val { font-size: 42px; font-weight: 800; line-height: 1; color: var(--vrv-text-main); }
.sol-hero-formula { font-size: 12px; color: var(--vrv-text-faint); margin-top: 8px; }

/* KPI grid */
.sol-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.sol-kpi { background: var(--vrv-bg-card); border-radius: 10px; padding: 22px; border: 1px solid var(--vrv-border); }
.sol-kpi.margine { border-top: 4px solid var(--vrv-success); }
.sol-kpi.costi   { border-top: 4px solid var(--vrv-danger); }
.sol-kpi-label { font-size: 11px; font-weight: 700; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.sol-kpi-val { font-size: 28px; font-weight: 800; color: var(--vrv-text-main); }
.sol-kpi.margine .sol-kpi-val { color: var(--vrv-success); }
.sol-kpi.costi .sol-kpi-val { color: var(--vrv-danger); }
.sol-kpi-detail { font-size: 11px; color: var(--vrv-text-faint); margin-top: 8px; line-height: 1.5; }

/* Sezione costi */
.sol-costi-box { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); border-radius: 10px; padding: 22px; }
.sol-costi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sol-costi-header h3 { color: var(--vrv-text-main); margin: 0; font-size: 16px; font-weight: 700; }
.sol-costi-header h3 small { font-size: 11px; color: var(--vrv-text-faint); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; }
.btn-add-costo {
    background: var(--vrv-accent); color: #fff; border: none; padding: 8px 16px;
    border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px;
    transition: 0.2s;
}
.btn-add-costo:hover { background: var(--vrv-bg-page); }

.sol-filtri { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.sol-filtri input, .sol-filtri select {
    background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main);
    padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none; font-family: inherit;
}
.sol-filtri input:focus, .sol-filtri select:focus { border-color: var(--vrv-accent); }
.sol-filtri input[type="text"] { flex: 1; min-width: 200px; }

.sol-table-wrap { max-height: 420px; overflow-y: auto; }
.sol-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sol-table th { text-align: left; padding: 10px 12px; color: var(--vrv-text-faint); border-bottom: 1px solid var(--vrv-border-soft); font-weight: 700; position: sticky; top: 0; background: var(--vrv-bg-card); z-index: 2; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.sol-table td { padding: 11px 12px; border-bottom: 1px solid var(--vrv-border-soft); color: var(--vrv-text-body); vertical-align: middle; }
.sol-table tr:hover td { background: var(--vrv-bg-card-alt); }
.sol-cat-badge { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--vrv-bg-card-alt); color: var(--vrv-text-body); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.sol-importo { font-weight: 800; color: var(--vrv-danger); font-variant-numeric: tabular-nums; }
.sol-mini-btn { background: transparent; border: 1px solid; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: 0.2s; }
.sol-mini-btn.edit { color: var(--vrv-text-faint); border-color: var(--vrv-text-strong); }
.sol-mini-btn.edit:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.sol-mini-btn.del { color: var(--vrv-danger); border-color: var(--vrv-danger); }
.sol-mini-btn.del:hover { background: var(--vrv-danger-bg); }

.sol-totale-bar { border-top: 2px solid var(--vrv-border); padding: 14px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; }

/* Modale */
#sol-modale-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(16, 24, 40, 0.5); z-index: 9998; backdrop-filter: blur(2px); }
#sol-modale { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--vrv-bg-card); padding: 28px; border-radius: 10px; z-index: 9999; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; color: var(--vrv-text-main); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.2); }
#sol-modale h3 { margin: 0 0 18px 0; padding-bottom: 14px; border-bottom: 1px solid var(--vrv-border-soft); font-size: 18px; }
.sol-form-group { margin-bottom: 14px; }
.sol-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--vrv-text-body); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.sol-form-group input, .sol-form-group select, .sol-form-group textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--vrv-border); border-radius: 6px;
    font-size: 14px; outline: none; font-family: inherit;
}
.sol-form-group input:focus, .sol-form-group select:focus, .sol-form-group textarea:focus {
    border-color: var(--vrv-accent); box-shadow: 0 0 0 3px var(--vrv-accent-soft);
}
.sol-form-group textarea { resize: vertical; min-height: 60px; }
.sol-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sol-modale-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vrv-border-soft); }
.sol-btn-salva { background: var(--vrv-accent); color: #fff; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.sol-btn-salva:hover { background: var(--vrv-accent-hover); }
.sol-btn-salva:disabled { background: var(--vrv-bg-card-alt); color: var(--vrv-text-faint); cursor: not-allowed; }
.sol-btn-annulla { background: transparent; color: var(--vrv-text-strong); border: 1px solid var(--vrv-border); padding: 10px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.sol-msg-errore { display: none; background: var(--vrv-danger-bg); color: var(--vrv-danger); border: 1px solid var(--vrv-danger); padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }

/* Toast */
#sol-toast { position: fixed; top: 24px; right: 24px; z-index: 10000; background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 14px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10); display: none; animation: solToastIn 0.3s ease; }
#sol-toast.errore { background: var(--vrv-danger); }
@keyframes solToastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 768px) {
    .sol-kpi-grid { grid-template-columns: 1fr; }
    .sol-form-2col { grid-template-columns: 1fr; }
    .sol-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
    #erp-solidita-wrapper { padding: 20px; }
}

/* ============================================================================
 * 36. MODULO ANDAMENTO MENSILE
 *
 * Grafico Entrate vs Uscite + tabella dettaglio mese per mese.
 * Prefissi: .and-*
 * ============================================================================ */

#erp-andamento-wrapper {
    background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 40px; border-radius: 12px;
    margin-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); box-sizing: border-box;
}
#erp-andamento-wrapper *, #erp-andamento-wrapper *::before, #erp-andamento-wrapper *::after { box-sizing: border-box; }

.and-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid var(--vrv-border-soft); padding-bottom: 18px; }
.and-header h2 { color: var(--vrv-text-main); margin: 0 0 6px 0; font-size: 26px; font-weight: 600; }
.and-header p { margin: 0; color: var(--vrv-text-faint); font-size: 14px; }

/* Filtri */
.and-filtri-bar {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
    background: var(--vrv-bg-card); padding: 18px 20px; border-radius: 10px;
    border: 1px solid var(--vrv-border); margin-bottom: 22px;
}
.and-filtro-item { display: flex; flex-direction: column; }
.and-filtro-item label { font-size: 11px; color: var(--vrv-text-faint); text-transform: uppercase; font-weight: 700; letter-spacing: 0.4px; margin-bottom: 6px; }
.and-filtro-item input, .and-filtro-item select {
    background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main);
    padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none;
    font-family: inherit; min-width: 140px;
}
.and-filtro-item input:focus, .and-filtro-item select:focus { border-color: var(--vrv-accent); }
.and-filtro-item input[type="date"] { color-scheme: dark; }
.and-preset-btn {
    background: var(--vrv-bg-page); color: var(--vrv-text-faint); border: 1px solid var(--vrv-border);
    padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: 0.15s; font-family: inherit;
}
.and-preset-btn:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.and-preset-btn.attivo { background: var(--vrv-bg-page); color: var(--vrv-text-main); border-color: var(--vrv-accent); }

/* Hero risposta */
.and-hero {
    border-radius: 12px; padding: 28px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 30px;
}
.and-hero.positivo { background: var(--vrv-bg-card); border: 2px solid var(--vrv-success); }
.and-hero.negativo { background: var(--vrv-bg-card); border: 2px solid var(--vrv-danger); }
.and-hero-status { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.and-hero.positivo .and-hero-status { color: var(--vrv-success); }
.and-hero.negativo .and-hero-status { color: var(--vrv-danger); }
/* le icone status sono ora in HTML, non più ::before */
.and-hero-msg { font-size: 22px; font-weight: 700; color: var(--vrv-text-main); line-height: 1.2; }
.and-hero-stats { text-align: right; }
.and-hero-stats-row { font-size: 13px; color: var(--vrv-text-faint); margin-bottom: 4px; }
.and-hero-stats-row strong { color: var(--vrv-text-main); font-weight: 700; font-size: 14px; }
.and-hero-bilancio { font-size: 32px; font-weight: 800; line-height: 1; margin-top: 6px; }
.and-hero.positivo .and-hero-bilancio { color: var(--vrv-success); }
.and-hero.negativo .and-hero-bilancio { color: var(--vrv-danger); }
.and-hero-perc { font-size: 13px; margin-top: 4px; }
.and-hero.positivo .and-hero-perc { color: var(--vrv-success); }
.and-hero.negativo .and-hero-perc { color: var(--vrv-danger); }

/* Grafico */
.and-grafico-box {
    background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); border-radius: 10px;
    padding: 22px; margin-bottom: 24px;
}
.and-grafico-box h3 { margin: 0 0 16px 0; font-size: 13px; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
#and-chart-canvas { max-height: 300px; }

/* Tabella mensile */
.and-tabella-box { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); border-radius: 10px; padding: 22px; }
.and-tabella-box h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 700; }
.and-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.and-table th { text-align: left; padding: 10px 14px; color: var(--vrv-text-faint); border-bottom: 1px solid var(--vrv-border-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
.and-table td { padding: 12px 14px; border-bottom: 1px solid var(--vrv-border-soft); vertical-align: middle; color: var(--vrv-text-body); }
.and-table tr.row-mese { cursor: pointer; transition: 0.15s; }
.and-table tr.row-mese:hover { background: var(--vrv-bg-card-alt); }
.and-table tr.row-mese.aperta { background: var(--vrv-bg-card-alt); }
.and-mese-label { font-weight: 700; color: var(--vrv-text-main); }
.and-importo-e { color: var(--vrv-success); font-weight: 700; font-variant-numeric: tabular-nums; }
.and-importo-u { color: var(--vrv-danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.and-bilancio-cell { font-weight: 800; font-variant-numeric: tabular-nums; }
.and-bilancio-cell.positivo { color: var(--vrv-success); }
.and-bilancio-cell.negativo { color: var(--vrv-danger); }
.and-delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.and-delta.up { color: var(--vrv-success); }
.and-delta.down { color: var(--vrv-danger); }
.and-delta.neutral { color: var(--vrv-text-faint); }
.and-toggle { font-size: 12px; color: var(--vrv-text-faint); transition: transform 0.2s; display: inline-block; }
tr.row-mese.aperta .and-toggle { transform: rotate(90deg); }

.and-dettaglio { background: var(--vrv-bg-page); }
.and-dettaglio td { padding: 18px 22px; border-bottom: 1px solid var(--vrv-border-soft); }
.and-dett-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.and-dett-col h4 { margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--vrv-text-faint); font-weight: 700; }
.and-dett-col h4.entrate { color: var(--vrv-success); }
.and-dett-col h4.uscite  { color: var(--vrv-danger); }
.and-cat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--vrv-border-soft); font-size: 13px; }
.and-cat-row:last-child { border-bottom: none; }
.and-cat-name { color: var(--vrv-text-body); }
.and-cat-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.and-cat-val.entrate { color: var(--vrv-success); }
.and-cat-val.uscite  { color: var(--vrv-danger); }

/* Stato vuoto */
.and-empty {
    background: var(--vrv-bg-card); border: 1px dashed var(--vrv-border); border-radius: 10px;
    padding: 60px 30px; text-align: center; color: var(--vrv-text-faint);
}
.and-empty h3 { margin: 0 0 10px 0; color: var(--vrv-text-body); font-size: 18px; }
.and-empty p { margin: 0; font-size: 14px; }

@media (max-width: 768px) {
    #erp-andamento-wrapper { padding: 20px; }
    .and-hero { flex-direction: column; align-items: flex-start; }
    .and-hero-stats { text-align: left; width: 100%; }
    .and-dett-grid { grid-template-columns: 1fr; }
    .and-table { font-size: 12px; }
    .and-table th, .and-table td { padding: 8px 6px; }
}

/* ============================================================================
 * 37. MODULO ENTRATE / USCITE
 *
 * Importazione XLSX BNL, movimenti, cassa, grafico saldo.
 * Prefissi: .fin-*, .btn-importa, .btn-svuota, .carta-*
 * ============================================================================ */

#erp-finanza-wrapper { background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 40px; border-radius: 12px; margin-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); box-sizing: border-box; }
#erp-finanza-wrapper *, #erp-finanza-wrapper *::before, #erp-finanza-wrapper *::after { box-sizing: border-box; }
.fin-header { border-bottom: 1px solid var(--vrv-border-soft); padding-bottom: 20px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
.fin-header h2 { margin: 0 0 5px 0; font-size: 26px; color: var(--vrv-text-main); font-weight: 600; }
.fin-header p { margin: 0; color: var(--vrv-text-faint); font-size: 14px; }

.fin-upload-box { background: var(--vrv-bg-card); padding: 22px; border-radius: 10px; border: 1px dashed var(--vrv-border); margin-bottom: 14px; display: flex; gap: 18px; align-items: flex-end; }
.fin-upload-box select, .fin-upload-box input[type="file"] { background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main); padding: 10px; border-radius: 6px; font-size: 14px; width: 100%; }
.fin-upload-box select:focus, .fin-upload-box input[type="file"]:focus { outline: none; border-color: var(--vrv-accent); }
.btn-importa { background: var(--vrv-bg-card); color: var(--vrv-text-main); border: 1px solid var(--vrv-border); padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.btn-importa:hover { background: var(--vrv-bg-card-alt); border-color: var(--vrv-text-faint); }
.btn-svuota { background: transparent; color: var(--vrv-danger); border: 1px solid var(--vrv-danger); padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-svuota:hover { background: var(--vrv-danger-bg); }
.btn-svuota-prep { background: transparent; color: var(--vrv-text-faint); border: 1px solid var(--vrv-border); padding: 8px 15px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-svuota-prep:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-body); }

/* Card SALDI in evidenza */
.saldi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin: 18px 0 14px 0; }

/* Selettore periodo */
.periodo-selector {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    background: var(--vrv-bg-card); padding: 16px 20px; border-radius: 10px;
    border: 1px solid var(--vrv-border); margin-top: 26px;
}
.periodo-dropdown {
    background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main);
    padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 600;
    cursor: pointer; outline: none; min-width: 280px;
}
.periodo-dropdown:focus { border-color: var(--vrv-accent); }
.periodo-custom-input {
    background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main);
    padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none;
    color-scheme: dark;
}
.periodo-custom-input:focus { border-color: var(--vrv-accent); }
.saldo-card { background: var(--vrv-bg-card); padding: 22px; border-radius: 10px; border: 1px solid var(--vrv-border); text-align: center; display: flex; flex-direction: column; }
.saldo-card.iniziale { border-top: 3px solid #98a2b3; }
.saldo-card.entrate  { border-top: 3px solid #32d583; }
.saldo-card.uscite   { border-top: 3px solid var(--vrv-danger); }
.saldo-card.finale   { border-top: 3px solid var(--vrv-accent); background: var(--vrv-bg-card); }
.saldo-card.finale.warning { background: var(--vrv-bg-card); border-top-color: var(--vrv-warning); }
.saldo-card-label { font-size: 11px; font-weight: 700; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.saldo-card-val { font-size: 22px; font-weight: 800; color: var(--vrv-text-main); }
.saldo-card-val.verde { color: var(--vrv-success); }
.saldo-card-val.rosso { color: var(--vrv-danger); }
.saldo-card-sub { font-size: 11px; color: var(--vrv-text-faint); margin-top: 6px; }

.quadratura-bar { padding: 12px 18px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 600; }
.quadratura-ok { background: rgba(50,213,131,0.1); color: var(--vrv-success); border: 1px solid rgba(50,213,131,0.3); }
.quadratura-ko { background: rgba(245,166,35,0.1); color: var(--vrv-warning); border: 1px solid rgba(245,166,35,0.3); }

.fin-cassa-box { background: var(--vrv-bg-card); border-radius: 12px; border: 1px solid var(--vrv-border); overflow: hidden; margin-bottom: 26px; }
.fin-cassa-header { padding: 24px; border-bottom: 1px solid var(--vrv-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.fin-cassa-title { font-size: 18px; font-weight: 700; color: var(--vrv-text-main); margin: 0; }
.fin-cassa-subtitle { font-size: 12px; color: var(--vrv-text-faint); font-weight: 400; display: block; margin-top: 5px; }

.fin-grafico-andamento { padding: 24px; border-bottom: 1px solid var(--vrv-border-soft); }
.fin-grafico-andamento h4 { margin: 0 0 14px 0; font-size: 13px; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
#grafico-andamento-conto { max-height: 240px; }

.fin-filtri-conto { background: var(--vrv-bg-page); border-bottom: 1px solid var(--vrv-border-soft); padding: 18px 24px; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.fin-filtro-item { display: flex; flex-direction: column; }
.fin-filtro-item label { font-size: 10px; color: var(--vrv-text-faint); text-transform: uppercase; margin-bottom: 5px; font-weight: 600; letter-spacing: 0.3px; }
.fin-filtro-item input[type="date"], .fin-filtro-item input[type="text"], .fin-filtro-item select { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); color: var(--vrv-text-main); padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none; transition: border-color 0.15s; }
.fin-filtro-item input:focus, .fin-filtro-item select:focus { border-color: var(--vrv-accent); }
.fin-filtro-item input[type="date"] { color-scheme: dark; min-width: 140px; }
.fin-filtro-item input[type="text"] { min-width: 220px; }
.fin-filtro-item select { min-width: 140px; cursor: pointer; }
.btn-reset-filtri { background: transparent; color: var(--vrv-text-faint); border: 1px solid var(--vrv-border); padding: 8px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; height: 36px; }
.btn-reset-filtri:hover { background: var(--vrv-bg-card); color: var(--vrv-text-main); }

.fin-totali-filtro { background: var(--vrv-bg-card-alt); padding: 18px 24px; border-bottom: 1px solid var(--vrv-border-soft); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fin-totali-filtro.attivo { background: var(--vrv-accent-soft); }
.fin-totale-cella { display: flex; flex-direction: column; }
.fin-totale-cella .lbl { font-size: 10px; color: var(--vrv-text-faint); text-transform: uppercase; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 4px; }
.fin-totale-cella .val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--vrv-text-main); }
.fin-totale-cella .val.verde { color: var(--vrv-success); }
.fin-totale-cella .val.rosso { color: var(--vrv-danger); }
.fin-totale-cella .val.azzurro { color: var(--vrv-accent); }
.fin-totale-cella .badge-stato { font-size: 10px; color: var(--vrv-text-faint); margin-top: 4px; font-weight: 500; }
.fin-totali-filtro.attivo .fin-totale-cella .badge-stato { color: var(--vrv-accent); }

.fin-table-wrap { max-height: 420px; overflow-y: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th { text-align: left; padding: 12px 18px; color: var(--vrv-text-faint); border-bottom: 1px solid var(--vrv-border-soft); font-weight: 600; position: sticky; top: 0; background: var(--vrv-bg-page); z-index: 2; }
.fin-table td { padding: 12px 18px; border-bottom: 1px solid var(--vrv-border-soft); color: var(--vrv-text-body); vertical-align: middle; }
.fin-table tr:hover td { background: var(--vrv-bg-card-alt); }

.badge-tipo.entrata { background: rgba(50, 213, 131, 0.15); color: var(--vrv-success); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.badge-tipo.uscita { background: var(--vrv-danger-bg); color: var(--vrv-danger); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.desc-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }

.btn-modifica-trans, .btn-elimina-trans { padding: 5px 9px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.2s; background: transparent; border: 1px solid; }
.btn-modifica-trans { color: var(--vrv-text-faint); border-color: var(--vrv-text-strong); margin-right: 4px; }
.btn-modifica-trans:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.btn-elimina-trans { color: var(--vrv-danger); border-color: var(--vrv-danger); }
.btn-elimina-trans:hover { background: var(--vrv-danger-bg); }

.grid-carta { display: grid; grid-template-columns: 1.2fr 2fr; gap: 20px; padding: 22px; }
.carta-search-input { width: 100%; padding: 11px; background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main); border-radius: 6px; font-size: 14px; margin-bottom: 14px; }
.carta-search-input:focus { border-color: var(--vrv-warning); outline: none; }

#modale-transazione-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9998; backdrop-filter: blur(2px); }
.modale-transazione-finestra { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--vrv-bg-card); padding: 30px; border-radius: 8px; z-index: 9999; width: 550px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(16, 24, 40, 0.10); color: var(--vrv-text-main); }
.modale-transazione-finestra h3 { margin-top:0; border-bottom: 1px solid var(--vrv-border-soft); padding-bottom:15px; margin-bottom:20px; font-size:20px; color: var(--vrv-text-main); }

@media screen and (max-width: 1024px) {
    .saldi-grid { grid-template-columns: 1fr 1fr; }
    .fin-totali-filtro { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 768px) {
    #erp-finanza-wrapper { padding: 20px; }
    .fin-upload-box { flex-direction: column; align-items: stretch; }
    .grid-carta { grid-template-columns: 1fr; }
    .saldi-grid, .fin-totali-filtro { grid-template-columns: 1fr; }
    .desc-cell { max-width: 220px; white-space: normal; }
}

/* ============================================================================
 * 38. MODULO TRANCHE FATTURAZIONE
 *
 * Pianificazione mensile delle tranche di fatturazione clienti.
 * Prefissi: .trf-*
 * ============================================================================ */

.trf-wrap { font-family:inherit; color: var(--vrv-text-main); }

    .trf-header {
background: var(--vrv-bg-card); padding:14px 18px; border-radius:10px;
border: 1px solid var(--vrv-border-soft); margin-bottom:16px;
box-shadow:0 1px 3px rgba(0,0,0,0.03);
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    }
    .trf-title { font-size:18px; font-weight:700; color: var(--vrv-text-main); margin:0; }
    .trf-anno-select {
padding:7px 12px; border: 1px solid var(--vrv-border); border-radius:6px;
font-size:14px; background: var(--vrv-bg-card); cursor:pointer; outline:none;
    }
    .trf-anno-select:focus { border-color: var(--vrv-accent); }
    .trf-btn-add {
background: var(--vrv-accent); color: #fff; border:none; border-radius:6px;
padding:8px 16px; font-weight:700; cursor:pointer; font-size:13px;
margin-left:auto;
    }
    .trf-btn-add:hover { background: var(--vrv-bg-page); }

    .trf-batch-toggle {
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:6px; cursor:pointer;
background: var(--vrv-bg-card-alt); border: 1px solid var(--vrv-border);
font-size:13px; font-weight:600; color: var(--vrv-text-strong);
user-select:none;
    }
    .trf-batch-toggle input { cursor:pointer; }
    .trf-batch-toggle:has(input:checked) {
background:#fef3c7; border-color:#f59e0b; color:#92400e;
    }
    .trf-btn-batch-save {
background:#f59e0b; color: var(--vrv-text-main); border:none; border-radius:6px;
padding:8px 16px; font-weight:700; cursor:pointer; font-size:13px;
    }
    .trf-btn-batch-save:hover { background:#d97706; }
    .trf-btn-batch-save:disabled { opacity:0.5; cursor:not-allowed; }

    .trf-hint {
background:#fef3c7; border:1px solid #fde68a; color:#92400e;
padding:8px 14px; border-radius:6px; margin-bottom:12px;
font-size:12px; font-weight:600;
    }

    /* Cella "dirty" (modificata in batch, non ancora salvata) */
    .trf-cell.dirty {
position:relative;
outline:2px dashed #f59e0b !important;
outline-offset:-2px;
    }
    .trf-cell.dirty::before {
content:''; position:absolute; top:3px; right:3px;
width:8px; height:8px; background:#f59e0b; border-radius:50%;
    }

    /* Animazione "saved" sul cambio cella */
    .trf-cell.saved-flash {
animation: trfSavedFlash 0.6s ease;
    }
    @keyframes trfSavedFlash {
0%   { box-shadow:inset 0 0 0 3px var(--vrv-success); }
100% { box-shadow:inset 0 0 0 0   transparent; }
    }

    .trf-summary {
display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
margin-bottom:16px;
    }
    .trf-summary-card {
background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:10px;
padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,0.03);
    }
    .trf-summary-label {
font-size:11px; font-weight:700; color: var(--vrv-text-muted);
text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;
    }
    .trf-summary-value { font-size:20px; font-weight:700; color: var(--vrv-text-main); }
    .trf-summary-card.totale { border-left:4px solid var(--vrv-accent); }
    .trf-summary-card.previsto { border-left:4px solid #98a2b3; }
    .trf-summary-card.fatturato { border-left:4px solid var(--vrv-warning); }
    .trf-summary-card.pagato { border-left:4px solid var(--vrv-success); }
    @media (max-width:700px) { .trf-summary { grid-template-columns:repeat(2,1fr); } }

    .trf-table-wrap {
background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:10px;
overflow:auto; box-shadow:0 1px 3px rgba(0,0,0,0.03);
    }
    .trf-table {
border-collapse:collapse; width:100%; min-width:1100px;
font-size:13px;
    }
    .trf-table th, .trf-table td {
padding:8px 10px; border-bottom:1px solid #f2f4f7;
border-right:1px solid #f2f4f7; text-align:right; white-space:nowrap;
    }
    .trf-table th {
background: var(--vrv-bg-card-alt); font-weight:700; color: var(--vrv-text-strong);
font-size:11px; text-transform:uppercase; letter-spacing:0.4px;
position:sticky; top:0; z-index:5;
    }
    .trf-table th.trf-th-cliente, .trf-table td.trf-td-cliente {
text-align:left; position:sticky; left:0; background: var(--vrv-bg-card);
z-index:6; font-weight:600; color: var(--vrv-text-main);
border-right:2px solid #eaecf0; min-width:180px;
    }
    .trf-table th.trf-th-cliente { background: var(--vrv-bg-card-alt); z-index:7; }
    .trf-table tbody tr:hover td:not(.trf-td-cliente) { background: var(--vrv-bg-card-alt); }
    .trf-table tbody tr:hover td.trf-td-cliente { background: var(--vrv-bg-card-alt); }

    .trf-cell {
cursor:pointer; transition:all 0.15s; min-width:80px;
position:relative;
    }
    .trf-cell.empty { color: var(--vrv-text-body); }
    .trf-cell.empty:hover { background: var(--vrv-accent-soft) !important; color: var(--vrv-accent); }
    .trf-cell.empty:hover::after {
content:'+'; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); font-size:18px; color: var(--vrv-accent);
    }
    .trf-cell.empty:hover { color:transparent; }

    .trf-cell.prevista  { background:#fafbfc; color: var(--vrv-text-strong); }
    .trf-cell.fatturata { background: var(--vrv-bg-warning-light); color: var(--vrv-warning); font-weight:600; }
    .trf-cell.pagata    { background: var(--vrv-success-bg); color: var(--vrv-success); font-weight:600; }
    .trf-cell:hover { box-shadow:inset 0 0 0 2px var(--vrv-accent); }

    .trf-row-totale td {
background: var(--vrv-bg-card-alt) !important; font-weight:700;
border-top:2px solid #eaecf0;
    }
    .trf-col-totale {
background: var(--vrv-bg-card-alt); font-weight:700; color: var(--vrv-text-main);
border-left:2px solid #eaecf0;
    }

    /* Modale */
    .trf-modal-overlay {
position:fixed; inset:0; background:rgba(16,24,40,0.65);
z-index:99998; backdrop-filter:blur(4px); display:none;
align-items:center; justify-content:center;
    }
    .trf-modal-overlay.open { display:flex; }
    .trf-modal {
background: var(--vrv-bg-card); border-radius:12px; width:520px; max-width:96vw;
max-height:93vh; overflow:auto; display:flex; flex-direction:column;
box-shadow:0 20px 60px rgba(16, 24, 40, 0.10);
    }
    .trf-modal-head {
padding:16px 22px; border-bottom: 1px solid var(--vrv-border-soft); background: var(--vrv-bg-card-alt);
display:flex; justify-content:space-between; align-items:center;
    }
    .trf-modal-head h3 { margin:0; font-size:16px; font-weight:700; }
    .trf-modal-close {
background:transparent; border:none; font-size:24px; cursor:pointer; color: var(--vrv-text-faint);
    }
    .trf-modal-body { padding:20px; }
    .trf-modal-foot {
padding:14px 20px; border-top: 1px solid var(--vrv-border-soft); background: var(--vrv-bg-card-alt);
display:flex; justify-content:space-between; align-items:center; gap:10px;
    }
    .trf-modal-foot-right { display:flex; gap:10px; }

    .trf-label {
display:block; font-size:12px; font-weight:700; color: var(--vrv-text-body);
margin-bottom:5px; margin-top:14px;
    }
    .trf-label:first-child { margin-top:0; }
    .trf-input, .trf-select, .trf-textarea {
width:100%; padding:9px 12px; border: 1px solid var(--vrv-border); border-radius:6px;
font-family:inherit; font-size:14px; outline:none; box-sizing:border-box;
    }
    .trf-input:focus, .trf-select:focus, .trf-textarea:focus { border-color: var(--vrv-accent); }
    .trf-textarea { min-height:60px; resize:vertical; }
    .trf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    .trf-stato-pills { display:flex; gap:8px; }
    .trf-stato-pill {
flex:1; padding:8px 10px; border-radius:6px; cursor:pointer;
text-align:center; font-size:12px; font-weight:700;
border:2px solid transparent; transition:all 0.15s;
background: var(--vrv-bg-card-alt); color: var(--vrv-text-muted);
    }
    .trf-stato-pill.selected[data-val="prevista"]  { background: var(--vrv-bg-card-alt); border-color: var(--vrv-text-faint); color: var(--vrv-text-strong); }
    .trf-stato-pill.selected[data-val="fatturata"] { background: var(--vrv-bg-warning-light); border-color:var(--vrv-warning); color: var(--vrv-warning); }
    .trf-stato-pill.selected[data-val="pagata"]    { background: var(--vrv-success-bg); border-color: var(--vrv-success); color: var(--vrv-success); }

    .trf-btn { padding:9px 18px; border-radius:6px; font-weight:700; font-size:14px; cursor:pointer; border:none; }
    .trf-btn-salva   { background: var(--vrv-bg-card); color: var(--vrv-text-main); }
    .trf-btn-salva:hover { background: var(--vrv-bg-page); }
    .trf-btn-annulla { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); color: var(--vrv-text-body); font-weight:600; }
    .trf-btn-elimina { background:transparent; border:1px solid var(--vrv-danger-bg); color: var(--vrv-danger); font-size:12px; padding:6px 12px; }
    .trf-btn-elimina:hover { background: var(--vrv-danger-bg); }

    .trf-empty {
text-align:center; padding:40px 20px; color: var(--vrv-text-muted);
background: var(--vrv-bg-card); border: 1px solid var(--vrv-border-soft); border-radius:10px;
    }

/* ============================================================================
 * 39. MODULO CALCTAPE
 *
 * Calcolatrice rapida a nastro (helper UI di Previsioni di Cassa).
 * Prefissi: .calctape-*
 * ============================================================================ */

/* =========================================================
       CALCTAPE — tema scuro coerente con Previsioni Future
       ========================================================= */
    .calctape-box {
background: var(--vrv-bg-card);
border: 1px solid var(--vrv-border);
border-radius: 8px;
padding: 24px;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
    }
    .calctape-box * { box-sizing: border-box; }

    .calctape-box h3 {
margin: 0 0 14px 0;
font-size: 13px;
font-weight: 700;
color: var(--vrv-text-faint);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
    }
    .calctape-hint {
font-size: 10px;
color: var(--vrv-text-muted);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
    }

    /* Lista righe (la "striscia") */
    .calctape-tape {
flex: 1;
background: var(--vrv-bg-page);
border: 1px solid var(--vrv-border);
border-radius: 6px;
padding: 8px;
max-height: 320px;
overflow-y: auto;
margin-bottom: 12px;
    }
    .calctape-tape::-webkit-scrollbar { width: 8px; }
    .calctape-tape::-webkit-scrollbar-track { background: var(--vrv-bg-page); }
    .calctape-tape::-webkit-scrollbar-thumb { background: var(--vrv-bg-card-alt); border-radius: 4px; }

    .calctape-row {
display: grid;
grid-template-columns: minmax(0, 2.2fr) 100px 95px 28px;
gap: 6px;
align-items: center;
padding: 4px 0;
border-bottom: 1px dashed rgba(52, 64, 84, 0.6);
    }
    .calctape-row:last-child { border-bottom: none; }

    .calctape-row input.calctape-desc,
    .calctape-row input.calctape-amt {
background: transparent;
border: 1px solid transparent;
color: var(--vrv-text-main);
padding: 6px 8px;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
outline: none;
width: 100%;
transition: border-color 0.15s, background 0.15s;
    }
    .calctape-row input.calctape-desc:hover,
    .calctape-row input.calctape-amt:hover {
background: rgba(255,255,255,0.03);
    }
    .calctape-row input.calctape-desc:focus,
    .calctape-row input.calctape-amt:focus {
border-color: var(--vrv-accent);
background: var(--vrv-bg-card);
    }
    .calctape-row input.calctape-desc::placeholder,
    .calctape-row input.calctape-amt::placeholder {
color: var(--vrv-text-strong);
    }

    .calctape-row input.calctape-amt {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 700;
    }
    .calctape-row input.calctape-amt.pos { color: var(--vrv-success); }
    .calctape-row input.calctape-amt.neg { color: var(--vrv-danger); }

    .calctape-running {
text-align: right;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--vrv-text-faint);
font-weight: 600;
padding: 0 6px;
white-space: nowrap;
    }
    .calctape-running.pos { color: var(--vrv-success); }
    .calctape-running.neg { color: var(--vrv-danger); }

    .calctape-row-del {
background: transparent;
border: none;
color: var(--vrv-text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 14px;
line-height: 1;
transition: 0.15s;
    }
    .calctape-row-del:hover {
background: var(--vrv-danger-bg);
color: var(--vrv-danger);
    }

    /* Totale */
    .calctape-total {
background: var(--vrv-bg-page);
border: 1px solid var(--vrv-border);
border-radius: 6px;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
    }
    .calctape-total-label {
font-size: 11px;
font-weight: 700;
color: var(--vrv-text-faint);
text-transform: uppercase;
letter-spacing: 0.5px;
    }
    .calctape-total-value {
font-size: 22px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--vrv-text-main);
    }
    .calctape-total-value.pos { color: var(--vrv-success); }
    .calctape-total-value.neg { color: var(--vrv-danger); }

    /* Action bar */
    .calctape-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
    }
    .calctape-btn {
background: var(--vrv-bg-page);
color: var(--vrv-text-body);
border: 1px solid var(--vrv-border);
padding: 7px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
    }
    .calctape-btn:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
    .calctape-btn.primary {
background: var(--vrv-bg-page);
border-color: var(--vrv-accent);
color: var(--vrv-text-main);
    }
    .calctape-btn.primary:hover { background: var(--vrv-bg-page); border-color: var(--vrv-accent-hover); }
    .calctape-btn.danger { color: var(--vrv-danger); }
    .calctape-btn.danger:hover { background: var(--vrv-danger-bg); color: var(--vrv-danger-bg); }
    .calctape-btn .calctape-btn-mini {
font-size: 10px;
color: var(--vrv-text-faint);
font-weight: 500;
margin-left: 2px;
    }
    .calctape-btn:hover .calctape-btn-mini { color: var(--vrv-text-body); }

    .calctape-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--vrv-bg-page);
color: var(--vrv-text-main);
padding: 10px 18px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
z-index: 10001;
box-shadow: 0 6px 20px rgba(16, 24, 40, 0.2);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
    }
    .calctape-toast.show { opacity: 1; }

    /* Wrapper a 2 colonne (timeline + calctape) */
    .prev-toolarea-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 20px;
margin-bottom: 22px;
align-items: stretch;
    }
    .prev-toolarea-grid > .prev-timeline-wrapper,
    .prev-toolarea-grid > .calctape-box {
margin-bottom: 0;
    }

    @media (max-width: 1100px) {
.prev-toolarea-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
.calctape-row { grid-template-columns: minmax(0, 1fr) 90px 28px; }
.calctape-running { display: none; }
.calctape-total-value { font-size: 18px; }
    }

/* ============================================================================
 * 40. MODULO PREVISIONI DI CASSA
 *
 * Timeline cashflow cumulativo, voci con affidabilità.
 * Prefissi: .prev-*
 * ============================================================================ */

#erp-previsioni-wrapper {
    background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 40px; border-radius: 12px;
    margin-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10); box-sizing: border-box;
}
#erp-previsioni-wrapper *, #erp-previsioni-wrapper *::before, #erp-previsioni-wrapper *::after { box-sizing: border-box; }

.prev-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--vrv-border-soft); padding-bottom: 18px; }
.prev-header-testo h2 { margin: 0 0 8px 0; font-size: 28px; font-weight: 600; color: var(--vrv-text-main); }
.prev-header-testo p { margin: 0; color: var(--vrv-text-faint); font-size: 14px; }

.prev-timeline-wrapper { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); border-radius: 8px; padding: 24px; margin-bottom: 22px; }
.prev-timeline-wrapper h3 { margin: 0 0 14px 0; font-size: 13px; font-weight: 700; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
#prev-chart-canvas { max-height: 280px; }

/* Filtri (affidabilità + periodo) */
.prev-filtro-aff, .prev-filtro-periodo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--vrv-bg-card); padding: 14px 18px; border-radius: 8px;
    border: 1px solid var(--vrv-border); margin-bottom: 14px;
}
.prev-filtro-aff-label, .prev-filtro-periodo-label {
    font-size: 11px; color: var(--vrv-text-faint); text-transform: uppercase;
    font-weight: 700; letter-spacing: 0.5px; margin-right: 6px;
}
.prev-aff-btn, .prev-per-btn {
    background: var(--vrv-bg-page); color: var(--vrv-text-faint); border: 1px solid var(--vrv-border);
    padding: 7px 14px; border-radius: 16px; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: 0.15s; font-family: inherit;
}
.prev-aff-btn:hover, .prev-per-btn:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.prev-aff-btn.attivo, .prev-per-btn.attivo {
    background: var(--vrv-bg-page); color: var(--vrv-text-main); border-color: var(--vrv-accent);
}
.prev-periodo-date {
    background: var(--vrv-bg-page); color: var(--vrv-text-main); border: 1px solid var(--vrv-border);
    padding: 6px 10px; border-radius: 6px; font-size: 12px; font-family: inherit;
    outline: none; color-scheme: dark;
}
.prev-periodo-date:focus { border-color: var(--vrv-accent); }

/* KPI top */
.prev-kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.prev-kpi { background: var(--vrv-bg-card); padding: 22px; border-radius: 8px; border: 1px solid var(--vrv-border); text-align: center; }
.prev-kpi.entrate { border-top: 3px solid #32d583; }
.prev-kpi.uscite  { border-top: 3px solid var(--vrv-danger); }
.prev-kpi.bilancio.positivo { border-top: 3px solid #32d583; background: var(--vrv-success-bg); }
.prev-kpi.bilancio.negativo { border-top: 3px solid var(--vrv-danger); background: var(--vrv-danger-bg); }
.prev-kpi-title { display: block; font-size: 11px; font-weight: 700; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; line-height: 1.3; }
.prev-kpi-val { font-size: 24px; font-weight: 800; color: var(--vrv-text-main); }
.prev-kpi.entrate .prev-kpi-val { color: var(--vrv-success); }
.prev-kpi.uscite  .prev-kpi-val { color: var(--vrv-danger); }
.prev-kpi.bilancio.positivo .prev-kpi-val { color: var(--vrv-success); }
.prev-kpi.bilancio.negativo .prev-kpi-val { color: var(--vrv-danger); }

/* Colonne */
.prev-2-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.prev-box { background: var(--vrv-bg-card); border: 1px solid var(--vrv-border); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; }
.prev-box.entrate { border-top: 4px solid var(--vrv-success); }
.prev-box.uscite  { border-top: 4px solid var(--vrv-danger); }
.prev-box h3 { margin: 0 0 12px 0; font-size: 16px; color: var(--vrv-text-main); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.prev-tot { font-weight: 800; margin-left: 6px; }
.prev-tot.verde { color: var(--vrv-success); }
.prev-tot.rosso { color: var(--vrv-danger); }

.prev-search { width: 100%; padding: 9px 12px; background: var(--vrv-bg-page); border: 1px solid var(--vrv-border); color: var(--vrv-text-main); border-radius: 6px; font-size: 13px; margin-bottom: 15px; outline: none; }
.prev-search:focus { border-color: var(--vrv-accent); }
.prev-search::placeholder { color: var(--vrv-text-muted); }

.btn-add-prev { background: var(--vrv-bg-card); color: var(--vrv-text-main); border: none; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.btn-add-prev:hover { background: var(--vrv-bg-page); transform: scale(1.1); }
.btn-add-prev.uscita { background: var(--vrv-danger); }
.btn-add-prev.uscita:hover { background: var(--vrv-danger); }

.prev-lista { list-style: none; padding: 0; margin: 0; max-height: 480px; overflow-y: auto; }
.prev-lista li { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--vrv-border-soft); font-size: 13px; }
.prev-lista li:last-child { border-bottom: none; }
.prev-lista li.imminente { background: rgba(254, 200, 75, 0.1); border-radius: 4px; padding: 12px 8px; }
.prev-lista li.scaduta {
    background: var(--vrv-danger-bg);
    border-left: 4px solid var(--vrv-danger);
    border-radius: 4px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 0 0 1px var(--vrv-danger-bg) inset;
}
.prev-lista li.scaduta strong { color: var(--vrv-text-body); }

/* Banner alert mancati pagamenti */
.prev-alert-scaduti {
    display: flex; align-items: center; gap: 16px;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-danger);
    border-left: 5px solid var(--vrv-danger);
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 22px;
    box-shadow: 0 4px 12px var(--vrv-danger-bg);
}
.prev-alert-icon { font-size: 28px; flex-shrink: 0; }
.prev-alert-body { flex: 1; }
.prev-alert-title { font-size: 15px; font-weight: 700; color: var(--vrv-danger); margin-bottom: 4px; }
.prev-alert-title #prev-alert-count { background: var(--vrv-danger); color: var(--vrv-bg-card); padding: 2px 10px; border-radius: 12px; margin-right: 4px; }
.prev-alert-title #prev-alert-tot { color: var(--vrv-warning); font-weight: 800; }
.prev-alert-sub { font-size: 12px; color: var(--vrv-danger); }
.prev-alert-action {
    background: transparent;
    color: var(--vrv-danger);
    border: 1px solid var(--vrv-danger);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.prev-alert-action:hover { background: var(--vrv-danger-bg); }

.prev-voce-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.prev-voce-info strong { color: var(--vrv-text-main); word-wrap: break-word; }
.prev-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.prev-data { font-size: 11px; color: var(--vrv-text-faint); font-weight: 600; }
.prev-data.imminente-txt { color: var(--vrv-warning); }
.prev-data.scaduta-txt   { color: var(--vrv-danger); }
.prev-cat-badge { font-size: 10px; background: var(--vrv-bg-card-alt); color: var(--vrv-text-body); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.prev-aff-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.prev-aff-Confermato { background: rgba(50, 213, 131, 0.18); color: var(--vrv-success); }
.prev-aff-Probabile  { background: rgba(254, 200, 75, 0.15); color: var(--vrv-warning); }
.prev-aff-Incerto    { background: var(--vrv-bg-card-alt); color: var(--vrv-text-body); }

.prev-azioni { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prev-importo { font-weight: 800; font-size: 14px; }
.prev-importo.verde { color: var(--vrv-success); }
.prev-importo.rosso { color: var(--vrv-danger); }
.prev-btn-edit, .prev-btn-del { border: 1px solid; padding: 4px 7px; border-radius: 4px; background: transparent; cursor: pointer; font-size: 11px; transition: 0.2s; }
.prev-btn-edit { color: var(--vrv-text-faint); border-color: var(--vrv-text-strong); }
.prev-btn-edit:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.prev-btn-del { color: var(--vrv-danger); border-color: var(--vrv-danger); }
.prev-btn-del:hover { background: var(--vrv-danger-bg); }

/* Modale custom (no più ACF) */
#prev-modale-bg {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(16, 24, 40, 0.5); z-index: 9998; backdrop-filter: blur(2px);
}
#prev-modale {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--vrv-bg-card); padding: 28px; border-radius: 10px; z-index: 9999;
    width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
    color: var(--vrv-text-main); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.2);
}
#prev-modale h3 { margin: 0 0 20px 0; padding-bottom: 14px; border-bottom: 1px solid var(--vrv-border-soft); font-size: 18px; }
#prev-modale .prev-form-group { margin-bottom: 16px; }
#prev-modale .prev-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--vrv-text-body); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
#prev-modale .prev-form-group input[type="text"],
#prev-modale .prev-form-group input[type="number"],
#prev-modale .prev-form-group input[type="date"],
#prev-modale .prev-form-group select,
#prev-modale .prev-form-group textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--vrv-border); border-radius: 6px;
    font-size: 14px; outline: none; transition: border-color 0.15s; font-family: inherit;
}
#prev-modale .prev-form-group input:focus,
#prev-modale .prev-form-group select:focus,
#prev-modale .prev-form-group textarea:focus {
    border-color: var(--vrv-accent); box-shadow: 0 0 0 3px var(--vrv-accent-soft);
}
#prev-modale .prev-form-group textarea { resize: vertical; min-height: 60px; }
#prev-modale .prev-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#prev-modale .prev-modale-azioni { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vrv-border-soft); }
#prev-modale .prev-btn-salva {
    background: var(--vrv-accent); color: #fff; border: none; padding: 10px 20px;
    border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
}
#prev-modale .prev-btn-salva:hover { background: var(--vrv-bg-page); }
#prev-modale .prev-btn-salva:disabled { background: var(--vrv-bg-card-alt); color: var(--vrv-text-faint); cursor: not-allowed; }
#prev-modale .prev-btn-annulla {
    background: transparent; color: var(--vrv-text-strong); border: 1px solid var(--vrv-border);
    padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
}
#prev-modale .prev-btn-annulla:hover { background: var(--vrv-bg-card-alt); }
#prev-modale .prev-msg-errore { color: var(--vrv-danger); font-size: 13px; padding: 10px 12px; background: var(--vrv-danger-bg); border-radius: 6px; border: 1px solid var(--vrv-danger); display: none; margin-bottom: 14px; }

/* Toast notifica */
#prev-toast {
    position: fixed; top: 24px; right: 24px; z-index: 10000;
    background: var(--vrv-bg-page); color: var(--vrv-text-main); padding: 14px 20px; border-radius: 8px;
    font-weight: 600; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.10);
    display: none; animation: prevToastIn 0.3s ease;
}
#prev-toast.errore { background: var(--vrv-danger); }
@keyframes prevToastIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    .prev-kpi-grid { grid-template-columns: 1fr; }
    .prev-2-col-grid { grid-template-columns: 1fr; }
    #prev-modale .prev-form-2col { grid-template-columns: 1fr; }
    #erp-previsioni-wrapper { padding: 20px; }
    .prev-alert-scaduti { flex-direction: column; align-items: flex-start; }
    .prev-alert-action { width: 100%; }
}

/* ============================================================================
 * 41. MODULO F24 — Scadenzario tributi
 *
 * Scadenze F24 + promemoria email + banner in-app.
 * Prefissi: .f24-*
 * ============================================================================ */

/* ========= NAMESPACING ========= */
#erp-f24-wrapper, #erp-f24-wrapper * { box-sizing: border-box; }
#erp-f24-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--vrv-text-body);
    padding: 20px 0;
}

/* ========= HERO KPI CARDS ========= */
.f24-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.f24-kpi {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: 10px;
    padding: 18px 20px;
    border-left: 4px solid var(--vrv-accent);
}
.f24-kpi.f24-kpi-warning { border-left-color: var(--vrv-warning); }
.f24-kpi.f24-kpi-danger { border-left-color: var(--vrv-danger); }
.f24-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vrv-text-faint);
    margin: 0 0 6px;
    font-weight: 600;
}
.f24-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--vrv-text-main);
    margin: 0;
    line-height: 1.2;
}
.f24-kpi-sub {
    font-size: 12px;
    color: var(--vrv-text-faint);
    margin: 4px 0 0;
}
.f24-kpi-sub strong { color: var(--vrv-text-body); }

/* ========= BARRA AZIONI + FILTRI ========= */
.f24-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.f24-filtri {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 8px;
    flex: 1;
}
.f24-filtro-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.f24-filtro-wrap label {
    font-size: 9px;
    color: var(--vrv-text-faint);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.f24-filtro-wrap select,
.f24-filtro-wrap input {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    color: var(--vrv-text-body);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.f24-filtro-wrap select:focus,
.f24-filtro-wrap input:focus { border-color: var(--vrv-accent); }

.f24-btn-add {
    background: var(--vrv-bg-page);
    color: var(--vrv-text-main);
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.f24-btn-add:hover { background: var(--vrv-bg-page); }

/* ========= TABELLA ========= */
.f24-tabella {
    width: 100%;
    border-collapse: collapse;
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}
.f24-tabella thead th {
    background: var(--vrv-bg-page);
    color: var(--vrv-text-faint);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--vrv-border-soft);
}
.f24-tabella tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--vrv-border-soft);
    color: var(--vrv-text-body);
    vertical-align: middle;
}
.f24-tabella tbody tr:last-child td { border-bottom: none; }
.f24-tabella tbody tr:hover { background: var(--vrv-bg-card-alt); }

.f24-row-warning { background: var(--vrv-bg-warning-light); }
.f24-row-danger { background: var(--vrv-danger-bg); }
.f24-row-warning:hover { background: var(--vrv-bg-warning-light) !important; }
.f24-row-danger:hover { background: var(--vrv-danger-bg) !important; }

.f24-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.f24-stato-da_pagare { background: var(--vrv-bg-warning-light); color: var(--vrv-warning); }
.f24-stato-pagato { background: rgba(50, 213, 131, 0.15); color: var(--vrv-success); }
.f24-stato-scaduto { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

.f24-pill-periodicita {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-text-faint);
}
.f24-per-mensile { background: rgba(3, 169, 244, 0.15); color: var(--vrv-accent); }
.f24-per-trimestrale { background: var(--vrv-bg-warning-light); color: var(--vrv-warning); }
.f24-per-annuale { background: var(--vrv-warning-bg); color: var(--vrv-warning); }

.f24-btn-drive {
    display: inline-block;
    background: var(--vrv-bg-card-alt);
    color: var(--vrv-accent);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    transition: 0.2s;
}
.f24-btn-drive:hover { background: var(--vrv-bg-page); color: var(--vrv-text-main); }

.f24-btn-azione {
    background: transparent;
    border: 1px solid var(--vrv-border);
    color: var(--vrv-text-faint);
    cursor: pointer;
    padding: 5px 9px;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 4px;
    transition: 0.2s;
}
.f24-btn-azione:hover { background: var(--vrv-bg-card-alt); }
.f24-btn-pay:hover { background: rgba(50, 213, 131, 0.15); color: var(--vrv-success); }
.f24-btn-del:hover { background: var(--vrv-danger-bg); color: var(--vrv-danger); }

.f24-empty-state {
    background: var(--vrv-bg-card);
    border: 1px dashed var(--vrv-border);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    color: var(--vrv-text-faint);
}

/* ========= MODALE ========= */
.f24-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.7);
    backdrop-filter: blur(4px);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
}
.f24-modal-overlay.show { display: flex; }
.f24-modal {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    border-radius: 12px;
    width: 540px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
}
.f24-modal h3 {
    margin: 0 0 18px;
    color: var(--vrv-text-main);
    font-size: 18px;
}
.f24-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.f24-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.f24-form-field.full { grid-column: 1 / -1; }
.f24-form-field label {
    font-size: 11px;
    color: var(--vrv-text-faint);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.f24-form-field input,
.f24-form-field select,
.f24-form-field textarea {
    background: var(--vrv-bg-page);
    border: 1px solid var(--vrv-border);
    color: var(--vrv-text-body);
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.f24-form-field input:focus,
.f24-form-field select:focus,
.f24-form-field textarea:focus { border-color: var(--vrv-accent); }
.f24-form-field textarea { resize: vertical; min-height: 60px; }

.f24-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--vrv-border);
}
.f24-btn-cancel {
    background: transparent;
    border: 1px solid var(--vrv-border);
    color: var(--vrv-text-faint);
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.f24-btn-cancel:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }
.f24-btn-save {
    background: var(--vrv-bg-page);
    border: none;
    color: var(--vrv-text-main);
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.f24-btn-save:hover { background: var(--vrv-bg-page); }
.f24-btn-save:disabled { opacity: 0.5; cursor: wait; }

/* ========= TOAST ========= */
.f24-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 8px;
    color: var(--vrv-text-main);
    font-size: 13px;
    font-weight: 600;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.25s;
}
.f24-toast.show { opacity: 1; transform: translateY(0); }
.f24-toast.success { background: var(--vrv-bg-page); }
.f24-toast.error { background: var(--vrv-danger); }

/* ========= BADGE TOTALE FILTRATO ========= */
.f24-totale-filtrato {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--vrv-bg-card-alt);
    border: 1px solid var(--vrv-border);
    border-left: 3px solid var(--vrv-accent);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--vrv-text-body);
    flex-wrap: wrap;
}
.f24-tf-label {
    color: var(--vrv-text-faint);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.f24-tf-count {
    background: rgba(3, 169, 244, 0.15);
    color: var(--vrv-accent);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 11px;
}
.f24-tf-divider { color: var(--vrv-text-strong); }
.f24-tf-totale strong {
    color: var(--vrv-text-main);
    font-size: 14px;
    font-weight: 700;
}
.f24-tf-breakdown {
    display: flex;
    gap: 14px;
    margin-left: auto;
    align-items: center;
    color: var(--vrv-text-faint);
}
.f24-tf-da-pagare strong { color: var(--vrv-warning); }
.f24-tf-pagati strong { color: var(--vrv-success); }
.f24-tf-reset {
    background: transparent;
    border: 1px solid var(--vrv-border);
    color: var(--vrv-text-faint);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.f24-tf-reset:hover { background: var(--vrv-bg-card-alt); color: var(--vrv-text-main); }

/* ========= FLATPICKR TEMA SCURO ========= */
.flatpickr-calendar.f24-fp-dark {
    background: var(--vrv-bg-card);
    border: 1px solid var(--vrv-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    color: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-months,
.flatpickr-calendar.f24-fp-dark .flatpickr-month,
.flatpickr-calendar.f24-fp-dark .flatpickr-current-month,
.flatpickr-calendar.f24-fp-dark .flatpickr-monthDropdown-months {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-body);
    fill: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-weekday {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-faint);
    font-weight: 600;
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day {
    color: var(--vrv-text-body);
    background: transparent;
    border-color: transparent;
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day:hover {
    background: var(--vrv-bg-card-alt);
    border-color: var(--vrv-border);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day.selected,
.flatpickr-calendar.f24-fp-dark .flatpickr-day.selected:hover,
.flatpickr-calendar.f24-fp-dark .flatpickr-day.startRange,
.flatpickr-calendar.f24-fp-dark .flatpickr-day.endRange {
    background: var(--vrv-bg-page);
    border-color: var(--vrv-accent);
    color: var(--vrv-text-main);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day.today {
    border-color: var(--vrv-warning);
    color: var(--vrv-warning);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day.today.selected {
    color: var(--vrv-text-main);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day.prevMonthDay,
.flatpickr-calendar.f24-fp-dark .flatpickr-day.nextMonthDay {
    color: var(--vrv-text-strong);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-day.disabled {
    color: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-prev-month,
.flatpickr-calendar.f24-fp-dark .flatpickr-next-month {
    color: var(--vrv-text-body);
    fill: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-prev-month:hover svg,
.flatpickr-calendar.f24-fp-dark .flatpickr-next-month:hover svg {
    fill: var(--vrv-accent);
}
.flatpickr-calendar.f24-fp-dark .numInputWrapper:hover,
.flatpickr-calendar.f24-fp-dark .flatpickr-current-month input.cur-year {
    color: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-monthDropdown-months option {
    background: var(--vrv-bg-card);
    color: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--vrv-text-body);
}
.flatpickr-calendar.f24-fp-dark .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--vrv-text-body);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 900px) {
    .f24-hero { grid-template-columns: 1fr; }
    .f24-filtri { grid-template-columns: repeat(2, 1fr); }
    .f24-tabella { font-size: 12px; }
    .f24-tabella thead { display: none; }
    .f24-tabella tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid var(--vrv-border);
        border-radius: 8px;
        padding: 10px;
    }
    .f24-tabella tbody td { display: block; padding: 6px 0; border: none; }
    .f24-form-row { grid-template-columns: 1fr; }
    .f24-tf-breakdown { margin-left: 0; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; }
}



/* === Fix testi invisibili residui — patch sicurezza === */
.and-mese-label, .and-table .and-mese-label,
.and-table tr.row-mese td .and-mese-label {
    color: var(--vrv-text-main) !important;
    font-size: 14px !important;
}
.f24-table td, .f24-table th, .f24-table .scadenza-date,
.f24-table .importo, .f24-table .periodo, .f24-tipologia, .f24-anno {
    color: var(--vrv-text-body) !important;
}
.f24-kpi, .f24-kpi-val, .f24-kpi-label {
    color: var(--vrv-text-main) !important;
}
.f24-kpi-val { color: var(--vrv-text-main) !important; font-weight: 800 !important; }
.f24-kpi-label { color: var(--vrv-text-muted) !important; }
.f24-kpi.f24-kpi-warning .f24-kpi-val { color: var(--vrv-warning) !important; }
.f24-kpi.f24-kpi-danger .f24-kpi-val { color: var(--vrv-danger) !important; }
.f24-kpi.f24-kpi-info .f24-kpi-val { color: var(--vrv-accent) !important; }

/* Previsioni: alert scaduti */
.prev-alert {
    background: var(--vrv-warning-bg) !important;
    color: var(--vrv-warning-strong) !important;
    border-left: 4px solid var(--vrv-warning) !important;
}
.prev-alert .prev-alert-title,
.prev-alert .prev-alert-body,
.prev-alert .prev-alert-msg {
    color: var(--vrv-warning-strong) !important;
}

/* Previsioni: card bilancio (rimuovo il verde scuro) */
.prev-kpi.bilancio,
.prev-kpi.bilancio.positivo,
.prev-kpi.bilancio.negativo {
    background: var(--vrv-bg-card) !important;
    border-top: 3px solid var(--vrv-success);
}
.prev-kpi.bilancio.negativo { border-top: 3px solid var(--vrv-danger); }
.prev-kpi.bilancio .prev-kpi-val,
.prev-kpi.bilancio.positivo .prev-kpi-val { color: var(--vrv-success) !important; }
.prev-kpi.bilancio.negativo .prev-kpi-val { color: var(--vrv-danger) !important; }
.prev-kpi.bilancio .prev-kpi-label,
.prev-kpi.bilancio.positivo .prev-kpi-label,
.prev-kpi.bilancio.negativo .prev-kpi-label {
    color: var(--vrv-text-muted) !important;
}

/* === Fix 3: icone datepicker browser più visibili === */
.and-filtro-item input[type="date"]::-webkit-calendar-picker-indicator,
.fin-filtri-conto input[type="date"]::-webkit-calendar-picker-indicator,
.f24-filtri input[type="date"]::-webkit-calendar-picker-indicator,
.prev-filtri input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    cursor: pointer;
    filter: invert(38%) sepia(10%) saturate(400%) hue-rotate(170deg) brightness(0.95);
}
.and-filtro-item input[type="date"],
.fin-filtri-conto input[type="date"],
.f24-filtri input[type="date"],
.prev-filtri input[type="date"] {
    color-scheme: light;
}

/* === Fix 4: grafico settimanale → min-height per Chart.js === */
.fin-grafico-andamento { padding: 24px; border-bottom: 1px solid var(--vrv-border-soft); min-height: 180px; }
.fin-grafico-andamento h4 { margin: 0 0 12px 0; font-size: 13px; color: var(--vrv-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fin-grafico-andamento { position: relative; }
.fin-grafico-andamento canvas#grafico-andamento-conto {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
    display: block !important;
}

/* === Fix sicurezza: container Movimenti Conto Bancario === */
/* Forza visibilità di tutto il contenuto di .fin-cassa-box dopo l'header */
.fin-cassa-box { display: block !important; min-height: auto; }
.fin-cassa-box > * { display: block; visibility: visible; }
.fin-cassa-box .fin-filtri-conto { display: flex !important; }
.fin-cassa-box .fin-totali-filtro { display: grid !important; }
.fin-cassa-box .fin-table-wrap { display: block !important; max-height: 420px; overflow-y: auto; }
.fin-cassa-box .fin-table { display: table !important; width: 100%; }

/* Grafico settimanale: wrapper position relative + canvas con altezza esplicita.
   Se Chart.js non disegna (es. dati assenti o errore JS), il container resta visibile. */
.fin-grafico-andamento {
    position: relative;
    padding: 24px;
    border-bottom: 1px solid var(--vrv-border-soft);
    min-height: 200px;
}
.fin-grafico-andamento h4 {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--vrv-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
canvas#grafico-andamento-conto {
    width: 100% !important;
    height: 150px !important;
    max-height: 150px !important;
    display: block !important;
}

/* ============================================================================
 * 42. MODULO ANDAMENTO SOCIAL
 *
 * Dashboard analytics social media per redazione: Instagram, Facebook, LinkedIn.
 * Tabella post con metriche, filtri, grafici, statistiche YoY.
 * Prefissi: .sm-*, #andamento-social
 * ============================================================================ */

<?php if ($is_public): ?>
body { background: #0a0e16 !important; }
body::before, body::after, .site-header, .site-footer, header, footer,
.entry-header, .page-header, .wp-block-image, .has-background,
.single .post-thumbnail, body > .logo, body > img { display: none !important; }
.entry-content, .post-content, main, .site-content, .content-area,
article, .wp-block-post-content { background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
<?php endif; ?>

.sm-wrap { color:var(--vrv-border); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.sm-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:14px; padding:14px; background:var(--vrv-bg-card); border-radius:8px; border:1px solid var(--vrv-border); }
.sm-filters label { display:flex; flex-direction:column; font-size:11px; color:var(--vrv-text-faint); gap:4px; }
.sm-filters select, .sm-filters input { background:var(--vrv-bg-card); color:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:4px; padding:6px 8px; font-size:13px; }
.sm-filters input[type="date"] { color-scheme: light; min-width: 145px; cursor: pointer; background:var(--vrv-bg-card); color:var(--vrv-text-main); }
.sm-btn { background:var(--vrv-accent); color:var(--vrv-bg-card); border:none; padding:8px 14px; border-radius:4px; cursor:pointer; font-weight:600; font-size:13px; }
.sm-btn:hover { background:var(--vrv-accent); }
.sm-btn:disabled { opacity:0.6; cursor:wait; }
.sm-btn-import { background:#16a34a; }
.sm-btn-import:hover { background:#15803d; }
.sm-btn-print { background:#6b7280; }
.sm-btn-print:hover { background:#4b5563; }
.sm-btn-share { background:#a855f7; }
.sm-btn-share:hover { background:#9333ea; }

.sm-tabs { display:flex; gap:0; margin-bottom:0; border-bottom:2px solid var(--vrv-border); flex-wrap:wrap; }
.sm-tab { background:transparent; color:var(--vrv-text-faint); border:none; padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.sm-tab:hover { color:var(--vrv-border); }
.sm-tab.active { color:var(--vrv-accent); border-bottom-color:var(--vrv-accent); }
.sm-pane { display:none; padding-top:18px; }
.sm-pane.active { display:block; }

.sm-hero { display:flex; justify-content:space-between; gap:20px; padding:18px; border-radius:10px; margin-bottom:16px; background:linear-gradient(135deg,var(--vrv-bg-card) 0%,var(--vrv-text-main) 100%); border:1px solid var(--vrv-border); }
.sm-hero.crescita { border-color:var(--vrv-success); }
.sm-hero.calo { border-color:var(--vrv-danger); }
.sm-hero-status { font-size:17px; font-weight:700; margin-bottom:3px; }
.sm-hero.crescita .sm-hero-status { color:var(--vrv-success); }
.sm-hero.calo .sm-hero-status { color:var(--vrv-danger); }
.sm-hero-msg { color:var(--vrv-text-faint); font-size:13px; }
.sm-hero-stats { text-align:right; font-size:13px; }
.sm-hero-score { font-size:30px; font-weight:800; margin-top:4px; }

.sm-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.sm-kpi { background:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:8px; padding:12px; }
.sm-kpi-lbl { font-size:10px; color:var(--vrv-text-faint); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
.sm-kpi-val { font-size:21px; font-weight:700; color:var(--vrv-bg-card); }
.sm-kpi-sub { font-size:11px; color:var(--vrv-text-muted); margin-top:2px; }

.sm-grafico-box { background:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:8px; padding:12px; margin-bottom:16px; }
.sm-grafico-box h3 { color:var(--vrv-border); margin:0 0 8px 0; font-size:13px; }
.sm-grafico-wrap { position:relative; height:300px; width:100%; }
.sm-grafico-wrap canvas { display:block; }

.sm-table { width:100%; border-collapse:collapse; background:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:8px; overflow:hidden; margin-bottom:14px; }
.sm-table th { background:var(--vrv-bg-card); color:var(--vrv-text-faint); padding:9px 11px; text-align:left; font-size:11px; text-transform:uppercase; }
.sm-table td { padding:9px 11px; border-top:1px solid var(--vrv-border); font-size:12px; color:var(--vrv-border); }
.sm-table .num { text-align:right; font-variant-numeric:tabular-nums; }
/* NB: le classi .sm-coll-* e .sm-yoy-* sono definite nel CSS globale
   /wp-content/uploads/varavallo-erp/varavallo-erp-design.css */
.sm-up { color:var(--vrv-success); font-weight:600; }
.sm-down { color:var(--vrv-danger); font-weight:600; }
.sm-zero { color:var(--vrv-text-muted); }
.sm-link { color:#60a5fa; text-decoration:none; }
.sm-link:hover { text-decoration:underline; }
.sm-tag { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; font-weight:600; }
.sm-tag.org { background:#0a0; color:var(--vrv-bg-card); }
.sm-tag.paid { background:#fa0; color:#000; }

.sm-demo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:14px; }
.sm-demo-card { background:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:8px; padding:14px; }
.sm-demo-card h4 { margin:0 0 10px 0; color:var(--vrv-bg-card); font-size:13px; }
.sm-demo-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.sm-demo-label { flex:1; font-size:12px; color:var(--vrv-border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-demo-bar { flex-shrink:0; width:40%; height:6px; background:var(--vrv-bg-card); border-radius:3px; overflow:hidden; }
.sm-demo-bar-fill { height:100%; background:linear-gradient(90deg,var(--vrv-accent),#60a5fa); }
.sm-demo-val { flex-shrink:0; min-width:50px; text-align:right; font-size:12px; color:var(--vrv-bg-card); font-weight:600; font-variant-numeric:tabular-nums; }

.sm-empty { text-align:center; padding:30px; color:var(--vrv-text-muted); background:var(--vrv-bg-card); border-radius:8px; border:1px dashed var(--vrv-border); }
.sm-titolo-cell { max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sm-post-filtri { display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.sm-post-filtri select { background:var(--vrv-bg-card); color:var(--vrv-text-body); border:1px solid var(--vrv-border); border-radius:4px; padding:5px 8px; font-size:12px; }
.sm-post-filtri label { font-size:11px; color:var(--vrv-text-faint); }

.sm-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:99998; display:none; align-items:center; justify-content:center; padding:20px; }
.sm-modal-bg.active { display:flex; }
.sm-modal { background:var(--vrv-bg-card); border:1px solid var(--vrv-border); border-radius:10px; padding:24px; max-width:680px; width:100%; max-height:90vh; overflow-y:auto; }
.sm-modal h2 { color:var(--vrv-text-main); margin:0 0 6px 0; font-size:18px; display:flex; justify-content:space-between; align-items:center; }
.sm-modal h2 .sm-modal-close { cursor:pointer; color:var(--vrv-text-faint); font-size:24px; line-height:1; padding:0 6px; border-radius:4px; }
.sm-modal h2 .sm-modal-close:hover { color:var(--vrv-text-main); background:var(--vrv-bg-card-alt); }
.sm-modal-info { font-size:13px; color:var(--vrv-text-faint); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--vrv-border); }
.sm-modal-cliente { display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:10px 12px; background:var(--vrv-bg-card-alt); border-radius:6px; font-size:13px; }
.sm-modal-cliente strong { color:var(--vrv-accent); }
.sm-dz { border:2px dashed var(--vrv-border); border-radius:8px; padding:30px 16px; text-align:center; background:var(--vrv-bg-card-alt); cursor:pointer; transition:all 0.2s; }
.sm-dz.dragover { border-color:var(--vrv-accent); background:var(--vrv-accent-soft); }
.sm-dz-icon { font-size:32px; margin-bottom:6px; }
.sm-dz-title { font-size:14px; font-weight:600; color:var(--vrv-text-main); }
.sm-dz-sub { font-size:11px; color:var(--vrv-text-muted); margin-top:4px; }
.sm-recap-box { background:var(--vrv-bg-card-alt); border:1px solid var(--vrv-border-soft); border-radius:6px; padding:10px 12px; margin-top:12px; font-size:12px; }
.sm-recap-box ul { margin:4px 0 0 18px; padding:0; }
.sm-modal-actions { margin-top:14px; display:flex; gap:8px; }
.sm-modal-progress { margin-top:12px; padding:10px; background:var(--vrv-bg-card-alt); border-radius:6px; display:none; font-size:12px; }
.sm-modal-progress.active { display:block; }
.sm-modal-result { margin-top:12px; padding:12px; border-radius:6px; display:none; }
.sm-modal-result.active { display:block; }
.sm-modal-result.success { background:var(--vrv-success-bg); border:1px solid var(--vrv-success); color:var(--vrv-text-body); }
.sm-modal-result.error { background:var(--vrv-danger-bg); border:1px solid var(--vrv-danger); color:var(--vrv-text-body); }
.sm-modal-result strong { color:var(--vrv-text-main); }
.sm-modal-result ul { margin:6px 0 0 18px; padding:0; line-height:1.5; color:var(--vrv-text-body); }
.sm-modal-result li { color:var(--vrv-text-body); }
							 
.sm-pub-header { display:flex; align-items:center; gap:18px; padding:16px 20px; background:var(--vrv-bg-card); border-bottom:1px solid var(--vrv-border); margin-bottom:16px; border-radius:8px 8px 0 0; }
.sm-pub-header img { height:40px; width:auto; }
.sm-pub-header-text h1 { margin:0; color:var(--vrv-bg-card); font-size:16pt; line-height:1.1; }
.sm-pub-header-text .cliente { color:var(--vrv-accent); font-weight:600; font-size:12pt; margin-top:2px; }
.sm-pub-info { padding:10px 14px; background:var(--vrv-bg-card); color:var(--vrv-text-faint); font-size:12px; border-radius:6px; margin-bottom:12px; border-left:3px solid var(--vrv-accent); }

.sm-print-header { display: none; }
.sm-print-chart-img { display: none; }

@media print {
    @page { margin: 10mm; size: A4; }
    body, body * { visibility: visible !important; }
    .sm-wrap, .sm-wrap * { visibility: visible !important; }
    .sm-print-header, .sm-print-header * { visibility: visible !important; }
    body { background: var(--vrv-bg-card) !important; }
    .sm-wrap { color: #000 !important; font-size: 9pt !important; max-width: 100% !important; background: transparent !important; padding: 0 !important; }
    .sm-pane { max-width: 100% !important; overflow: hidden !important; }
    .sm-filters, .sm-tabs, .sm-modal-bg, .sm-btn, .sm-pub-header, .sm-pub-info { display: none !important; }
    .sm-pane { display: block !important; padding: 0 !important; page-break-after: always; }
    .sm-pane:last-child { page-break-after: auto; }
    .sm-pane::before { content: attr(data-tab-label); display: block; font-size: 13pt; font-weight: 700; color: #000; margin: 8px 0 8px 0; padding-bottom: 4px; border-bottom: 2px solid #000; }
    .sm-hero { padding: 10px !important; margin-bottom: 10px !important; gap: 12px !important; background: #f5f5f5 !important; border: 1px solid #ccc !important; color: #000 !important; box-shadow: none !important; }
    .sm-hero-status { font-size: 13pt !important; }
    .sm-hero-msg { font-size: 9pt !important; color: #555 !important; }
    .sm-hero-stats { font-size: 9pt !important; }
    .sm-hero-score { font-size: 22pt !important; color: #000 !important; }
    .sm-kpis { grid-template-columns: repeat(6, 1fr) !important; gap: 6px !important; margin-bottom: 10px !important; }
    .sm-kpi { padding: 6px 8px !important; background: #f5f5f5 !important; border: 1px solid #ccc !important; color: #000 !important; box-shadow: none !important; }
    .sm-kpi-lbl { font-size: 7pt !important; margin-bottom: 2px !important; color: #555 !important; }
    .sm-kpi-val { font-size: 13pt !important; color: #000 !important; }
    .sm-kpi-sub { font-size: 7pt !important; color: #555 !important; }
    .sm-grafico-box { padding: 8px !important; margin-bottom: 10px !important; background: #f5f5f5 !important; border: 1px solid #ccc !important; box-shadow: none !important; }
    .sm-grafico-box h3 { font-size: 10pt !important; margin-bottom: 4px !important; color: #000 !important; }
    .sm-grafico-wrap { height: auto !important; min-height: 0 !important; }
    .sm-grafico-wrap canvas { display: none !important; }
    .sm-print-chart-img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; }
    .sm-table { font-size: 8pt !important; table-layout: fixed; word-wrap: break-word; width: 100% !important; background: #f5f5f5 !important; border: 1px solid #ccc !important; color: #000 !important; box-shadow: none !important; }
    .sm-table th { padding: 4px 5px !important; font-size: 7pt !important; background: #e5e5e5 !important; color: #000 !important; }
    .sm-table td { padding: 4px 5px !important; color: #000 !important; border-top: 1px solid #ccc !important; }
    .sm-titolo-cell { max-width: 150px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .sm-tag.org { background: var(--vrv-success) !important; color: var(--vrv-bg-card) !important; }
    .sm-tag.paid { background: #d97706 !important; color: var(--vrv-text-main) !important; }
    .sm-up { color: #15803d !important; }
    .sm-down { color: #b91c1c !important; }
    .sm-link { color: #1d4ed8 !important; text-decoration: underline; }
    .sm-demo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .sm-demo-card { padding: 8px !important; background: #f5f5f5 !important; border: 1px solid #ccc !important; box-shadow: none !important; }
    .sm-demo-card h4 { font-size: 9pt !important; margin-bottom: 6px !important; color: #000 !important; }
    .sm-demo-row { margin-bottom: 3px !important; }
    .sm-demo-label { font-size: 8pt !important; }
    .sm-demo-val { font-size: 8pt !important; min-width: 40px !important; }
    .sm-demo-bar { background: #e5e5e5 !important; }
    .sm-demo-bar-fill { background: var(--vrv-accent) !important; }
    .sm-empty { background: #f5f5f5 !important; border: 1px solid #ccc !important; color: #000 !important; }
    .sm-hero, .sm-kpi, .sm-grafico-box, .sm-demo-card { break-inside: avoid; page-break-inside: avoid; }
    .sm-table tr { break-inside: avoid; page-break-inside: avoid; }
    .sm-print-header { display: flex !important; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 3px solid #000; }
    .sm-print-header img { height: 45px; width: auto; flex-shrink: 0; }
    .sm-print-header-text { flex: 1; }
    .sm-print-header-text h1 { margin: 0 !important; font-size: 16pt !important; color: #000 !important; font-weight: 700; line-height: 1.2; }
    .sm-print-cliente { font-size: 12pt; color: #1d4ed8; font-weight: 600; margin-top: 4px; }
    .sm-print-periodo { font-size: 9pt; color: #555; margin-top: 4px; }
}

/* ============================================================================
 * 44. APP MOBILE — Interfaccia nativa per smartphone
 *
 * CSS per lo shortcode [erp_app_master_mobile]. Architettura completamente
 * diversa dal desktop: bottom navigation + drawer laterale + topbar con avatar
 * + splash screen + fix sezione-per-sezione.
 *
 * Selettori principali:
 *   - #erp-mob-splash      (splash screen all'avvio)
 *   - .erp-mob-topbar      (barra superiore con logo e avatar)
 *   - #erp-mob-content     (area contenuto centrale)
 *   - #erp-mob-drawer      (menu laterale apribile)
 *   - .erp-mob-bottom-nav  (5 icone fisse in basso)
 *
 * Sotto-sezioni:
 *   44.1  Splash screen
 *   44.2  Reset tema WordPress
 *   44.3  Topbar (logo + avatar + menu utente)
 *   44.4  Drawer laterale
 *   44.5  Bottom navigation
 *   44.6  Area contenuto e sezioni
 *   44.7  Fix Home (4 colonne griglia)
 *   44.8  Fix Social PED
 *   44.9  Fix Task (cards verticali + swipe-to-delete + accordion)
 *   44.10 Fix Chat (lista/conversazione, editor mobile, due-pannelli)
 *   44.11 Fix Calendario (FullCalendar mobile)
 *   44.12 Modali full-screen
 *   44.13 Leggibilità: font scaling globale
 *   44.14 Safe area iOS (notch, dynamic island)
 *
 * Migrato dallo snippet "Erp app master mobile" v2 (semi-eager).
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 44.1 SPLASH SCREEN
 * Copre la pagina al boot mentre l'app si stabilizza.
 * --------------------------------------------------------------------------- */

/* Sezione 44 entro 1024px. */
@media (max-width: 1024px) {

    #erp-mob-splash {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        background: var(--vrv-bg-card);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        padding: 20px;
        transition: opacity 0.25s ease-out;
    }
    #erp-mob-splash.erp-splash-fading {
        opacity: 0;
        pointer-events: none;
    }
    #erp-mob-splash img {
        width: 220px;
        max-width: 60vw;
        height: auto;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }
    #erp-mob-splash .erp-splash-spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--vrv-border-soft);
        border-top-color: var(--vrv-accent);
        border-radius: 50%;
        animation: erp-splash-spin 0.8s linear infinite;
    }
    @keyframes erp-splash-spin {
        to { transform: rotate(360deg); }
    }
    body.erp-splash-on { overflow: hidden !important; }

    /* ---------------------------------------------------------------------------
     * 44.2 RESET TEMA WORDPRESS
     * L'app mobile prende il controllo completo del viewport: niente header/footer
     * del tema, niente admin bar, niente padding di container.
     * --------------------------------------------------------------------------- */
    body.erp-mobile-app #wpadminbar { display: none !important; }
    body.erp-mobile-app { margin-top: 0 !important; padding: 0 !important; }
    /* WP inietta margin-top:!important su <html> per la admin bar. <html> non può
     * avere la body class, quindi serve una regola dedicata che lo annulli quando
     * il body è in modalità app mobile. */
    html:has(body.erp-mobile-app) { margin-top: 0 !important; }
    html:has(body.erp-mobile-app) #wpadminbar { display: none !important; }
    body.erp-mobile-app h1.entry-title,
    body.erp-mobile-app h1.page-title,
    body.erp-mobile-app .page-header,
    body.erp-mobile-app .entry-header,
    body.erp-mobile-app header,
    body.erp-mobile-app footer,
    body.erp-mobile-app .site-header,
    body.erp-mobile-app .site-footer,
    body.erp-mobile-app #masthead,
    body.erp-mobile-app #colophon,
    body.erp-mobile-app .elementor-location-header,
    body.erp-mobile-app .elementor-location-footer {
        display: none !important;
    }
    body.erp-mobile-app .site-content,
    body.erp-mobile-app .site-main,
    body.erp-mobile-app .container,
    body.erp-mobile-app .wrap {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    body.erp-mobile-app {
        background-color: var(--vrv-bg-card-alt) !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---------------------------------------------------------------------------
     * 44.3 TOPBAR (logo sinistra, avatar destra)
     * --------------------------------------------------------------------------- */
    .erp-mob-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 86px;
        padding: 0 16px;
        padding-top: env(safe-area-inset-top, 0);
        background: var(--vrv-bg-card);
        border-bottom: 1px solid var(--vrv-border-soft);
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 9995;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    }
    .erp-mob-topbar-logo { display: flex; align-items: center; height: 100%; }
    .erp-mob-topbar-logo img {
        height: 58px !important;
        width: auto !important;
        max-width: 220px !important;
        object-fit: contain !important;
        display: block !important;
    }
    .erp-mob-topbar-avatar { position: relative; cursor: pointer; }
    .erp-mob-topbar-avatar img {
        width: 36px; height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--vrv-border-soft);
        display: block;
    }
    .erp-mob-topbar-avatar:hover img { border-color: var(--vrv-accent); }

    /* Menu utente (dropdown sotto avatar) */
    .erp-mob-user-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: var(--vrv-bg-card);
        border: 1px solid var(--vrv-border-soft);
        border-radius: 10px;
        min-width: 220px;
        box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
        padding: 6px;
        display: none;
        z-index: 10000;
    }
    .erp-mob-user-menu.open { display: block; }
    .erp-mob-user-menu-header {
        padding: 12px 14px 8px;
        border-bottom: 1px solid var(--vrv-border-soft);
        margin-bottom: 6px;
    }
    .erp-mob-user-menu-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--vrv-text-main);
    }
    .erp-mob-user-menu-email {
        font-size: 12px;
        color: var(--vrv-text-muted);
        margin-top: 2px;
    }
    .erp-mob-user-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        font-size: 14px;
        color: var(--vrv-text-strong);
        text-decoration: none;
        border-radius: 6px;
    }
    .erp-mob-user-menu a:hover { background: var(--vrv-bg-card-alt); }
    .erp-mob-user-menu a.logout { color: var(--vrv-danger); }
    .erp-mob-user-menu a.logout:hover { background: var(--vrv-danger-bg); }

    /* ---------------------------------------------------------------------------
     * 44.4 DRAWER LATERALE (menu completo)
     * --------------------------------------------------------------------------- */
    #erp-mob-drawer {
        position: fixed;
        top: 0; left: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        background: var(--vrv-bg-card);
        z-index: 999999;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }
    #erp-mob-drawer.open { transform: translateX(0); }

    #erp-mob-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0.5);
        z-index: 999998;
        backdrop-filter: blur(2px);
    }
    #erp-mob-drawer-overlay.open { display: block; }

    .mob-drawer-head {
        padding: 20px;
        border-bottom: 1px solid var(--vrv-border-soft);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mob-drawer-head img {
        max-width: 210px !important;
        width: 210px !important;
        height: auto !important;
        display: block !important;
    }
    .mob-drawer-close {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--vrv-text-muted);
        cursor: pointer;
        padding: 4px 8px;
    }
    .mob-drawer-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px 15px;
        padding-bottom: 100px;
    }
    .mob-drawer-body .erp-menu-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        color: var(--vrv-text-strong);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        border-radius: 8px;
        margin-bottom: 4px;
        transition: background 0.2s;
    }
    .mob-drawer-body .erp-menu-item:hover { background: var(--vrv-bg-card-alt); }
    .mob-drawer-body .erp-menu-item.active {
        background: var(--vrv-accent-soft);
        color: var(--vrv-accent);
        font-weight: 700;
    }
    .mob-drawer-body .erp-menu-icon {
        margin-right: 12px;
        font-size: 18px;
    }
    .mob-macro-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--vrv-text-faint);
        text-transform: uppercase;
        margin: 25px 0 10px 10px;
        letter-spacing: 0.5px;
    }
    .mob-macro-title:first-child { margin-top: 0; }
    .mob-logout {
        margin-top: 40px;
        border-top: 1px solid var(--vrv-border-soft);
        padding-top: 20px;
    }
    .mob-logout a {
        color: var(--vrv-danger);
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border-radius: 8px;
    }
    .mob-logout a:hover { background: var(--vrv-danger-bg); }

    /* ---------------------------------------------------------------------------
     * 44.5 BOTTOM NAVIGATION (5 icone fisse)
     * --------------------------------------------------------------------------- */
    .erp-mob-bottom-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        height: 80px;
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        background: var(--vrv-bg-card);
        border-top: 1px solid var(--vrv-border-soft);
        box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.06);
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        z-index: 9997;
    }
    .erp-mob-bn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
        background: none;
        border: none;
        color: var(--vrv-text-muted);
        font-size: 10px;
        font-weight: 500;
        transition: all 0.15s;
        position: relative;
        padding: 0 8px;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(2, 106, 162, 0.08);
    }
    .erp-mob-bn-item .bn-icon {
        width: 28px; height: 28px;
        line-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s;
    }
    .erp-mob-bn-item .bn-icon svg {
        width: 100%; height: 100%;
        stroke: var(--vrv-text-muted);
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.15s, fill 0.15s;
    }
    .erp-mob-bn-item .bn-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1px;
        padding-top: 2px;
    }
    .erp-mob-bn-item.active { color: var(--vrv-accent); }
    .erp-mob-bn-item.active .bn-icon svg { stroke: var(--vrv-accent); }
    .erp-mob-bn-item.active .bn-icon { transform: scale(1.08); }

    /* Badge contatore (es. chat non letti) */
    .erp-mob-bn-item .bn-badge,
    .erp-mob-bn-item .erp-chat-badge-menu {
        position: absolute;
        top: 6px;
        right: 50%;
        transform: translateX(14px);
        background: var(--vrv-danger);
        color: var(--vrv-bg-card);
        font-size: 10px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 8px;
        min-width: 16px;
        text-align: center;
        line-height: 1.3;
        display: none;
    }
    .erp-mob-bn-item .bn-badge.show { display: block; }

    /* ---------- RESET DIFENSIVO (neutralizza bordi/rosso del tema WP) ----------
     * I bn-item sono <button>: il tema WordPress applica bordi e hover rosa/magenta
     * ai button. Blindiamo nav e sheet con !important, come fa il modulo Scrittura. */
    .erp-mob-bottom-nav .erp-mob-bn-item,
    .erp-mob-bottom-nav .erp-mob-bn-item:hover,
    .erp-mob-bottom-nav .erp-mob-bn-item:focus,
    .erp-mob-bottom-nav .erp-mob-bn-item:active,
    .erp-mob-bottom-nav .erp-mob-bn-item:focus-visible {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: none !important;
        background-image: none !important;
        text-decoration: none !important;
        border-radius: 0 !important;
    }
    /* Centratura forzata icona + label (il tema può alterare text-align/display) */
    .erp-mob-bottom-nav .erp-mob-bn-item {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    .erp-mob-bottom-nav .erp-mob-bn-item .bn-icon {
        margin: 0 auto !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    .erp-mob-bottom-nav .erp-mob-bn-item .bn-icon svg {
        margin: 0 !important;
        display: block !important;
    }
    .erp-mob-bottom-nav .erp-mob-bn-item .bn-label {
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    /* Colore label/icona: neutro, mai rosso del tema */
    .erp-mob-bottom-nav .erp-mob-bn-item .bn-label,
    .erp-mob-bottom-nav .erp-mob-bn-item:hover .bn-label,
    .erp-mob-bottom-nav .erp-mob-bn-item:focus .bn-label {
        color: inherit !important;
    }
    .erp-mob-bn-item:not(.active) .bn-label { color: var(--vrv-text-muted) !important; }
    .erp-mob-bn-item.active .bn-label { color: var(--vrv-accent) !important; }

    /* Sheet: stesse protezioni sulle voci (sono <div>, ma per sicurezza) */
    .vrv-sheet-item,
    .vrv-sheet-item:hover,
    .vrv-sheet-item:focus,
    .vrv-sheet-item:active {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
        border-radius: 0 !important;
    }
    .vrv-sheet-item .vrv-si-label,
    .vrv-sheet-item:hover .vrv-si-label { color: var(--vrv-text-body) !important; }
    .vrv-sheet-item.is-accent .vrv-si-label { color: var(--vrv-success) !important; }
    .vrv-sheet-item.active .vrv-si-label { color: var(--vrv-accent) !important; }

    /* Triangolino sui gruppi con sottosezioni */
    .erp-mob-bn-item .bn-caret {
        position: absolute;
        top: 8px;
        right: calc(50% - 20px);
        width: 0; height: 0;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        border-top: 4px solid var(--vrv-text-faint);
        opacity: 0.55;
    }
    .erp-mob-bn-item.active .bn-caret { border-top-color: var(--vrv-accent); }

    /* ---------------------------------------------------------------------------
     * 44.5b BOTTOM-SHEET (sottosezioni dei gruppi della bottom-nav)
     * --------------------------------------------------------------------------- */
    .vrv-bn-overlay {
        position: fixed; inset: 0;
        background: rgba(16, 24, 40, 0.35);
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s;
        z-index: 9998;
    }
    .vrv-bn-overlay.show { opacity: 1; pointer-events: auto; }

    .vrv-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--vrv-bg-card);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.18);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 9999;
        max-height: 72%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 calc(78px + env(safe-area-inset-bottom, 0) + 12px);
    }
    .vrv-sheet.show { transform: translateY(0); }
    .vrv-sheet-grip { width: 36px; height: 4px; background: var(--vrv-border); border-radius: 2px; margin: 8px auto 6px; }
    .vrv-sheet-title { font-size: 12px; font-weight: 700; color: var(--vrv-text-faint); text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 22px 10px; }
    .vrv-sheet-item {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 22px; cursor: pointer;
        transition: background 0.12s;
        -webkit-tap-highlight-color: transparent;
    }
    .vrv-sheet-item:active { background: var(--vrv-bg-card-alt); }
    .vrv-sheet-item .vrv-si-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--vrv-text-muted); display: flex; align-items: center; justify-content: center; }
    .vrv-sheet-item .vrv-si-ico svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .vrv-sheet-item .vrv-si-label { font-size: 15px; color: var(--vrv-text-body); font-weight: 500; }
    .vrv-sheet-item.is-accent .vrv-si-label { color: var(--vrv-success); font-weight: 700; }
    .vrv-sheet-item.is-accent .vrv-si-ico { color: var(--vrv-success); }
    .vrv-sheet-item.active { background: var(--vrv-accent-soft); }
    .vrv-sheet-item.active .vrv-si-label { color: var(--vrv-accent); font-weight: 700; }
    .vrv-sheet-item.active .vrv-si-ico { color: var(--vrv-accent); }
    .vrv-sheet-item .vrv-si-badge {
        margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        background: var(--vrv-danger); color: var(--vrv-bg-card); font-size: 11px; font-weight: 700;
        display: none; align-items: center; justify-content: center; line-height: 1;
    }
    .vrv-sheet-item .vrv-si-badge.show { display: flex; }


    /* ---------------------------------------------------------------------------
     * 44.6 AREA CONTENUTO E SEZIONI
     * --------------------------------------------------------------------------- */
    #erp-mob-content {
        min-height: 100vh;
        padding: 15px;
        padding-top: calc(76px + env(safe-area-inset-top, 0) + 12px);
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0));
        box-sizing: border-box;
        width: 100%;
    }
    .erp-sezione-app { display: none; }
    .erp-sezione-app.attiva {
        display: block;
        animation: erp-mob-fade-in 0.2s ease-in-out;
    }
    @keyframes erp-mob-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ---------------------------------------------------------------------------
     * 44.7 FIX HOME: griglia 4 colonne con solo icona+titolo
     * --------------------------------------------------------------------------- */
    #sezione-home .home-quick-links {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }
    #sezione-home .home-card {
        padding: 14px 6px !important;
        border-radius: 10px !important;
    }
    #sezione-home .home-card-icon {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }
    #sezione-home .home-card-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
    #sezione-home .home-card-desc { display: none !important; }

    #sezione-home .home-banner {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 8px 0 !important;
        margin-bottom: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 4px !important;
    }
    body #erp-mob-content #sezione-home .home-banner h1 {
        color: var(--vrv-text-main) !important;
        font-size: 28px !important;
        font-weight: 900 !important;
        margin: 0 !important;
    }
    #sezione-home .home-banner p {
        color: var(--vrv-text-strong) !important;
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* ---------------------------------------------------------------------------
     * 44.8 FIX SOCIAL PED
     * --------------------------------------------------------------------------- */
    #sezione-social-ped .soc-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #sezione-social-ped .soc-header-left,
    #sezione-social-ped .soc-header-right,
    #sezione-social-ped .soc-header-filters {
        width: 100% !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    #sezione-social-ped .soc-filter-select {
        flex: 1 1 45% !important;
        max-width: none !important;
    }
    #sezione-social-ped #social-vista-lista {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #sezione-social-ped .soc-modal {
        width: 95vw !important;
        max-height: 90vh !important;
    }
    #sezione-social-ped .soc-canali-grid { grid-template-columns: 1fr !important; }
    #sezione-social-ped .soc-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ---------------------------------------------------------------------------
     * 44.9 FIX TASK: card compatte verticali con swipe-to-delete
     *
     * Layout reale del modulo (griglia desktop a 6 col):
     *   check | titolo | assegnatario | progetto | data | azioni(Elimina)
     *
     * Su mobile:
     *   - Card COMPATTE (poco padding, gap minimo) per vederne di più
     *   - Riga 1: [check] Titolo
     *   - Riga 2: avatar+nome · progetto · data  (tutto su una riga, va a capo se serve)
     *   - Pulsante Elimina nascosto, accessibile con swipe a sinistra
     * --------------------------------------------------------------------------- */

    /* Header compatto */
    #sezione-task-giornata .lma-header-mio {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
    }
    #sezione-task-giornata .lma-view-toggles {
        width: 100%;
        display: flex !important;
        gap: 6px !important;
    }
    #sezione-task-giornata .lma-btn-view {
        flex: 1;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    #sezione-task-giornata .lma-header-mio > div:last-child {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
    }
    #sezione-task-giornata .lma-header-mio > div:last-child button {
        flex: 1;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Nasconde la riga-header colonne */
    #sezione-task-giornata .erp-task-header-riga { display: none !important; }

    /* Accordion compatti */
    #sezione-task-giornata .lma-accordion summary {
        padding: 12px 14px !important;
        font-size: 14px !important;
        min-height: 44px;
        box-sizing: border-box;
    }
    #sezione-task-giornata .lma-badge {
        font-size: 12px !important;
        padding: 2px 8px !important;
    }

    /* ===== LA CARD: check a sinistra, titolo + riga meta compatta =====
     *
     *   [✓] Titolo del task
     *       [av] | progetto | data
     *
     * Per garantire che TUTTO stia dentro schermi stretti (360px), su mobile
     * l'assegnatario mostra solo l'avatar (il nome è ridondante: lo si vede
     * aprendo il task). Progetto si comprime con ellissi, data resta intera. */
    #sezione-task-giornata .erp-card-task-mio {
        display: grid !important;
        grid-template-columns: 24px auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "check titolo titolo titolo"
            "check av     prog   data" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        align-items: center !important;
        padding: 10px 14px !important;
        border-bottom: 1px solid var(--vrv-border-soft) !important;
        position: relative !important;
        overflow: hidden !important;
        touch-action: pan-y;
    }

    /* Check: colonna sinistra, in alto col titolo */
    #sezione-task-giornata .erp-card-task-mio > .erp-check-btn-int {
        grid-area: check !important;
        position: static !important;
        align-self: start !important;
        margin-top: 1px !important;
        width: 22px !important;
        height: 22px !important;
    }

    /* Titolo riga 1 */
    #sezione-task-giornata .erp-task-cella-titolo {
        grid-area: titolo !important;
        align-items: flex-start !important;
        min-width: 0 !important;
    }
    #sezione-task-giornata .task-titolo-testo {
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3 !important;
    }

    /* Riga 2: avatar (solo faccia) */
    #sezione-task-giornata .erp-task-cella-ass {
        grid-area: av !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    #sezione-task-giornata .erp-task-ass-nome {
        display: none !important;        /* nome nascosto su mobile: resta l'avatar */
    }
    #sezione-task-giornata .erp-task-cella-ass img,
    #sezione-task-giornata .erp-task-av {
        width: 22px !important; height: 22px !important;
        flex-shrink: 0 !important;
    }

    /* Progetto: si comprime con ellissi */
    #sezione-task-giornata .erp-task-cella-prog {
        grid-area: prog !important;
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    #sezione-task-giornata .erp-task-prog-tag {
        font-size: 12px !important;
        padding: 2px 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Data: sempre intera, non si comprime */
    #sezione-task-giornata .erp-task-cella-data {
        grid-area: data !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        color: var(--vrv-text-muted) !important;
    }

    /* Separatori "|" prima di progetto e data */
    #sezione-task-giornata .erp-task-cella-prog::before,
    #sezione-task-giornata .erp-task-cella-data::before {
        content: "|" !important;
        color: var(--vrv-border) !important;
        margin: 0 8px 0 0 !important;
        font-weight: 400 !important;
        flex-shrink: 0 !important;
    }

    /* Hide completati */
    body.nascondi-completati #sezione-task-giornata .task-grigio-spa { display: none !important; }

    /* ===== SWIPE-TO-DELETE: Elimina nascosto, appare con swipe ===== */
    #sezione-task-giornata .erp-task-cella-azioni {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        height: 100% !important;
        width: 88px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%);             /* fuori schermo a destra */
        transition: transform 0.2s ease !important;
        z-index: 3;
    }
    #sezione-task-giornata .btn-elimina-task {
        width: 100% !important;
        height: 100% !important;
        background: var(--vrv-danger) !important;
        color: var(--vrv-bg-card) !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }
    /* Stato "swiped": l'Elimina entra, il contenuto scorre a sinistra */
    #sezione-task-giornata .erp-card-task-mio.swiped .erp-task-cella-azioni {
        transform: translateX(0) !important;
    }
    #sezione-task-giornata .erp-card-task-mio.swiped .erp-task-cella-titolo,
    #sezione-task-giornata .erp-card-task-mio.swiped .erp-task-cella-ass,
    #sezione-task-giornata .erp-card-task-mio.swiped .erp-task-cella-prog,
    #sezione-task-giornata .erp-card-task-mio.swiped .erp-task-cella-data,
    #sezione-task-giornata .erp-card-task-mio.swiped > .erp-check-btn-int {
        transform: translateX(-88px) !important;
        transition: transform 0.2s ease !important;
    }
    #sezione-task-giornata .erp-card-task-mio .erp-task-cella-titolo,
    #sezione-task-giornata .erp-card-task-mio .erp-task-cella-ass,
    #sezione-task-giornata .erp-card-task-mio .erp-task-cella-prog,
    #sezione-task-giornata .erp-card-task-mio .erp-task-cella-data,
    #sezione-task-giornata .erp-card-task-mio > .erp-check-btn-int {
        transition: transform 0.2s ease !important;
    }

    /* ===== SIDEBAR TASK: editor e campi non devono toccare i bordi ===== */
    /* Massima specificità: targeting per ID, batte qualunque regola del modulo. */
    #erp-tsidebar-descrizione.erp-le-editor,
    #erp-tsidebar-cmt-input.erp-le-editor,
    .erp-tsidebar-body .erp-le-editor {
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    /* Anche i paragrafi interni non devono avere margini laterali che ingannano */
    #erp-tsidebar-descrizione.erp-le-editor p,
    #erp-tsidebar-cmt-input.erp-le-editor p {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Wrapper editor */
    #erp-tsidebar-descrizione-wrap,
    .erp-tsidebar-mce-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    /* Filtri collassati con toggle */
    #sezione-task-giornata #barra-filtri-task {
        display: none !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 10px !important;
        background: var(--vrv-bg-card-alt) !important;
        border: 1px solid var(--vrv-border-soft) !important;
        border-radius: 8px !important;
        margin-top: 8px !important;
    }
    #sezione-task-giornata #barra-filtri-task.mob-open { display: flex !important; }
    #sezione-task-giornata #barra-filtri-task select,
    #sezione-task-giornata #barra-filtri-task input {
        width: 100% !important;
        font-size: 14px !important;
        padding: 9px 12px !important;
    }
    .mob-task-filter-toggle {
        background: var(--vrv-bg-card);
        border: 1px solid var(--vrv-border);
        border-radius: 6px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        color: var(--vrv-text-strong);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .mob-task-filter-toggle.active {
        background: var(--vrv-accent-soft);
        color: var(--vrv-accent);
        border-color: var(--vrv-accent);
    }

    /* Calendario task mobile */
    #sezione-task-giornata #vista-calendario-giornata .fc-header-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    #sezione-task-giornata #vista-calendario-giornata .fc-toolbar-chunk {
        width: 100% !important;
        justify-content: center !important;
    }
    #sezione-task-giornata #vista-calendario-giornata .fc-button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    #sezione-task-giornata #vista-calendario-giornata .fc-toolbar-title {
        font-size: 16px !important;
    }
    #sezione-task-giornata #vista-calendario-giornata .fc-event {
        font-size: 12px !important;
        padding: 3px 6px !important;
    }

    /* ---------------------------------------------------------------------------
     * 44.10 FIX CHAT MOBILE (due-pannelli + editor mobile)
     * --------------------------------------------------------------------------- */

    /* ---------------------------------------------------------------------------
     * 44.11 FIX CALENDARIO FULLCALENDAR su mobile
     * --------------------------------------------------------------------------- */
    .erp-mobile-app .fc .fc-header-toolbar {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
    .erp-mobile-app .fc .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .erp-mobile-app .fc .fc-toolbar-title {
        font-size: 16px !important;
        text-align: center !important;
    }
    .erp-mobile-app .fc .fc-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }

    /* ---------------------------------------------------------------------------
     * 44.12 MODALI GENERICHE mobile (full-screen)
     * --------------------------------------------------------------------------- */
    .erp-mobile-app #box-creazione-task-wrap {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0.6);
        z-index: 9999999;
        backdrop-filter: blur(4px);
    }
    .erp-mobile-app .erp-modal-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        background: var(--vrv-bg-card);
        border-radius: 12px;
    }
    .erp-mobile-app .erp-modal-close-btn {
        position: absolute;
        right: 15px; top: 15px;
        font-size: 28px;
        color: var(--vrv-text-faint);
    }

    /* Icone bottom nav: stati */
    .erp-mob-nav-icon svg,
    .erp-icon-scrittura svg {
        width: 28px;
        height: 28px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .erp-mob-nav-item { color: var(--vrv-text-muted); }
    .erp-mob-nav-item.active,
    .erp-mob-nav-item:hover { color: var(--vrv-accent); }

    /* ---------------------------------------------------------------------------
     * 44.13 LEGGIBILITÀ — font scaling globale mobile
     * --------------------------------------------------------------------------- */
    body #erp-mob-content,
    body #erp-mob-content * { font-size: inherit; }
    body #erp-mob-content { font-size: 16px !important; }

    body #erp-mob-content h1,
    body #erp-mob-content h1 * { font-size: 22px !important; }
    body #erp-mob-content h2,
    body #erp-mob-content h2 * { font-size: 19px !important; }
    body #erp-mob-content h3,
    body #erp-mob-content h3 * { font-size: 17px !important; }

    body #erp-mob-content input[type="text"]:not(.erp-tsidebar-titolo-input),
    body #erp-mob-content input[type="email"],
    body #erp-mob-content input[type="url"],
    body #erp-mob-content input[type="date"],
    body #erp-mob-content input[type="number"],
    body #erp-mob-content input[type="search"],
    body #erp-mob-content select,
    body #erp-mob-content textarea:not(.erp-tsidebar-titolo-input) {
        font-size: 16px !important;
    }
    /* Il titolo del task nella sidebar resta grande anche se è un textarea
     * dentro #erp-mob-content (non deve essere forzato a 16px). */
    body #erp-mob-content textarea.erp-tsidebar-titolo-input,
    body #erp-mob-content #erp-tsidebar-titolo {
        font-size: 22px !important;
    }
    body #erp-mob-content label { font-size: 14px !important; }

    body #sezione-chat .erp-msg .testo,
    body #sezione-chat .erp-msg .testo * { font-size: 19px !important; }
    body #sezione-chat .erp-msg .nome { font-size: 17px !important; }

    body #sezione-task-giornata .task-titolo-testo { font-size: 20px !important; }
    body #sezione-task-giornata .erp-task-meta-tags span { font-size: 15px !important; }
    body #sezione-task-giornata .lma-accordion summary { font-size: 18px !important; }

    body #sezione-home .home-card-title { font-size: 13px !important; }
    body #sezione-home .home-banner h1 { font-size: 20px !important; }
    body #sezione-social-ped .soc-caption { font-size: 14px !important; }

    /* Empty state */
    .mob-section-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--vrv-text-muted);
    }
    .mob-section-empty .emoji { font-size: 48px; margin-bottom: 12px; }

    /* === FINE SEZIONE 44 === */

} /* fine wrapper 1024px */

/* Chat (già protetto): */
@media (max-width: 768px) {
    #sezione-chat { margin: -15px; padding: 0; }
    #sezione-chat .erp-chat-wrapper {
        height: calc(100vh - 65px - env(safe-area-inset-bottom, 0)) !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        position: relative;
    }

    /* Stato default: lista canali a tutta larghezza */
    #sezione-chat .erp-chat-sidebar {
        width: 100% !important;
        flex: 1 !important;
        border-right: none !important;
    }
    #sezione-chat .erp-chat-main { display: none !important; }

    /* Stato "in conversazione" */
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-sidebar {
        display: none !important;
    }
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-main {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Header chat con back button */
    #sezione-chat .mob-chat-back-btn {
        background: var(--vrv-bg-card-alt);
        border: 1px solid var(--vrv-border-soft);
        border-radius: 6px;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 16px;
        color: var(--vrv-text-strong);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        flex-shrink: 0;
    }
    #sezione-chat .mob-chat-back-btn:active { background: var(--vrv-border-soft); }

    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-main-header {
        flex: 0 0 auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: var(--vrv-bg-card) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    /* Lista messaggi scorre */
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 10px !important;
        gap: 12px !important;
    }
    #sezione-chat .erp-msg { gap: 8px !important; }
    #sezione-chat .erp-msg .avatar { width: 30px !important; height: 30px !important; }
    #sezione-chat .erp-msg .testo {
        font-size: 15px !important;
        line-height: 1.45 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: pre-wrap !important;
    }
    #sezione-chat .erp-msg .attach { max-width: 100% !important; }
    #sezione-chat .erp-msg .attach img.preview {
        max-width: 100% !important;
        max-height: 240px !important;
    }
    #sezione-chat .erp-msg a {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Input bar sticky */
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-input,
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-composer,
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .erp-chat-form,
    #sezione-chat .erp-chat-wrapper.chat-mobile-in-conversation .chat-input-area {
        flex: 0 0 auto !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 30 !important;
        background: var(--vrv-bg-card) !important;
        border-top: 1px solid var(--vrv-border-soft) !important;
    }

    /* Nasconde toolbar avanzata su mobile */
    #sezione-chat .erp-chat-toolbar,
    #sezione-chat .erp-editor-toolbar,
    #sezione-chat .erp-format-toolbar,
    #sezione-chat .erp-chat-format-toolbar,
    #sezione-chat .chat-editor-toolbar,
    #sezione-chat .chat-format-toolbar,
    #sezione-chat .erp-editor-actions,
    #sezione-chat .erp-chat-editor-actions {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Editor campo testo limitato */
    #sezione-chat [contenteditable="true"],
    #sezione-chat textarea,
    #sezione-chat .erp-chat-editor,
    #sezione-chat .erp-message-editor {
        min-height: 42px !important;
        max-height: 115px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
    #sezione-chat .erp-chat-input-row,
    #sezione-chat .erp-chat-composer-row,
    #sezione-chat .chat-input-row {
        display: flex !important;
        align-items: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #sezione-chat .erp-chat-input-row [contenteditable="true"],
    #sezione-chat .erp-chat-composer-row [contenteditable="true"],
    #sezione-chat .chat-input-row [contenteditable="true"],
    #sezione-chat .erp-chat-input-row textarea,
    #sezione-chat .erp-chat-composer-row textarea,
    #sezione-chat .chat-input-row textarea {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Pulsanti invia/allega tondi */
    #sezione-chat .btn-send {
        font-size: 0 !important;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }
    #sezione-chat .btn-send::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 14px;
        background: var(--vrv-bg-card);
        border-radius: 999px;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }
    #sezione-chat .btn-send::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: 4px solid var(--vrv-bg-card);
        border-left: 4px solid var(--vrv-bg-card);
        border-radius: 3px 0 0 0;
        top: 10px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
    #sezione-chat .btn-attach {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    #sezione-chat .btn-attach .dashicons { display: none !important; }
    #sezione-chat .btn-attach::before {
        content: "+";
        font-size: 26px;
        color: var(--vrv-text-strong);
        line-height: 1;
    }
}
/* =============================================================================
 * BLOCCO RESPONSIVE — TABELLE (aggiunto 2026-06, rev.2)
 *
 * Tabelle più larghe dello schermo scrollano in orizzontale DENTRO la loro
 * area invece di tagliarsi o spingere la pagina.
 *
 * Pattern: la tabella resta una <table> vera (struttura intatta) e riceve una
 * min-width; lo scroll orizzontale è gestito dal suo contenitore diretto reso
 * scrollabile. Niente display:block sulla tabella (che tagliava le colonne).
 *
 * Escluse: .hr-table, .reg-table, .gj-table, .f24-tabella → già "card su mobile".
 * ============================================================================= */
@media (max-width: 1024px) {

    /* 1) Il contenitore DIRETTO della tabella diventa l'area di scroll.
       Usiamo :has() per colpire qualunque elemento che contiene una di queste
       tabelle, senza dover aggiungere wrapper nel markup. */
    *:has(> .anagrafica-table),
    *:has(> .and-table),
    *:has(> .and-tabella),
    *:has(> .dochr-table),
    *:has(> .dor-tabella),
    *:has(> .fin-table),
    *:has(> .pers-table),
    *:has(> .sm-table),
    *:has(> .sol-table),
    *:has(> .trf-table),
    *:has(> .vrv-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* 2) La tabella mantiene una larghezza minima leggibile: se eccede lo
       schermo, il contenitore (sopra) scrolla. La tabella NON è display:block. */
    .anagrafica-table,
    .and-table,
    .and-tabella,
    .dochr-table,
    .dor-tabella,
    .fin-table,
    .pers-table,
    .sm-table,
    .sol-table,
    .trf-table,
    .vrv-table {
        min-width: 560px;
        width: 100%;
    }

    /* 3) Celle: niente a-capo forzato che comprime le colonne in verticale.
       Meglio scrollare in orizzontale che spremere il testo. */
    .anagrafica-table th, .anagrafica-table td,
    .and-table th, .and-table td, .and-tabella th, .and-tabella td,
    .dochr-table th, .dochr-table td,
    .dor-tabella th, .dor-tabella td,
    .fin-table th, .fin-table td,
    .pers-table th, .pers-table td,
    .sm-table th, .sm-table td,
    .sol-table th, .sol-table td,
    .trf-table th, .trf-table td,
    .vrv-table th, .vrv-table td {
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------------------------
 * FALLBACK per browser senza :has() (iOS < 15.4 e simili).
 * Se il contenitore non viene reso scrollabile da :has(), la tabella stessa
 * diventa l'area di scroll. Qui il min-width va sul tbody (il contenuto che
 * eccede), mentre la tabella in display:block fornisce l'overflow.
 * I browser che SUPPORTANO :has() ignorano questo blocco (@supports not).
 * --------------------------------------------------------------------------- */
@supports not selector(:has(*)) {
    @media (max-width: 1024px) {
        .anagrafica-table, .and-table, .and-tabella, .dochr-table, .dor-tabella,
        .fin-table, .pers-table, .sm-table, .sol-table, .trf-table, .vrv-table {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
        .anagrafica-table tbody, .and-table tbody, .and-tabella tbody,
        .dochr-table tbody, .dor-tabella tbody, .fin-table tbody,
        .pers-table tbody, .sm-table tbody, .sol-table tbody,
        .trf-table tbody, .vrv-table tbody {
            display: table;
            width: 100%;
            min-width: 560px;
        }
        .anagrafica-table thead, .and-table thead, .and-tabella thead,
        .dochr-table thead, .dor-tabella thead, .fin-table thead,
        .pers-table thead, .sm-table thead, .sol-table thead,
        .trf-table thead, .vrv-table thead {
            display: table;
            width: 100%;
            min-width: 560px;
        }
    }
}

/* =============================================================================
 * BLOCCO RESPONSIVE — GRIGLIE (Blocco 2, aggiunto 2026-06)
 *
 * Griglie KPI/stats che su desktop hanno 3/4/6 colonne fisse e su mobile
 * restano schiacciate. Le portiamo a 2 colonne sotto i 1024px e a 1 colonna
 * sui telefoni piccoli (<=430px).
 *
 * NON tocca: .sm-kpis (già gestita con auto-fit/minmax, si adatta da sola),
 * né le griglie già con grid-template-columns:1fr nei rispettivi @media.
 * ============================================================================= */
@media (max-width: 1024px) {
    /* Stats a colonne multiple → 2 colonne */
    .erp-log-stats,
    .erp-ord-stats,
    .fin-totali-filtro,
    .f24-hero,
    .f24-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .erp-ord-stats { gap: 10px !important; }
}

@media (max-width: 430px) {
    /* Telefoni piccoli: 1 sola colonna per le stats più dense */
    .erp-ord-stats,
    .f24-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
 * BLOCCO RESPONSIVE — TESTO E PULSANTI (Blocco 3, aggiunto 2026-06)
 *
 * Su mobile i titoli header (h2 dei moduli) e i valori KPI/hero grandi
 * (28-48px) mandano a capo male e rubano spazio. Li riduciamo di uno step.
 * Approccio per-pattern: tocchiamo le classi ricorrenti, non i singoli punti.
 *
 * I pulsanti ricevono un'area touch minima (40px) per essere comodi al dito.
 * ============================================================================= */
@media (max-width: 1024px) {

    /* Titoli header dei moduli: 24-26px → 20px */
    .anagrafica-header h2,
    .and-header h2,
    .fin-header h2,
    .hr-header h2,
    .pers-header h2,
    .prev-header h2,
    .reg-header h2,
    .sol-header h2,
    .trf-header h2 {
        font-size: 20px !important;
    }

    /* Valori KPI: 28px → 22px */
    .hr-kpi-val,
    .prev-kpi-val,
    .reg-kpi-val,
    .sm-kpi-val,
    .sol-kpi-val,
    .vrv-kpi-val,
    .erp-log-stat .num,
    .erp-ord-stat .num {
        font-size: 22px !important;
    }

    /* Valori HERO grandi (42-48px) → 30px */
    .sol-hero-val,
    .sm-hero-score,
    .and-hero-bilancio {
        font-size: 30px !important;
    }

    /* Pulsanti: area touch comoda al dito */
    .sm-btn,
    .vrv-btn,
    button.sm-btn {
        min-height: 40px;
    }
}

@media (max-width: 430px) {
    /* Telefoni piccoli: un altro step giù sui titoli e gli hero */
    .anagrafica-header h2, .and-header h2, .fin-header h2, .hr-header h2,
    .pers-header h2, .prev-header h2, .reg-header h2, .sol-header h2,
    .trf-header h2 {
        font-size: 18px !important;
    }
    .sol-hero-val, .sm-hero-score, .and-hero-bilancio {
        font-size: 26px !important;
    }
}

/* =============================================================================
 * BLOCCO RESPONSIVE — PADDING (Blocco 4, aggiunto 2026-06)
 *
 * Su mobile i padding grandi (24-50px) di card, modali, container e dropzone
 * rubano spazio orizzontale. Li riduciamo a valori compatti.
 * Mirato ai contenitori principali; non tocca micro-padding di celle/badge.
 * ============================================================================= */
@media (max-width: 1024px) {

    /* Header dei moduli con padding generoso */
    .sol-header,
    .and-header,
    .fin-header,
    .prev-header {
        padding: 18px !important;
    }

    /* Card di dettaglio e box contenuto */
    .erp-ord-detail,
    .sol-kpi-card {
        padding: 16px !important;
    }

    /* Modali: meno padding e larghezza piena su mobile */
    .modale-cliente-finestra {
        padding: 18px !important;
        width: 94% !important;
    }

    /* Empty state e dropzone: meno padding verticale */
    .erp-log-empty,
    .erp-ord-empty,
    .dochr-dropzone {
        padding: 24px 16px !important;
    }
}

@media (max-width: 430px) {
    /* Telefoni piccoli: padding card ancora più compatto */
    .erp-ord-detail,
    .sol-kpi-card {
        padding: 12px !important;
    }
}

/* =============================================================================
 * FIX RESPONSIVE — Tabella "Clienti in AOT" (#tabella-progetti)
 *
 * Questa tabella usa stili inline e id (non le classi del Blocco 1), quindi
 * va trattata a parte. La rendiamo scrollabile in orizzontale e diamo una
 * min-width così le colonne non si comprimono. I titoli colonna (TITOLO
 * COMMESSA ecc.) erano grandi: li riduciamo su mobile.
 * ============================================================================= */
@media (max-width: 1024px) {
    /* Contenitore scrollabile */
    *:has(> #tabella-progetti) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* La tabella mantiene larghezza leggibile e scrolla nel contenitore */
    #tabella-progetti {
        min-width: 640px;
    }
    /* Titoli colonna e celle più compatti su mobile */
    #tabella-progetti th {
        font-size: 11px !important;
        padding: 10px 10px !important;
        white-space: nowrap;
    }
    #tabella-progetti td {
        font-size: 13px !important;
        padding: 10px 10px !important;
    }
}

/* Fallback senza :has() */
@supports not selector(:has(*)) {
    @media (max-width: 1024px) {
        #tabella-progetti {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
        }
        #tabella-progetti thead,
        #tabella-progetti tbody { display: table; width: 100%; min-width: 640px; }
    }
}

/* =============================================================================
 * BLOCCO RESPONSIVE — SEZIONI HR / DIPENDENTI (aggiunto 2026-06)
 *
 * Le tabelle HR (.hr-table, .gj-table, .reg-table) hanno GIÀ un responsive
 * "card su mobile" con thead nascosto. Le griglie KPI usano auto-fit.
 * Qui si aggiungono solo le rifiniture:
 *   - Tab hrwrap più compatte su mobile
 *   - KPI values e header ridotti
 *   - Form giustificativi a colonna singola
 *   - Spaziature generali ridotte
 * ============================================================================= */
@media (max-width: 1024px) {

    /* --- Tab hrwrap: più compatte su mobile --- */
    .hrwrap .hrwrap-tab {
        padding: 10px 14px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }
    .hrwrap .hrwrap-tab svg,
    .hrwrap .hrwrap-tab .erp-ico {
        width: 15px !important;
        height: 15px !important;
    }
    .hrwrap-tabs {
        margin-bottom: 16px !important;
        gap: 2px !important;
    }

    /* --- Header HR: titolo più compatto --- */
    .hrwrap-header {
        margin-bottom: 16px !important;
    }
    .hrwrap-header h1 {
        font-size: 20px !important;
    }
    .hrwrap-header p {
        font-size: 13px !important;
    }

    /* --- KPI values HR e Registro: font ridotti --- */
    .hr-kpi-value,
    .reg-kpi-val {
        font-size: 22px !important;
    }
    .hr-kpi,
    .reg-kpi {
        padding: 14px !important;
    }
    .hr-kpi-grid,
    .reg-kpi-grid {
        gap: 10px !important;
    }

    /* --- Form giustificativi: colonna singola su mobile --- */
    .gj-form-row {
        grid-template-columns: 1fr !important;
    }

    /* --- Tipo card giustificativi: 2 colonne su mobile --- */
    .gj-tipo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Tabelle card: spaziatura ridotta tra le card --- */
    .hr-table tbody tr,
    .gj-table tbody tr,
    .reg-table tbody tr {
        margin-bottom: 10px !important;
        padding: 12px !important;
    }

    /* --- Riepilogo giustificativi: compatto --- */
    .gj-riepilogo {
        padding: 12px !important;
    }

    /* --- Badge in tab: più piccolo --- */
    .hrwrap-tab .badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
        min-width: 18px !important;
    }

    /* --- Registro assenze: filtri e navigazione --- */
    .reg-filtri {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .reg-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* --- Modale HR: occupa più schermo --- */
    .hr-modal {
        width: 95% !important;
        max-width: none !important;
        padding: 16px !important;
    }
    .gj-modal-content {
        width: 95% !important;
        max-width: none !important;
        padding: 18px !important;
    }
}

@media (max-width: 430px) {
    /* Telefoni piccoli: tab ancora più strette */
    .hrwrap .hrwrap-tab {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .hrwrap .hrwrap-tab svg,
    .hrwrap .hrwrap-tab .erp-ico {
        width: 14px !important;
        height: 14px !important;
    }

    /* KPI: 1 colonna */
    .hr-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tipo card giustificativi: 1 colonna */
    .gj-tipo-grid {
        grid-template-columns: 1fr !important;
    }

    /* Header ancora più piccolo */
    .hrwrap-header h1 {
        font-size: 18px !important;
    }
}
/* =============================================================================
 * BLOCCO RESPONSIVE — ANDAMENTO SOCIAL / VENDITE (aggiunto 2026-06)
 *
 * Le sezioni Andamento Social e Andamento Vendite non hanno CSS proprio:
 * dipendono interamente dal design system. La verifica responsive ha
 * mostrato che tabelle, KPI e yoy-cards sono già coperti dai blocchi
 * precedenti. Restavano scoperti due punti, qui sistemati:
 *
 *   1. .sm-hero-bignum / .sm-hero-sep — numeri hero a 48px che su mobile
 *      sfondano o sbilanciano l'hero (il gap:60px peggiora il problema).
 *   2. .sm-demo-grid — la regola a 2 colonne esisteva solo per @media print,
 *      non per schermo: su mobile il minmax(280px) può comprimersi male.
 *
 * Coerente con la disciplina del design system: definiamo qui ciò che manca,
 * tutto dentro @media (max-width: 1024px) per non toccare il desktop.
 * ============================================================================= */
@media (max-width: 1024px) {

    /* 1) Hero "bignum": 48px → 32px, gap ridotto perché su mobile va a capo */
    .sm-wrap .sm-hero-row {
        gap: 28px !important;
    }
    .sm-wrap .sm-hero-bignum {
        font-size: 32px !important;
    }
    .sm-wrap .sm-hero-sep {
        font-size: 22px !important;
    }

    /* 2) Demo-grid: 2 colonne su tablet/mobile (la regola a 2 col esisteva
       solo per la stampa). Soglia minmax abbassata per evitare compressione. */
    .sm-demo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

@media (max-width: 430px) {
    /* Telefoni piccoli: un ulteriore step giù e griglie a colonna singola */
    .sm-wrap .sm-hero-row {
        gap: 18px !important;
    }
    .sm-wrap .sm-hero-bignum {
        font-size: 26px !important;
    }
    .sm-demo-grid {
        grid-template-columns: 1fr !important;
    }
}