/**
 * DM Energy Reports — Frontend CSS
 * Dashboard clienti V2 + V1 compatibilità
 * @version 5.49.0 — palette e tipografia Kesva
 */

/* ====== CSS Variables — Palette v5.49.0: Kesva, allineata alla landing kesva.it ====== */
:root {
    --dm-primary: #0f2244;          /* navy Kesva (accent principale) */
    --dm-primary-light: rgba(15,34,68,.08);
    --dm-lime: #c3ec2e;             /* lime Kesva: azioni, evidenziazioni, MAI testo */
    --dm-lime-ink: #41541a;         /* verde scuro: testo leggibile SOPRA il lime */
    --dm-success: #16a34a;
    --dm-danger: #dc2626;
    --dm-warning: #d97706;
    --dm-dark: #0f2244;             /* navy sidebar / CTA forti */
    --dm-dark-2: #0a1730;           /* navy profondo (hover, header) */
    --dm-text: #3c4760;
    --dm-text-muted: #66708a;
    --dm-border: #dde4f2;
    --dm-border-light: #eef1f8;
    --dm-surface: #ffffff;
    --dm-surface-2: #faf9f5;        /* main bg: bianco caldo, come la landing */
    --dm-surface-3: #f4f2ec;        /* crema */
    --dm-radius: 16px;              /* v5.49.0: piu' asciutte, come la landing */
    --dm-radius-sm: 10px;
    --dm-radius-lg: 18px;
    --dm-radius-pill: 99px;
    --dm-shadow: 0 2px 4px rgba(15,34,68,.04), 0 14px 34px rgba(15,34,68,.07);
    --dm-shadow-md: 0 8px 20px -10px rgba(15,34,68,.28), 0 2px 6px rgba(15,34,68,.06);
    --dm-shadow-lg: 0 22px 44px -24px rgba(15,34,68,.45), 0 8px 16px -12px rgba(15,34,68,.20);
    --dm-heading: #0f2244;
    --dm-accent: var(--dm-primary);
    --dm-trans: .2s cubic-bezier(.4,0,.2,1);
    --dm-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dm-tracking-label: .14em;     /* etichette maiuscole spaziate, firma della landing */
}

/* Etichette maiuscole spaziate: cifra tipografica ripresa dalla landing */
.dm-er .dm-eyebrow, .dm-er .lbl, .dm-er .kicker {
    text-transform: uppercase;
    letter-spacing: var(--dm-tracking-label);
    font-weight: 700;
    font-size: 11px;
}

/* ====== Reset ====== */
.dm-er *, .dm-er *::before, .dm-er *::after { box-sizing: border-box; }
.dm-er { font-family: var(--dm-font); color: var(--dm-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.dm-er img { max-width: 100%; height: auto; }
.dm-er select, .dm-er input, .dm-er textarea { font-family: inherit; font-size: 13px; }

/* ====== Wrap ====== */
.dm-er .wrap { max-width: 1400px; margin: 0 auto; padding: 0; }
.dm-er.v2 .wrap { max-width: 100%; margin: 0 auto; padding: 0; }

/* ====== Layout (Sidebar + Main) ====== */
/* v5.97.5 — Fondo bianco su tutte le sezioni. Sta su .layout e non sulle singole
   viste perche' .layout e' alto quanto tutta la pagina: dipingendo il contenitore
   di sezione il bianco finiva col contenuto e sotto riaffiorava il fondo del tema.
   --dm-surface-2 resta il crema dei passaggi del mouse: non va toccato. */
.dm-er.v2 .layout {
    display: flex; min-height: 100vh;
    background: #fff;
}
.dm-er.v2 .layout .main { background: #fff; }

/* ====== Sidebar ====== */
.dm-er.v2 .sidebar {
    width: 240px; min-width: 240px;
    background: var(--dm-dark);
    color: #cbd5e1;
    display: flex; flex-direction: column;
    padding: 20px 16px;
    position: sticky; top: 0; height: 100vh;
    overflow: hidden; /* lo scroll lo gestisce .sb-top, così .sb-bottom resta pinnato */
}
/* v5.18.5 — il menu scorre internamente (scrollbar nascosta) e il blocco
   inferiore (tema + Esci) resta SEMPRE visibile in fondo, anche su schermi
   bassi o quando il contenitore DIVI riduce lo spazio. */
.dm-er.v2 .sb-top { flex: 1 1 auto; min-height: 0; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
.dm-er.v2 .sb-top::-webkit-scrollbar { width: 0; height: 0; display: none; }
.dm-er.v2 .sb-bottom { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }

.dm-er.v2 .brand {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.dm-er.v2 .brand img { height: 28px; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; }
.dm-er.v2 .brand strong { color: #fff; font-size: 14px; }

.dm-er.v2 .menu { display: flex; flex-direction: column; gap: 2px; }
.dm-er.v2 .menu a, .dm-er.v2 a.menu {
    display: block; padding: 8px 12px; border-radius: var(--dm-radius-sm);
    color: #94a3b8; text-decoration: none; font-size: 13px; font-weight: 500;
    transition: all .15s;
}
.dm-er.v2 .menu a:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.dm-er.v2 .menu a.active { color: var(--dm-heading); font-weight: 700; }

.dm-er.v2 .help {
    margin-top: 20px; padding: 14px;
    background: rgba(255,255,255,.04); border-radius: var(--dm-radius-sm);
    font-size: 12px;
}
.dm-er.v2 .help strong { color: #e2e8f0; display: block; margin-bottom: 4px; }

/* ====== Main Content ====== */
.dm-er.v2 .main {
    flex: 1; padding: 24px 28px;
    overflow-x: hidden;
}

/* ====== Header ====== */
.dm-er.v2 .header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.dm-er.v2 .header-actions{
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* v5.97.3 — header senza titolo (Riepilogo): la riga tiene solo il blocco utente,
   spinto a destra, e cede spazio verticale alla sezione sottostante. */
.dm-er.v2 .header.header-bare{
    justify-content: flex-end;
}
.dm-er.v2 .title-card {
    font-size: 28px; font-weight: 800; color: var(--dm-heading); letter-spacing: -0.02em;
}
.dm-er.v2 .daterange {
    font-size: 13px; color: var(--dm-text-muted);
    background: var(--dm-surface); padding: 4px 12px;
    border-radius: 20px; border: 1px solid var(--dm-border);
}
.dm-er.v2 .user {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--dm-text);
    padding-left: 6px;
}
.dm-er.v2 .user img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--dm-border-light);
}

/* ====== Grid ====== */
.dm-er .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;          /* v5.7.4: piu' aria fra le card */
}

/* ====== Cards ====== */
.dm-er .card {
    background: var(--dm-surface);
    border-radius: var(--dm-radius);
    padding: 18px 20px;
    box-shadow: var(--dm-shadow);
    border: none;                 /* v5.7.6: card piene, senza bordo */
    transition: box-shadow .2s;
}
.dm-er .card:hover { box-shadow: var(--dm-shadow-md); }
.dm-er .card.center {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;   /* v5.7.7: label in alto, allineate fra card */
    gap: 8px;
    min-height: 140px;
    padding: 22px 24px;
    overflow: hidden;
}
.dm-er .card.center .k {
    margin: 0;
    color: inherit; opacity: 1;
    font-size: 15px; font-weight: 600;
    text-transform: none; letter-spacing: -0.01em;
}
.dm-er .card.center .v {
    margin: 0;
    font-size: 34px; font-weight: 700;
    letter-spacing: -0.03em;
    color: inherit;
    line-height: 1.05;
}
/* v5.7.7 — sub-info (media/mese, pill, POD-PDR) ancorata in BASSO:
   cosi' label+valore restano allineati in alto fra tutte le card. */
.dm-er .card.center > *:last-child:not(.k):not(.v){ margin-top: auto !important; }

/* ====== Typography ====== */
.dm-er .k {
    font-size: 13px; font-weight: 600; text-transform: none;
    letter-spacing: -0.005em; color: var(--dm-heading);
}
/* v5.7.6: titoli DENTRO le card (grafici) — neri e grandi */
.dm-er .card .k {
    font-size: 17px; font-weight: 700; color: var(--dm-heading);
    text-transform: none; letter-spacing: -0.015em;
    margin-bottom: 12px;
}
.dm-er .v {
    font-size: 26px; font-weight: 800; color: var(--dm-heading);
    line-height: 1.2; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.dm-er .muted { color: var(--dm-text-muted); }

/* ====== Pills / Badges ====== */
.dm-er .pill {
    display: inline-block; padding: 3px 10px;
    border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(16,185,129,.08); color: var(--dm-success);
    border: 1px solid rgba(16,185,129,.2);
}
.dm-er .pill.bad {
    background: rgba(239,68,68,.08); color: var(--dm-danger);
    border-color: rgba(239,68,68,.2);
}
.dm-er .pill.ok { background: rgba(16,185,129,.08); color: var(--dm-success); border-color: rgba(16,185,129,.2); }
.dm-er .pill.warn { background: rgba(245,158,11,.08); color: var(--dm-warning); border-color: rgba(245,158,11,.2); }
.dm-er .pill-s { font-size: 11px; padding: 2px 8px; }

/* ====== Buttons ====== */
.dm-er .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--dm-radius-sm);
    font-size: 13px; font-weight: 600; text-decoration: none;
    cursor: pointer; border: 1px solid var(--dm-border);
    background: var(--dm-surface); color: var(--dm-text);
    transition: all .15s;
}
.dm-er .btn:hover { background: var(--dm-surface-3); }
.dm-er .btn.primary {
    background: var(--dm-dark); color: #fff;
    border-color: var(--dm-dark);
}
.dm-er .btn.primary:hover { background: #1f2f2c; }
.dm-er .btn.export {
    font-size: 12px; padding: 6px 12px;
    background: var(--dm-surface); color: var(--dm-text-muted);
    border: 1px solid var(--dm-border);
}
.dm-er .btn.export:hover { color: var(--dm-primary); border-color: var(--dm-primary); }

/* ====== Export Bar ====== */
.dm-er .export-bar {
    display: flex; justify-content: flex-end; gap: 8px;
    margin: 12px 0;
}

/* ====== Tables ====== */
.dm-er table.dm-er-mini {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.dm-er table.dm-er-mini th {
    text-align: left; padding: 8px 10px;
    font-weight: 600; font-size: 11px; text-transform: uppercase;
    letter-spacing: .3px; color: var(--dm-text-muted);
    background: var(--dm-surface-3); border-bottom: 2px solid var(--dm-border);
}
.dm-er table.dm-er-mini td {
    padding: 7px 10px; border-bottom: 1px solid var(--dm-border-light);
}
.dm-er table.dm-er-mini tr:hover td { background: rgba(99,102,241,.02); }
.dm-er table.dm-er-mini b { font-weight: 700; }

/* ====== Select / Inputs ====== */
.dm-er select {
    width: 100%; padding: 8px 10px; border-radius: var(--dm-radius-sm);
    border: 1px solid var(--dm-border); background: var(--dm-surface);
    font-size: 13px; color: var(--dm-text); cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
.dm-er select:focus { outline: none; border-color: var(--dm-primary); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

/* ====== Note Alert ====== */
.dm-er .note-alert {
    margin-top: 12px; padding: 12px;
    background: rgba(245,158,11,.06); border-radius: var(--dm-radius-sm);
    border: 1px solid rgba(245,158,11,.15);
}
.dm-er .na-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dm-er .na-title { font-weight: 700; font-size: 13px; color: #92400e; }
.dm-er .na-meta { font-size: 11px; color: var(--dm-text-muted); }
.dm-er .na-body { font-size: 13px; color: #78350f; line-height: 1.5; }
.dm-er .na-actions { margin-top: 8px; }
.dm-er .na-btn, .dm-er .dm-er-ack-btn {
    padding: 4px 12px; border-radius: 6px; font-size: 11px;
    font-weight: 600; cursor: pointer; border: 1px solid rgba(245,158,11,.3);
    background: rgba(245,158,11,.08); color: #92400e;
    transition: all .15s;
}
.dm-er .na-btn:hover, .dm-er .dm-er-ack-btn:hover { background: rgba(245,158,11,.15); }

.dm-er .note-card { margin-top: 12px; padding: 10px 12px; background: var(--dm-surface-3); border-radius: var(--dm-radius-sm); }
.dm-er .note-body { font-size: 12px; color: var(--dm-text-muted); }

/* ====== Login ====== */
.dm-er .login-wrap {
    max-width: 400px; margin: 60px auto; padding: 32px;
    background: var(--dm-surface); border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow-md); text-align: center;
}
.dm-er .login-wrap h2 { margin-bottom: 20px; font-size: 20px; font-weight: 700; }
.dm-er .login-wrap label { display: block; text-align: left; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.dm-er .login-wrap input[type="text"],
.dm-er .login-wrap input[type="password"] {
    width: 100%; padding: 10px 12px; margin-bottom: 12px;
    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm);
    font-size: 14px;
}
.dm-er .login-wrap input[type="submit"] {
    width: 100%; padding: 10px; margin-top: 8px;
    background: var(--dm-primary); color: #fff;
    border: none; border-radius: var(--dm-radius-sm);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.dm-er .login-wrap input[type="submit"]:hover { background: #4f46e5; }

/* ====== Client Meta Card ====== */
.dm-er .client-meta { border-left: 3px solid var(--dm-primary); }

/* ====== V1 Legacy ====== */
.dm-er .topbar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dm-er .form-row { display: flex; flex-direction: column; gap: 4px; }
.dm-er .lbl { font-size: 11px; font-weight: 600; color: var(--dm-text-muted); text-transform: uppercase; }
.dm-er .select-pill select { padding: 8px 12px; border-radius: 20px; border: 1px solid var(--dm-border); }
.dm-er .btn-cta { padding: 8px 20px; background: var(--dm-primary); color: #fff; border: none; border-radius: 20px; font-weight: 600; cursor: pointer; }
.dm-er .meta { text-align: center; margin: 12px 0; }
.dm-er .meta .row { display: inline-block; margin: 0 10px; }
.dm-er .meta .key { font-weight: 600; }
.dm-er .meta .val { margin-left: 4px; }
.dm-er .totals-stack { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 16px 0; flex-wrap: wrap; }
.dm-er .total-card { text-align: center; padding: 16px 24px; background: var(--dm-surface); border-radius: var(--dm-radius); box-shadow: var(--dm-shadow); }
.dm-er .total-card .t { font-size: 12px; color: var(--dm-text-muted); font-weight: 600; text-transform: uppercase; }
.dm-er .total-card .v { font-size: 28px; font-weight: 800; margin-top: 4px; }
.dm-er .pct-pill { display: inline-block; padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; background: rgba(16,185,129,.1); color: var(--dm-success); }
.dm-er .pct-pill.bad { background: rgba(239,68,68,.1); color: var(--dm-danger); }
.dm-er .cta-row { display: flex; align-items: flex-end; }

/* ====== Responsive ====== */
/* Topbar mobile + nav off-canvas: nascosti su desktop */
.dm-er.v2 .dm-topbar{ display:none; }
.dm-er.v2 .dm-nav-backdrop{ display:none; }
.dm-er.v2 .sb-close{ display:none; }

@media (max-width: 1200px) {
    .dm-er .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .dm-er .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .dm-er .card.center { min-height: 110px; padding: 16px 14px; }
    .dm-er .v { font-size: 22px; }
    .dm-er table.dm-er-mini { font-size: 12px; }
}

/* ===== MOBILE / TABLET: sidebar off-canvas con hamburger ===== */
@media (max-width: 900px) {
    /* topbar visibile */
    .dm-er.v2 .dm-topbar{
        display:flex; align-items:center; gap:12px;
        position:sticky; top:0; z-index:210;
        padding:11px 16px;
        background:var(--dm-surface); border-bottom:1px solid var(--dm-border-light);
    }
    .dm-er.v2 .dm-burger{
        display:inline-flex; align-items:center; justify-content:center;
        width:42px; height:42px; border:none; border-radius:11px; cursor:pointer;
        background:var(--dm-surface-3); color:var(--dm-heading); flex-shrink:0; padding:0;
    }
    .dm-er.v2 .dm-burger:active{ transform:scale(.94); }
    .dm-er.v2 .dm-topbar-brand{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
    .dm-er.v2 .dm-topbar-brand img{ height:26px; width:auto; max-width:130px; object-fit:contain; }
    .dm-er.v2 .dm-topbar-brand strong{ font-size:15px; font-weight:800; color:var(--dm-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* v5.99.5 — Sezione corrente accanto al marchio, separata da un punto medio.
       Se lo spazio non basta e' il marchio a cedere per primo: sapere dove si e'
       vale piu' che rileggere il nome del sito. */
    .dm-er.v2 .dm-topbar-view{
        display:block;
        font-size:13px; font-weight:700; color:var(--dm-text-muted);
        letter-spacing:var(--dm-tracking-label,.06em); text-transform:uppercase;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
    }
    .dm-er.v2 .dm-topbar-view::before{ content:'·'; margin:0 7px; color:var(--dm-border); }
    .dm-er.v2 .dm-topbar-brand strong{ flex-shrink:1; }
    .dm-er.v2 .dm-topbar-user{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--dm-border-light); }
    .dm-er.v2 .dm-topbar-sp{ width:34px; flex-shrink:0; }

    /* layout in colonna, menu a TENDINA che scende dall'alto (verticale) */
    .dm-er.v2 .wrap{ padding:0; }
    .dm-er.v2 .layout{ flex-direction:column; }
    /* v5.99.5 — Il pannello si aggancia SOTTO la topbar invece di partire da
       top:0 con 64px di imbottitura. --dm-nav-top lo calcola il JS misurando dove
       finisce davvero la banda, che cambia con la barra di amministrazione di
       WordPress. Cosi' il bordo arrotondato e l'ombra si vedono, e si capisce che
       e' un pannello che scende e non una pagina nuova. */
    .dm-er.v2 .sidebar{
        position:fixed; top:var(--dm-nav-top, 56px); left:0; right:0;
        width:100%; min-width:0; max-width:none;
        height:auto;
        max-height:calc(100vh - var(--dm-nav-top, 56px) - 12px);
        max-height:calc(100dvh - var(--dm-nav-top, 56px) - 12px);
        padding-top:12px;
        transform:translateY(-110%);
        transition:transform .32s cubic-bezier(.4,0,.2,1);
        z-index:200; overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;   /* lo scorrimento non trascina la pagina sotto */
        border-radius:0 0 var(--dm-radius-lg) var(--dm-radius-lg);
    }
    .dm-er.v2.nav-open .sidebar{ transform:translateY(0); box-shadow:0 22px 44px rgba(2,6,23,.30); }
    .dm-er.v2 .sidebar .brand{ display:none; }

    /* Tap target: le voci stavano a 29-35px, sotto la soglia comoda per un dito.
       Misurate a 360, 375 e 390px: a 48px il menu resta tutto sopra la piega. */
    .dm-er.v2 .menu a{
        min-height:48px; padding:0 14px; gap:14px;
        font-size:15px; border-radius:11px;
    }
    .dm-er.v2 .menu{ gap:2px; }
    .dm-er.v2 .menu a .dm-icon{ width:20px; height:20px; }
    /* La voce corrente si legge a colpo d'occhio anche senza il colore di sfondo. */
    .dm-er.v2 .menu a.active{ font-weight:800; }
    .dm-er.v2 .sb-bottom a{ min-height:48px; padding:0 14px; gap:14px; font-size:15px; }
    .dm-er.v2 .menu{ flex-direction:column; }

    /* backdrop */
    .dm-er.v2.nav-open .dm-nav-backdrop{ display:block; position:fixed; inset:0; z-index:150; background:rgba(2,6,23,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

    /* freccia di collasso inutile su mobile; annulla lo stato compresso */
    .dm-er.v2 .sb-toggle{ display:none; }
    /* v5.99.5 — La X torna visibile: chiudere toccando il backdrop o ri-toccando
       l'hamburger funziona, ma nessuna delle due e' un'affordance che si vede. */
    .dm-er.v2 .sb-close{
        display:inline-flex; align-items:center; justify-content:center;
        position:absolute; top:10px; right:14px; z-index:3;
        width:40px; height:40px; padding:0; border:none; cursor:pointer;
        border-radius:11px; background:rgba(255,255,255,.10); color:#fff;
    }
    .dm-er.v2 .sb-close:active{ transform:scale(.93); }
    .dm-er.v2 .brand{ padding-right:46px; }
    .dm-er.v2.sb-collapsed .sidebar{ overflow-x:visible; }
    .dm-er.v2.sb-collapsed .menu a{ justify-content:flex-start; gap:12px; padding:11px 14px; }
    .dm-er.v2.sb-collapsed .menu a span{ opacity:1; width:auto; }
    .dm-er.v2.sb-collapsed .menu a .dm-icon{ width:18px; height:18px; }
    .dm-er.v2.sb-collapsed .brand{ justify-content:space-between; padding-bottom:0; }
    .dm-er.v2.sb-collapsed .brand strong{ display:inline; }
    /* v5.57.0 — il ripristino del logo esteso sotto i 900px (sidebar off-canvas a
       piena larghezza) sta piu' in basso con !important, per battere la regola
       globale che ora usa !important. Qui la riga senza !important era inefficace. */
    .dm-er.v2.sb-collapsed .help{ display:block; }
    .dm-er.v2.sb-collapsed .sb-bottom a.menu{ justify-content:flex-start; }
    .dm-er.v2.sb-collapsed .sb-bottom a.menu span{ display:inline; }

    /* main a tutta larghezza */
    .dm-er.v2 .main{ padding:16px; }

    /* griglie a colonna unica */
    .dm-er .grid-4, .dm-er .grid-3, .dm-er .grid-2{ grid-template-columns:1fr; gap:12px; }

    /* header di sezione compatto */
    .dm-er.v2 .header{ flex-wrap:wrap; gap:10px; align-items:flex-start; }
    .dm-er.v2 .title-card{ font-size:18px; }
    .dm-er.v2 .header-actions{ flex-wrap:wrap; gap:8px; }
    .dm-er .v { font-size: 20px; }
    .dm-er .card { padding: 16px; }
    .dm-er .card.center { min-height: 96px; padding: 14px 12px; }
    .dm-er .pill { font-size: 11px; padding: 3px 10px; }
    .dm-er .export-bar { flex-wrap: wrap; }

    /* tabelle: scorrimento orizzontale */
    .dm-er .card:has(table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .dm-er table.dm-er-mini{ min-width:520px; font-size:12px; }
    .dm-er table.dm-er-mini th, .dm-er table.dm-er-mini td{ padding:7px 9px; }
    .dm-er .card select{ font-size:14px; }
}

@media (max-width: 480px) {
    .dm-er.v2 .main{ padding:12px; }
    .dm-er .grid-4{ gap:10px; }
    .dm-er .v{ font-size:19px; }
    .dm-er .k{ font-size:10px; }
    .dm-er .card{ padding:13px; }
    .dm-er .card.center{ min-height:88px; }
    .dm-er.v2 .header .daterange{ font-size:11px; }
}

/* ====== Chart containers ====== */
.dm-er canvas { max-width: 100%; }

/* ============================================================
   v5.11.1 — RESPONSIVE GRAFICI SU MOBILE
   I contenitori dei grafici impostano grid-template-columns inline
   (es. style="grid-template-columns:1fr 1fr"). Lo stile inline ha
   specificita' maggiore di qualunque media query a classe, percio' su
   mobile i grafici restavano affiancati e schiacciati invece di
   impilarsi. Qui forziamo la singola colonna (!important per battere
   l'inline) e riduciamo le altezze fisse dei contenitori canvas
   (impostate inline come height:280px / height:260px, intercettate
   con selettore di attributo).
   ============================================================ */
@media (max-width: 600px){
    .dm-er .grid-4, .dm-er .grid-3, .dm-er .grid-2{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dm-er div[style*="height:280px"]{ height: 230px !important; }
    .dm-er div[style*="height:260px"]{ height: 220px !important; }
    .dm-er div[style*="height:280px"] > canvas,
    .dm-er div[style*="height:260px"] > canvas{ height: 100% !important; }
    .dm-er.v2 .card .k{ font-size: 12px; }
}
@media (max-width: 400px){
    .dm-er div[style*="height:280px"]{ height: 205px !important; }
    .dm-er div[style*="height:260px"]{ height: 195px !important; }
}

/* ====== Print ====== */
@media print {
    .dm-er.v2 .sidebar { display: none; }
    .dm-er.v2 .main { padding: 0; }
    .dm-er .btn, .dm-er .export-bar { display: none; }
}

/* ============================================================
   v5.2.0 — UX/UI OVERHAUL (Blocco 1): dinamicità,
   animazioni, sticky, tabelle responsive, micro-polish.
   ============================================================ */

/* ---- versione ---- */
/* @version 5.2.0 */

/* ====== TRANSIZIONI GLOBALI (dinamicità "soft") ====== */
.dm-er.v2 .card,
.dm-er.v2 .btn,
.dm-er.v2 .pill,
.dm-er.v2 .menu a,
.dm-er.v2 table.dm-er-mini td,
.dm-er.v2 select{
    transition: background-color var(--dm-trans), color var(--dm-trans),
                border-color var(--dm-trans), box-shadow var(--dm-trans),
                transform var(--dm-trans);
}

/* ====== CARD: hover sobrio — solo ombra leggermente piu' profonda ====== */
.dm-er.v2 .card{ position: relative; transition: box-shadow var(--dm-trans), border-color var(--dm-trans); }
.dm-er.v2 .card:hover{ box-shadow: var(--dm-shadow-md); }

/* KPI: il numero si ingrandisce (senza cambiare colore) quando passi sulla card */
.dm-er.v2 .card.center .v{ transition: transform var(--dm-trans); transform-origin: center; }
.dm-er.v2 .card.center:hover .v{ transform: scale(1.10); }

/* ====== HERO KPI (card principale ingrandita) — pronta per il Blocco 2 ====== */
.dm-er.v2 .card.hero{
    background: linear-gradient(135deg, var(--dm-dark) 0%, #16305c 100%); /* v5.53.0: era #3a5754, petrolio */
    border: none; color: #fff;
    position: relative; overflow: hidden;
}
/* Pattern decorativo SVG (onde) in alto a destra — su tutte le hero */
.dm-er.v2 .card.hero::after{
    content:""; position:absolute; right:-30px; top:-30px;
    width: 220px; height: 220px; pointer-events:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path d='M0,40 Q50,20 100,40 T200,40' stroke='white' stroke-width='2' fill='none' opacity='0.5'/><path d='M0,80 Q50,60 100,80 T200,80' stroke='white' stroke-width='2' fill='none' opacity='0.4'/><path d='M0,120 Q50,100 100,120 T200,120' stroke='white' stroke-width='2' fill='none' opacity='0.3'/><path d='M0,160 Q50,140 100,160 T200,160' stroke='white' stroke-width='2' fill='none' opacity='0.2'/></svg>");
    background-repeat: no-repeat; background-size: contain;
    opacity: .55;
}
.dm-er.v2 .card.hero .k{ color: rgba(255,255,255,.78); position: relative; z-index:1; }
.dm-er.v2 .card.hero .v{ color: #fff; font-size: 34px; position: relative; z-index:1; }
.dm-er.v2 .card.hero > div{ position: relative; z-index:1; }
.dm-er.v2 .card.hero::before{ display:none; }
.dm-er.v2 .card.hero:hover{ box-shadow: 0 18px 40px rgba(47,72,69,.45); }
.dm-er.v2 .card.hero:hover .v{ color:#fff; }
.dm-er.v2 .card.hero:hover .k{ color: rgba(255,255,255,.85); }
.dm-er.v2 .card.hero .pill{ background: rgba(255,255,255,.18); color:#fff; border-color: rgba(255,255,255,.4); }
.dm-er.v2 .card.hero .pill.bad{ background: rgba(255,255,255,.22); color:#fff; border-color: rgba(255,255,255,.5); }
/* hero in base alla variazione: verde se il consumo cala, rosso se aumenta */
.dm-er.v2 .card.hero.hero-good{ background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.dm-er.v2 .card.hero.hero-good:hover{ box-shadow: 0 18px 40px rgba(5,150,105,.45); }
.dm-er.v2 .card.hero.hero-bad{ background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%); }
.dm-er.v2 .card.hero.hero-bad:hover{ box-shadow: 0 18px 40px rgba(220,38,38,.45); }

/* ====== PILLS: micro-feedback ====== */
.dm-er.v2 .pill:hover{ transform: translateY(-1px); }

/* ====== BOTTONI: lift + ombra accento ====== */
.dm-er.v2 .btn:hover{ transform: translateY(-1px); box-shadow: var(--dm-shadow); }
.dm-er.v2 .btn.primary:hover{ box-shadow: 0 6px 16px rgba(47,72,69,.45); }
.dm-er.v2 .btn:active{ transform: translateY(0); }

/* v5.7.2 — RIMOSSA la barra d'accento verticale al hover (era invadente).
   L'unico cue al hover e' lo sfondo soft, gia' definito sopra. */

/* v5.7.2 — blocco scoop v5.7.0 (radius 14, box-shadow) RIMOSSO:
   la versione finale a 32px e' definita piu' in basso ed e' l'unica autorita'. */

/* ====== TABELLE: riga che si "accende" e scorre leggermente ====== */
.dm-er.v2 table.dm-er-mini tr{ transition: background-color var(--dm-trans); }
.dm-er.v2 table.dm-er-mini tbody tr:hover td{
    background: var(--dm-primary-light);
}
.dm-er.v2 table.dm-er-mini tbody tr:hover td:first-child{
    box-shadow: inset 3px 0 0 var(--dm-primary);
}
.dm-er.v2 table.dm-er-mini td{ font-variant-numeric: tabular-nums; }

/* ====== HEADER STICKY (resta in alto mentre scorri) ====== */
.dm-er.v2 .header{
    position: sticky; top: 0; z-index: 30;
    margin: -24px -28px 24px; padding: 18px 28px;
    background: color-mix(in srgb, #fff 82%, transparent);  /* v5.97.5 */
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: none;          /* v5.7.7: niente linea sopra le card */
}

/* ====== ANIMAZIONI D'INGRESSO (stagger leggero sulle card) ====== */
@keyframes dmFadeUp{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }
.dm-er.v2 .grid-4 > .card{ animation: dmFadeUp .45s both; }
.dm-er.v2 .grid-4 > .card:nth-child(1){ animation-delay: .02s; }
.dm-er.v2 .grid-4 > .card:nth-child(2){ animation-delay: .08s; }
.dm-er.v2 .grid-4 > .card:nth-child(3){ animation-delay: .14s; }
.dm-er.v2 .grid-4 > .card:nth-child(4){ animation-delay: .20s; }
.dm-er.v2 .grid-4 > .card:nth-child(n+5){ animation-delay: .24s; }

/* ====== SKELETON / SHIMMER (utility, usata nel Blocco 2 per i grafici) ====== */
@keyframes dmShimmer{ 0%{ background-position: -460px 0; } 100%{ background-position: 460px 0; } }
.dm-er.v2 .dm-skeleton{
    border-radius: var(--dm-radius-sm);
    background: linear-gradient(90deg, var(--dm-surface-3) 25%, var(--dm-border-light) 37%, var(--dm-surface-3) 63%);
    background-size: 920px 100%;
    animation: dmShimmer 1.3s infinite linear;
}

/* ====== ACCESSIBILITÀ: rispetta chi preferisce meno animazioni ====== */
@media (prefers-reduced-motion: reduce){
    .dm-er.v2 *,
    .dm-er.v2 .grid-4 > .card{
        animation: none !important;
        transition: none !important;
    }
    .dm-er.v2 .card:hover{ transform: none; }
}

/* ============================================================
   v5.6.0 — Riorganizzazione Riepilogo per sezioni materia
   ============================================================ */
.dm-er.v2 .dm-er-mat-section { margin-top: 48px; }
.dm-er.v2 .dm-er-mat-section:first-of-type { margin-top: 32px; }
.dm-er.v2 .dm-er-mat-title{
    display:flex; align-items:center; gap:12px;
    margin: 0 0 20px; padding-bottom: 0;
    border-bottom: none;          /* v5.7.6: nessuna linea separatrice */
}
.dm-er.v2 .dm-er-mat-title .dm-er-mat-ico{ font-size: 26px; line-height: 1; }
.dm-er.v2 .dm-er-mat-title h2{
    margin: 0; font-size: var(--dm-fs-2xl); font-weight: 800;
    color: var(--dm-heading); letter-spacing: -0.02em;
}
/* Riassunto annuale: tabella pulita ed ariosa */
.dm-er.v2 .dm-er-summary-tbl{ background: var(--dm-surface); }
.dm-er.v2 .dm-er-summary-tbl th{
    font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .5px;
    color: var(--dm-text-muted); padding: 12px 14px;
    background: var(--dm-surface-3); border-bottom: 1px solid var(--dm-border);
}
.dm-er.v2 .dm-er-summary-tbl td{
    padding: 14px; font-size: 14px;
    border-bottom: 1px solid var(--dm-border-light);
}
.dm-er.v2 .dm-er-summary-tbl tbody tr:last-child td{ border-bottom: none; }
.dm-er.v2 .dm-er-summary-tbl tbody tr:hover td{ background: var(--dm-surface-2); }

/* ============================================================
   v5.7.0 — Apple-style: icone SVG, scala tipografica coesa,
   scoop sidebar rifatto, pattern hero off, chart minimal.
   ============================================================ */

/* ---- Scala tipografica (Apple-like, coesa) ---- */
:root {
    --dm-fs-xs:  11px;
    --dm-fs-sm:  13px;
    --dm-fs-base:14px;
    --dm-fs-md:  15px;
    --dm-fs-lg:  17px;
    --dm-fs-xl:  22px;
    --dm-fs-2xl: 28px;
}
.dm-er.v2 { font-size: var(--dm-fs-base); letter-spacing: -0.005em; }
.dm-er.v2 .k { font-size: var(--dm-fs-sm); letter-spacing: -0.005em; font-weight: 600; text-transform: none; color: var(--dm-heading); }
.dm-er.v2 .v { font-size: var(--dm-fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.dm-er.v2 .title-card { font-size: var(--dm-fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
.dm-er.v2 .dm-er-mat-title h2 { font-size: var(--dm-fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.dm-er.v2 .card.hero .v { font-size: 32px; font-weight: 700; }
.dm-er.v2 select, .dm-er.v2 input, .dm-er.v2 textarea { font-size: var(--dm-fs-sm); }

/* ---- Icone SVG inline (sostituiscono le emoji) ---- */
.dm-er .dm-icon { display:inline-block; vertical-align:middle; flex-shrink:0; }
.dm-er .dm-er-mat-ico { color: var(--dm-primary); flex-shrink: 0; }

/* ---- SIDEBAR: voci menu con icona+label, allineate ---- */
.dm-er.v2 .menu a, .dm-er.v2 a.menu {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--dm-radius-sm);
    color: #c2cfcd;
    text-decoration: none;
    font-size: var(--dm-fs-md);          /* v5.7.2: 15px - piu' leggibile */
    font-weight: 500;
    letter-spacing: -0.005em;
}
.dm-er.v2 .menu a .dm-icon { color: #b5c4c2; opacity: .85; }
.dm-er.v2 .menu a:hover .dm-icon { color: #fff; opacity: 1; }

/* v5.7.4 — VOCE ATTIVA SOBRIA (stile NexaVerse): niente imbuto/scoop,
   solo sfondo soft e tipografia piu' marcata. Pulito, attaccato, leggibile. */
@media (min-width:901px){ .dm-er.v2 .sidebar { overflow: visible; } }
.dm-er.v2 .menu a.active{
    background: rgba(255,255,255,.11);
    color: #ffffff;
    font-weight: 600;
    border-radius: 12px;
}
/* v5.7.8 — colore icona voce attiva emesso da PHP (configurabile) */
/* ---- Hero pattern OFF: la card resta col solo gradiente, piu' pulita ---- */
.dm-er.v2 .card.hero::after{ display: none !important; }

/* ---- Toggle tema: icone SVG (sun/moon) invece di emoji ---- */

/* ---- CARD: bordi e ombre piu' Apple (sottili e morbidi) ---- */
.dm-er.v2 .card { border-width: 1px; }
.dm-er.v2 .card:hover { box-shadow: 0 4px 8px rgba(15,34,68,.05), 0 20px 44px rgba(15,34,68,.11); }

/* ---- Tabella riassunto: piu' arieggiata ---- */
.dm-er.v2 .dm-er-summary-tbl td { padding: 16px 14px; font-size: var(--dm-fs-base); }
.dm-er.v2 .dm-er-summary-tbl .sum-ico svg { stroke-width: 1.5; }

/* ---- Pill / Bottoni: arrotondamento Apple ---- */
.dm-er.v2 .pill { border-radius: 999px; font-weight: 600; }
.dm-er.v2 .btn { border-radius: 10px; font-weight: 500; letter-spacing: -0.005em; }

/* ============================================================
   v5.7.2 — Effetti "scenici" minimal: stagger fade-up + watermark
   icone materia + linea decorativa che cresce sotto i titoli.
   ============================================================ */

/* Sezione materia: cornice base per le decorazioni assolute interne */
.dm-er.v2 .dm-er-mat-section { position: relative; }

/* Watermark icona materia: un SVG grande in semi-trasparenza nell'angolo
   alto-destro di ogni sezione. Decorativo, non interferisce con i click. */
.dm-er.v2 .dm-er-mat-deco{
    position: absolute; top: -10px; right: -10px;
    pointer-events: none; color: var(--dm-dark);
    opacity: 0;
    z-index: 0;
    animation: dmDecoIn 1.2s cubic-bezier(.16,1,.3,1) .15s both;
}
.dm-er.v2 .dm-er-mat-deco{ display: none !important; }   /* v5.7.6: illustrazioni rimosse */
@keyframes dmDecoIn{ from { opacity: 0; transform: translateY(-12px) rotate(-4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.dm-er.v2 .dm-er-mat-section > *:not(.dm-er-mat-deco){ position: relative; z-index: 1; }

/* v5.7.5 — RIMOSSA la linea decorativa sotto il titolo sezione (Diego). */
.dm-er.v2 .dm-er-mat-title{ position: relative; border-bottom: none; }
/* Stagger fade-up delle sezioni materia (5 sezioni: ogni 80ms di ritardo) */
.dm-er.v2 .dm-er-mat-section{
    opacity: 0; transform: translateY(14px);
    animation: dmSectionIn .65s cubic-bezier(.16,1,.3,1) both;
}
.dm-er.v2 .dm-er-mat-section:nth-of-type(1){ animation-delay: .05s; }
.dm-er.v2 .dm-er-mat-section:nth-of-type(2){ animation-delay: .15s; }
.dm-er.v2 .dm-er-mat-section:nth-of-type(3){ animation-delay: .25s; }
.dm-er.v2 .dm-er-mat-section:nth-of-type(4){ animation-delay: .35s; }
.dm-er.v2 .dm-er-mat-section:nth-of-type(5){ animation-delay: .45s; }
.dm-er.v2 .dm-er-mat-section:nth-of-type(6){ animation-delay: .55s; }
@keyframes dmSectionIn{ from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

/* Hero card: cerchio di luce decorativo (gradiente radiale soft) */
.dm-er.v2 .card.hero{ position: relative; overflow: hidden; }
.dm-er.v2 .card.hero::before{
    content: ""; position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: dmHeroGlow 8s ease-in-out infinite;
}
.dm-er.v2 .card.hero > *{ position: relative; z-index: 1; }
@keyframes dmHeroGlow{
    0%, 100% { transform: scale(1) translate(0,0); opacity: .85; }
    50% { transform: scale(1.1) translate(-8px, 6px); opacity: 1; }
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .dm-er.v2 .dm-er-mat-section,
    .dm-er.v2 .dm-er-mat-deco,
    .dm-er.v2 .dm-er-mat-title::after,
    .dm-er.v2 .card.hero::before { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* v5.7.3 — Loader overlay (skeleton-like) per form submit + export */
#dmLoaderOverlay{
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    animation: dmFadeIn .18s ease-out;
}
.dm-loader-card{
    background: var(--dm-surface, #fff);
    color: var(--dm-heading, #1f2937);
    padding: 20px 26px;
    border-radius: 18px;
    display: flex; align-items: center; gap: 14px;
    font: 500 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dm-loader-spin{
    color: var(--dm-primary, #c89a35);
    animation: dmSpin 1s linear infinite;
}
@keyframes dmSpin { to { transform: rotate(360deg); } }
@keyframes dmFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* v5.7.3 — Riepilogo: sparkline inline che si accende al hover della riga */
.dm-er.v2 .dm-spark { opacity: .65; transition: opacity .25s, transform .25s; vertical-align: middle; }
.dm-er.v2 .dm-sum-row:hover .dm-spark { opacity: 1; transform: scale(1.06); }
.dm-er.v2 .dm-sum-row { transition: background-color .2s; }
.dm-er.v2 .dm-sum-row:hover { background-color: var(--dm-surface-2); }
.dm-er.v2 .dm-sum-spark { padding: 8px 12px !important; }

/* ============================================================
   v5.7.8 — Card KPI: i COLORI (sfondo + testo + pill) sono emessi
   dinamicamente da PHP (theme_kpi_palette + contrast_color). Qui resta solo l'hover.
   ============================================================ */
.dm-er.v2 .grid-4 > .card.center .pill{ font-weight: 600; }
.dm-er.v2 .grid-4 > .card.center:hover{ box-shadow: 0 14px 32px rgba(0,0,0,.10); }

/* v5.7.5 — Bottoni nell'header (Esporta Excel + Genera Report PDF) coerenti */
.dm-er.v2 .header-btn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 12px;
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; cursor: pointer;
    border: 1px solid var(--dm-border);
    background: var(--dm-surface); color: var(--dm-heading);
    transition: background-color .18s, border-color .18s, transform .12s;
}
.dm-er.v2 .header-btn:hover{ background: var(--dm-surface-2); transform: translateY(-1px); }
.dm-er.v2 .header-btn svg{ flex-shrink: 0; }
/* PDF in evidenza: riempito col primario */
.dm-er.v2 .dm-er-pdf-trigger.header-btn{
    background: var(--dm-dark); color: #fff; border-color: var(--dm-dark);
}
.dm-er.v2 .dm-er-pdf-trigger.header-btn:hover{ filter: brightness(1.12); }

/* v5.7.5 — Le export-bar interne alle viste sono sostituite dal bottone
   "Esporta Excel" nell'header: le nascondo per evitare il doppione. */
.dm-er.v2 .export-bar{ display: none; }

/* ============================================================
   PANORAMICA (overview) — v5.94.0
   Riscritta sull'handoff "Panoramica chiara". Quattro blocchi in
   colonna, gap 22px, fondo pagina bianco. Nessun bordo sulle card:
   la separazione la fa l'ombra. I colori dei dati arrivano dalla
   palette del brand (inline nel markup), qui stanno solo i token
   di interfaccia.
   NOTA: nessuna animazione d'ingresso e' dichiarata qui. I keyframe
   con fill-mode backwards lascerebbero la pagina invisibile quando
   la timeline non avanza (tab in secondo piano, stampa, export PDF).
   Le assegna lo script dopo il primo paint: se non gira, si vede tutto.
   ============================================================ */
/* v5.95.1 — Nessun tetto di larghezza: il resto della v2 e' fluido (.wrap a
   max-width:100%), quindi un cap a 1280px qui lasciava la Panoramica ferma e
   allineata a sinistra su monitor grandi mentre le altre viste riempivano lo
   schermo. L'handoff indicava 1280px perche' il prototipo era tarato su quella
   larghezza, non perche' il contenuto debba fermarsi li'. */
.dm-er.v2 .ov2{ display:flex; flex-direction:column; gap:22px; width:100%; max-width:100%; }
.dm-er.v2 .ov2 *{ font-variant-numeric:tabular-nums; }

/* ---- Blocco 0: testata ---- */
.dm-er.v2 .ov2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dm-er.v2 .ov2-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dm-text-muted); margin-bottom:12px; }
.dm-er.v2 .ov2-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dm-er.v2 .ov2-title{ font-size:44px; font-weight:700; line-height:1.1; letter-spacing:-.03em; color:var(--dm-heading); margin:0; }
.dm-er.v2 .ov2-badge{ padding:7px 13px; border-radius:8px; background:var(--dm-surface-3); font-size:12.5px; font-weight:600; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-sub{ margin-top:8px; font-size:14px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-cta{ display:inline-flex; align-items:center; gap:8px; padding:12px 19px; border-radius:10px; background:var(--dm-dark); color:#fff; text-decoration:none; font-size:13px; font-weight:700; transition:background .2s ease, transform .2s ease; }
.dm-er.v2 .ov2-cta:hover{ background:#0a1730; color:#fff; transform:translateY(-1px); }
.dm-er.v2 .ov2-cta svg{ transition:transform .2s ease; }
.dm-er.v2 .ov2-cta:hover svg{ transform:translateX(3px); }

/* ---- Card generiche ---- */
.dm-er.v2 .ov2-card{ background:var(--dm-surface); border-radius:12px; border:0;
    box-shadow:0 1px 2px rgba(15,34,68,.05), 0 12px 32px -12px rgba(15,34,68,.14); }
.dm-er.v2 .ov2-k{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-empty{ margin:0; padding:26px 28px; font-size:14px; color:var(--dm-text-muted); }

/* ---- Blocco 1: card del mese ---- */
.dm-er.v2 .ov2-month-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:26px 28px 0; }
.dm-er.v2 .ov2-big{ margin-top:10px; font-size:64px; font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--dm-heading); }
.dm-er.v2 .ov2-big em{ font-style:normal; font-size:24px; font-weight:600; color:var(--dm-text-muted); margin-left:8px; letter-spacing:0; }
.dm-er.v2 .ov2-month-delta{ margin-top:14px; display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.dm-er.v2 .ov2-vs{ font-size:13px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:7px; font-size:13px; font-weight:700; }
.dm-er.v2 .ov2-chip.is-up{ background:#fdecec; color:#dc2626; }
.dm-er.v2 .ov2-chip.is-down{ background:#e9f7ee; color:#16a34a; }
.dm-er.v2 .ov2-chip.is-flat{ background:var(--dm-surface-3); color:var(--dm-text-muted); }
.dm-er.v2 .ov2-stats{ display:flex; }
.dm-er.v2 .ov2-stat{ padding:2px 24px; }
.dm-er.v2 .ov2-stat + .ov2-stat{ border-left:1px solid #e6e9f0; }
.dm-er.v2 .ov2-stat-v{ margin-top:8px; font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--dm-heading); }
.dm-er.v2 .ov2-stat-v small{ font-size:13px; font-weight:600; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-stat-s{ margin-top:4px; font-size:12.5px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-d{ font-weight:700; }
.dm-er.v2 .ov2-d.is-up{ color:#dc2626; }
.dm-er.v2 .ov2-d.is-down{ color:#16a34a; }
.dm-er.v2 .ov2-d.is-flat{ color:var(--dm-text-muted); font-weight:500; }

/* ---- Blocco 2: grafico dell'anno ---- */
.dm-er.v2 .ov2-chart{ margin:24px 28px; padding:18px 20px 12px; background:var(--dm-surface-3); border-radius:10px; }
.dm-er.v2 .ov2-chart-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.dm-er.v2 .ov2-read{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dm-er.v2 .ov2-read b{ font-size:13px; font-weight:700; color:var(--dm-heading); }
.dm-er.v2 .ov2-read span{ font-size:12.5px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-read i{ font-style:normal; font-size:12.5px; font-weight:500; color:#98a1b5; }
.dm-er.v2 .ov2-units{ position:relative; display:inline-flex; padding:3px; border-radius:9px; background:#e8e5db; }
.dm-er.v2 .ov2-units-pill{ position:absolute; top:3px; bottom:3px; border-radius:7px; background:var(--dm-dark); transition:left .4s cubic-bezier(.16,1,.3,1); }
.dm-er.v2 .ov2-unit{ position:relative; z-index:1; border:0; cursor:pointer; background:transparent; padding:6px 14px; border-radius:7px; font-family:inherit; font-size:12px; font-weight:700; color:var(--dm-text-muted); transition:color .25s ease; }
.dm-er.v2 .ov2-unit.is-on{ color:#fff; }

.dm-er.v2 .ov2-plot{ position:relative; height:226px; padding-right:48px; }
/* I pallini sono posizionati in percentuale: devono riferirsi all'area del disegno,
   non al box che comprende anche la colonna della scala, altrimenti scivolano a destra. */
.dm-er.v2 .ov2-plot-in{ position:relative; height:100%; }
.dm-er.v2 .ov2-svg{ display:block; width:100%; height:226px; overflow:visible; }
.dm-er.v2 .ov2-grid{ stroke:#dcd8cb; stroke-width:1; }
.dm-er.v2 .ov2-grid.is-mid{ stroke:#e4e0d4; }
.dm-er.v2 .ov2-grid.is-base{ stroke:#cfcabb; }
.dm-er.v2 .ov2-now, .dm-er.v2 .ov2-prev, .dm-er.v2 .ov2-area, .dm-er.v2 .ov2-fc{ transition:d .55s cubic-bezier(.16,1,.3,1); }
.dm-er.v2 .ov2-prev{ transition:d .55s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.dm-er.v2 .ov2-chart.is-hover .ov2-prev{ opacity:.35; }
.dm-er.v2 .ov2-cross{ stroke:var(--dm-dark); stroke-width:1; opacity:.22; vector-effect:non-scaling-stroke; }
.dm-er.v2 .ov2-dot{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--dm-dark); box-shadow:0 0 0 3px var(--dm-surface-3); pointer-events:none; }
.dm-er.v2 .ov2-plot-in .ov2-dot{ left:0; }
.dm-er.v2 .ov2-dot.is-fc{ background:var(--dm-surface-3); border:2.5px solid #8db600; box-shadow:none; }
.dm-er.v2 .ov2-dot.is-hover{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; }
.dm-er.v2 .ov2-dot.is-hover.is-prev{ width:8px; height:8px; margin:-4px 0 0 -4px; background:#8fa0bf; }
.dm-er.v2 .ov2-fcchip{ position:absolute; transform:translate(-50%,-190%); padding:3px 8px; border-radius:6px; background:var(--dm-lime); color:var(--dm-lime-ink); font-size:11.5px; font-weight:700; white-space:nowrap; pointer-events:none; }
.dm-er.v2 .ov2-scale{ position:absolute; top:0; right:0; bottom:0; width:44px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:6px 0 0 6px; font-size:11px; font-weight:600; color:#8a8578; pointer-events:none; }
.dm-er.v2 .ov2-hit{ position:absolute; inset:0; cursor:crosshair; }
.dm-er.v2 .ov2-xlabels{ display:grid; grid-template-columns:repeat(12,1fr); margin-top:8px; padding-right:48px; font-size:11px; font-weight:600; color:#8a8578; text-align:center; }
.dm-er.v2 .ov2-xlabels .is-ref{ font-weight:700; color:var(--dm-heading); }
.dm-er.v2 .ov2-xlabels .is-fc{ color:var(--dm-lime-ink); }

/* ---- Blocco 3: card materia e card stima ---- */
.dm-er.v2 .ov2-mats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:22px; }
/* Oltre i 1700px le card materia si allargherebbero a dismisura: si allineano
   in riga tenendo una larghezza leggibile e la griglia resta piena. */
@media (min-width:1700px){
    .dm-er.v2 .ov2-mats{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
    .dm-er.v2 .ov2-th, .dm-er.v2 .ov2-row, .dm-er.v2 .ov2-total{ grid-template-columns:2fr 140px 1.2fr 70px 100px 20px; }
}
.dm-er.v2 .ov2-mat{ position:relative; overflow:hidden; padding:22px 22px 18px; border-radius:12px; background:var(--dm-surface);
    box-shadow:0 1px 2px rgba(15,34,68,.05), 0 10px 26px -10px rgba(15,34,68,.12);
    transition:transform .22s ease, box-shadow .22s ease; }
/* v5.96.0 — Niente filetto colorato sul bordo alto: le card restano pulite.
   La materia si riconosce comunque dall'icona, dalla sparkline e dal nome. */
.dm-er.v2 .ov2-mat.is-fc{ background:#f7fce8; }
.dm-er.v2 .ov2-mat:hover{ transform:translateY(-2px); box-shadow:0 3px 6px rgba(15,34,68,.06), 0 18px 40px -12px rgba(15,34,68,.18); }
.dm-er.v2 .ov2-mat-top{ display:flex; align-items:center; gap:8px; }
.dm-er.v2 .ov2-mat-ic{ display:inline-flex; color:var(--mc,var(--dm-dark)); }
.dm-er.v2 .ov2-mat-n{ font-size:13px; font-weight:700; color:var(--dm-heading); }
.dm-er.v2 .ov2-mat-n.is-fc{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dm-lime-ink); }
.dm-er.v2 .ov2-mat-q{ margin-left:auto; font-size:12px; font-weight:600; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-mat-v{ margin-top:12px; font-size:28px; font-weight:700; letter-spacing:-.025em; color:var(--dm-heading); }
.dm-er.v2 .ov2-mat-v em{ font-style:normal; font-size:14px; font-weight:600; color:var(--dm-text-muted); margin-left:5px; letter-spacing:0; }
.dm-er.v2 .ov2-mat-v em.is-fc{ color:var(--dm-lime-ink); }
.dm-er.v2 .ov2-mat-b{ margin-top:7px; display:flex; align-items:center; gap:9px; font-size:12.5px; }
.dm-er.v2 .ov2-mat-c{ font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-spark{ display:block; width:calc(100% + 44px); height:54px; margin:14px -22px -18px; }
.dm-er.v2 .ov2-spark .ov2-spark-a{ opacity:.14; }
.dm-er.v2 .ov2-spark .ov2-spark-l{ transition:stroke-width .22s ease; }
.dm-er.v2 .ov2-mat:hover .ov2-spark-l{ stroke-width:2.9; }
.dm-er.v2 .ov2-spark .ov2-spark-p{ transition:r .22s ease; }
.dm-er.v2 .ov2-mat:hover .ov2-spark-p{ r:5; }
.dm-er.v2 .ov2-fc-note{ margin-top:14px; padding-top:12px; border-top:1px solid #e2e9cd; font-size:12.5px; font-weight:500; color:#5c6478; }

/* ---- Blocco 4: dove, per struttura ---- */
.dm-er.v2 .ov2-where{ padding:24px 26px 20px; }
.dm-er.v2 .ov2-where-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.dm-er.v2 .ov2-where-sub{ margin-top:7px; font-size:14px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-where-sub b{ color:var(--dm-heading); font-weight:700; }
.dm-er.v2 .ov2-legend{ display:flex; gap:14px; flex-wrap:wrap; }
.dm-er.v2 .ov2-lg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--dm-text-muted); cursor:default; }
.dm-er.v2 .ov2-lg i{ width:8px; height:8px; border-radius:2px; }
.dm-er.v2 .ov2-th, .dm-er.v2 .ov2-row, .dm-er.v2 .ov2-total{
    display:grid; grid-template-columns:1.7fr 104px 1fr 54px 82px 20px; gap:14px; align-items:center; }
.dm-er.v2 .ov2-th{ padding:0 12px 9px; border-bottom:1px solid #e6e9f0;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-th .ta-r, .dm-er.v2 .ov2-rv, .dm-er.v2 .ov2-rq, .dm-er.v2 .ov2-rd{ text-align:right; }
.dm-er.v2 .ov2-row{ position:relative; padding:13px 12px; border-radius:8px; text-decoration:none; overflow:hidden;
    transition:background .18s ease; }
.dm-er.v2 .ov2-rows .ov2-row:nth-child(odd){ background:#fbfbf9; }
.dm-er.v2 a.ov2-row:hover{ background:#f1f4fa; }
.dm-er.v2 .ov2-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--dm-dark);
    transform:scaleY(0); transform-origin:center; transition:transform .18s ease; }
.dm-er.v2 a.ov2-row:hover::before{ transform:scaleY(1); }
.dm-er.v2 .ov2-rn{ font-size:14px; font-weight:600; color:var(--dm-heading); line-height:1.3; }
.dm-er.v2 .ov2-rv{ font-size:14px; font-weight:700; color:var(--dm-heading); }
.dm-er.v2 .ov2-rc{ display:flex; gap:2px; height:7px; }
.dm-er.v2 .ov2-rc i{ height:7px; border-radius:2px; transition:opacity .18s ease; }
.dm-er.v2 .ov2-rq{ font-size:12.5px; font-weight:500; color:var(--dm-text-muted); }
.dm-er.v2 .ov2-rd{ font-size:12.5px; }
.dm-er.v2 .ov2-rx{ display:flex; justify-content:flex-end; color:#98a1b5; opacity:.6; transition:transform .18s ease, opacity .18s ease; }
.dm-er.v2 a.ov2-row:hover .ov2-rx{ transform:translateX(4px); opacity:1; }
.dm-er.v2 .ov2-row.is-rest .ov2-rn{ color:var(--dm-text-muted); font-weight:500; }
.dm-er.v2 .ov2-total{ margin-top:6px; padding:14px 12px 0; border-top:1px solid #e6e9f0; }
.dm-er.v2 .ov2-total .ov2-rv{ font-size:15px; }
.dm-er.v2 .ov2-more{ margin-top:14px; padding:10px 16px; border:0; cursor:pointer; border-radius:9px; background:var(--dm-surface-3);
    font-family:inherit; font-size:12.5px; font-weight:700; color:var(--dm-heading); transition:background .18s ease, transform .18s ease; }
.dm-er.v2 .ov2-more:hover{ background:#e8e5db; transform:translateY(-1px); }

/* ---- Ingressi (assegnati da JS, mai dal CSS: vedi nota in testa) ---- */
@keyframes ov2Rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---- Responsive: stessi punti di rottura del resto del plugin ---- */
@media (max-width:900px){
    .dm-er.v2 .ov2-title{ font-size:36px; }
    .dm-er.v2 .ov2-month-top{ flex-direction:column; gap:20px; }
    .dm-er.v2 .ov2-stats{ width:100%; }
    .dm-er.v2 .ov2-stat{ flex:1; padding:2px 18px; }
    .dm-er.v2 .ov2-stat:first-child{ padding-left:0; }
    .dm-er.v2 .ov2-chart{ margin:20px; padding:14px 14px 10px; }
    .dm-er.v2 .ov2-plot, .dm-er.v2 .ov2-svg{ height:180px; }
    .dm-er.v2 .ov2-mats{ grid-template-columns:1fr; }
    .dm-er.v2 .ov2-th, .dm-er.v2 .ov2-row, .dm-er.v2 .ov2-total{ grid-template-columns:1.6fr 96px 78px 20px; }
    .dm-er.v2 .ov2-rc, .dm-er.v2 .ov2-rq, .dm-er.v2 .ov2-th span:nth-child(3), .dm-er.v2 .ov2-th span:nth-child(4){ display:none; }
}
@media (max-width:480px){
    .dm-er.v2 .ov2-title{ font-size:32px; }
    .dm-er.v2 .ov2-big{ font-size:40px; }
    .dm-er.v2 .ov2-month-top{ padding:20px 18px 0; }
    .dm-er.v2 .ov2-where{ padding:18px 16px 16px; }
    .dm-er.v2 .ov2-chart{ margin:16px; }
    /* Con 12 sigle su 390px le etichette si toccano: si tengono i mesi dispari. */
    .dm-er.v2 .ov2-xlabels span:nth-child(even){ visibility:hidden; }
    .dm-er.v2 .ov2-xlabels{ font-size:10px; }
}
@media print{
    .dm-er.v2 .ov2 *{ animation:none !important; transition:none !important; opacity:1 !important; }
    .dm-er.v2 .ov2-more, .dm-er.v2 .ov2-units{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
    .dm-er.v2 .ov2 *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   SIDEBAR COLLASSABILE — v5.8.0
   Freccia che comprime la sidebar a sole icone, con animazione.
   ============================================================ */
.dm-er.v2 .sidebar{ transition: width .28s cubic-bezier(.4,0,.2,1), min-width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); }
.dm-er.v2 .sb-toggle{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; margin:0 0 12px auto; padding:0;
    border:none; border-radius:9px; cursor:pointer;
    background:rgba(255,255,255,.08); color:#c2cfcd;
    transition: background .15s, color .15s;
}
.dm-er.v2 .sb-toggle:hover{ background:rgba(255,255,255,.18); color:#fff; }
.dm-er.v2 .sb-toggle-ic{ transition: transform .28s cubic-bezier(.4,0,.2,1); }
.dm-er.v2 .menu a{ white-space:nowrap; overflow:hidden; }
.dm-er.v2 .menu a span{ transition:opacity .14s ease; }

/* --- stato compresso --- */
.dm-er.v2.sb-collapsed .sidebar{ width:76px; min-width:76px; padding-left:12px; padding-right:12px; overflow-x:hidden; }
.dm-er.v2.sb-collapsed .sb-toggle{ margin-left:auto; margin-right:auto; }
.dm-er.v2.sb-collapsed .sb-toggle-ic{ transform:rotate(180deg); }
.dm-er.v2.sb-collapsed .menu a{ justify-content:center; gap:0; padding-left:0; padding-right:0; }
.dm-er.v2.sb-collapsed .menu a span{ opacity:0; width:0; }
.dm-er.v2.sb-collapsed .menu a .dm-icon{ width:20px; height:20px; }
.dm-er.v2.sb-collapsed .brand{ justify-content:center; padding-bottom:14px; }

/* --- v5.50.0: logo a menu compresso -------------------------------------
   A sidebar aperta si mostra il logo esteso (simbolo + scritta); a sidebar
   compressa lo spazio utile e' ~52px, dove il logo esteso veniva schiacciato
   e tagliato. Li' si mostra solo il simbolo quadrato (o il monogramma). */
.dm-er.v2 .brand-icon{ display:none; }
/* v5.57.0 — .brand-full ha uno style="display:flex" inline nel markup, che batte
   qualsiasi regola del foglio SENZA !important. Per questo, a menu compresso, il
   logo lungo restava visibile e schiacciato: la regola che lo nascondeva veniva
   sovrascritta dall'inline. !important qui e' l'uso corretto, non una scorciatoia. */
.dm-er.v2.sb-collapsed .brand-full{ display:none !important; }
.dm-er.v2.sb-collapsed .brand-icon{
    display:flex !important; align-items:center; justify-content:center;
    width:38px; height:38px; margin:0 auto;
    border-radius:11px; object-fit:contain;
}
.dm-er.v2.sb-collapsed img.brand-icon{ background:rgba(255,255,255,.06); padding:5px; }
.dm-er.v2 .brand-mono{
    background:var(--dm-lime,#c3ec2e); color:var(--dm-dark,#0f2244);
    font-weight:800; font-size:18px; line-height:1;
    letter-spacing:0; font-family:var(--dm-font);
}
.dm-er.v2.sb-collapsed .help{ display:none; }
.dm-er.v2.sb-collapsed .sb-top > .k{ display:none; }       /* etichetta "Comunicazioni" */
.dm-er.v2.sb-collapsed .note-alert,
.dm-er.v2.sb-collapsed .note-card{ display:none; }
.dm-er.v2.sb-collapsed .sb-bottom a.menu{ justify-content:center; }
.dm-er.v2.sb-collapsed .sb-bottom a.menu span{ opacity:0; width:0; }

/* Costo unitario sotto il valore € nelle tabelle confronto costi — v5.8.4 */
.dm-er .dm-er-mini small.cu{ display:inline-block; margin-top:2px; font-size:10.5px; font-weight:600; color:var(--dm-text-muted); letter-spacing:.01em; }
.dm-er .dm-er-mini tr.cu-tot td{ border-top:2px solid var(--dm-border); }

/* =======================================================================
   v5.18.5 — COMPATIBILITÀ DIVI / page builder
   La dashboard (.dm-er.v2) viene spesso inserita dentro sezioni/righe/colonne
   DIVI che applicano padding, margini e larghezze massime. Quel padding-top
   creava la "fascia bianca" in alto e, spingendo giù la sidebar sticky alta
   100vh, ne nascondeva il fondo (tasto Esci) sotto lo schermo.
   Uso :has() per AZZERARE gli spazi SOLO sui contenitori che racchiudono la
   dashboard, senza toccare il resto del sito.
   ======================================================================= */
.et_pb_section:has(.dm-er.v2),
.et_builder_inner_content:has(.dm-er.v2),
.et_pb_row:has(.dm-er.v2),
.et_pb_row_inner:has(.dm-er.v2),
.et_pb_column:has(.dm-er.v2),
.et_pb_column_inner:has(.dm-er.v2),
.et_pb_module:has(.dm-er.v2),
.et_pb_text:has(.dm-er.v2),
.et_pb_text_inner:has(.dm-er.v2),
.et_pb_code:has(.dm-er.v2),
.et_pb_code_inner:has(.dm-er.v2){
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
}
/* Contenitore principale del tema attorno alla dashboard: niente larghezza
   fissa / padding/margine superiore (così il layout va davvero a tutta pagina e
   parte da top:0). #et-boc è il wrapper Theme-Builder che dava la fascia bianca. */
body:has(.dm-er.v2) #page-container,
body:has(.dm-er.v2) #et-boc,
body:has(.dm-er.v2) #et_builder_outer_content,
body:has(.dm-er.v2) #et-main-area,
body:has(.dm-er.v2) #main-content,
body:has(.dm-er.v2) .et-l--body,
body:has(.dm-er.v2) .et_pb_section:has(.dm-er.v2) > .et_pb_row{
    padding-top:0 !important;
    margin-top:0 !important;
    border-top:0 !important;
}
/* Header Theme Builder DIVI sopra la dashboard: la dashboard ha già la sua
   topbar/sidebar ed è pensata a tutto schermo, quindi l'header del tema (che
   riservava spazio = "fascia bianca") viene nascosto SOLO su queste pagine. */
body:has(.dm-er.v2) .et-l--header,
body:has(.dm-er.v2) #main-header{ display:none !important; }
/* La dashboard occupa tutta la riga DIVI */
.dm-er.v2{ width:100%; }
/* Salvaguardia: la sidebar non deve mai essere tagliata da un overflow del
   contenitore DIVI; resta scrollabile internamente se lo schermo è basso. */
.dm-er.v2 .sidebar{ max-height:100vh; }

/* v5.18.5 — elementi nascosti su mobile (es. tabella dettaglio "Per struttura",
   ridondante e poco leggibile su schermo piccolo). */
@media (max-width:640px){
    .dm-er.v2 .dm-er-hide-mobile{ display:none !important; }
}

/* Testo sempre bianco dentro le card a sfondo navy/azzurro (hero):
   niente testo scuro sulla card colorata. */
.dm-er.v2 .card.hero,
.dm-er.v2 .card.hero .k,
.dm-er.v2 .card.hero .v,
.dm-er.v2 .card.hero .pill,
.dm-er.v2 .card.hero .k *,
.dm-er.v2 .card.hero .v *{ color:#fff !important; }

/* Grafici dei costi (tutte le materie): centrati verticalmente nella card. */
.dm-er.v2 .card:has(canvas[id*="Costs"]){ display:flex; flex-direction:column; }
.dm-er.v2 .card:has(canvas[id*="Costs"]) > div[style*="position:relative"]{ margin-top:auto !important; margin-bottom:auto !important; }

/* v5.50.0 — Sotto i 900px la sidebar e' off-canvas a piena larghezza: il logo
   esteso ci sta, quindi il simbolo compatto va disattivato. Questa regola sta in
   fondo al file apposta, per vincere sulle regole desktop dichiarate sopra. */
@media (max-width: 900px) {
    .dm-er.v2.sb-collapsed .brand-full{ display:flex !important; }
    .dm-er.v2.sb-collapsed .brand-icon{ display:none !important; }
}

/* ============================================================
   v5.59.0 — DASHBOARD AUTONOMA
   Pagina servita dal plugin sul suo indirizzo, senza il tema del
   sito intorno. Qui stanno il reset di base della pagina e le
   schermate di accesso (login, recupero e cambio password).
   ============================================================ */
body.dm-app{
    margin:0; padding:0;
    background: var(--dm-bg, #fff);   /* v5.97.5 */
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--dm-text, #3c4760);
    -webkit-font-smoothing: antialiased;
}
body.dm-app #wpadminbar{ display:none !important; }
body.dm-app.dm-app-dashboard .dm-er.v2{ min-height:100vh; }

/* ---- Schermate di accesso ---- */
.dm-app-auth{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px; box-sizing:border-box;
    background: linear-gradient(160deg, #0f2244 0%, #16305c 55%, #1d3f6f 100%);
}
/* Guscio a due colonne: pannello brand a sinistra, form a destra. */
.dm-app-split{
    width:100%; max-width:840px; display:flex; box-sizing:border-box;
    background:#fff; border-radius:20px; overflow:hidden;
    box-shadow:0 24px 60px rgba(6,16,36,.34);
}
/* Pannello sinistro brandizzato */
.dm-app-aside{
    flex:1 1 46%; box-sizing:border-box;
    background:
        radial-gradient(120% 80% at 15% 10%, #1d3f6f 0%, rgba(29,63,111,0) 60%),
        linear-gradient(160deg, #0f2244 0%, #0a1730 100%);
    color:#fff; padding:40px 36px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
}
.dm-app-aside::after{
    content:""; position:absolute; right:-40px; bottom:-40px;
    width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(195,236,46,.16) 0%, rgba(195,236,46,0) 70%);
}
.dm-app-aside-top .dm-app-logo{ max-width:150px; max-height:46px; object-fit:contain; display:block; }
.dm-app-aside-top .dm-app-brand{ font-size:22px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.dm-app-aside-mid h2{
    font-size:23px; font-weight:800; line-height:1.25; margin:0 0 12px; color:#fff; letter-spacing:-.01em;
}
.dm-app-aside-mid p{ font-size:14px; line-height:1.6; margin:0; color:rgba(255,255,255,.72); }
.dm-app-aside-foot{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
/* Colonna destra: contiene la card (senza ombra propria, ce l'ha il guscio) */
.dm-app-main{
    flex:1 1 54%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    padding:40px 36px; background:#fff;
}
.dm-app-card{
    width:100%; max-width:340px; box-sizing:border-box;
    background:#fff; text-align:center;
}
.dm-app-card-brand{ display:none; } /* su desktop il brand e' nel pannello sinistro */
.dm-app-card-brand .dm-app-logo{ margin:0 0 16px; }
.dm-app-logo{ max-width:150px; max-height:48px; object-fit:contain; margin:0 auto 16px; display:block; }
.dm-app-brand{ font-size:20px; font-weight:800; color:#0f2244; margin-bottom:16px; letter-spacing:-.01em; }
.dm-app-card{ text-align:left; }
.dm-app-card h1{ font-size:21px; font-weight:800; color:#0f2244; margin:0 0 6px; letter-spacing:-.01em; }
.dm-app-sub{ font-size:13px; color:#66708a; margin:0 0 22px; line-height:1.5; }
.dm-app-card form{ text-align:left; }
.dm-app-card label{
    display:block; font-size:12px; font-weight:600; color:#3c4760;
    margin:0 0 5px; letter-spacing:.01em;
}
.dm-app-card input[type="text"],
.dm-app-card input[type="password"]{
    width:100%; box-sizing:border-box; margin:0 0 16px;
    padding:11px 13px; font-size:14px; font-family:inherit; color:#0f2244;
    background:#faf9f5; border:1px solid #dde4f2; border-radius:9px;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.dm-app-card input[type="text"]:focus,
.dm-app-card input[type="password"]:focus{
    outline:none; border-color:#2f6db8; background:#fff;
    box-shadow:0 0 0 3px rgba(47,109,184,.14);
}
.dm-app-check{
    display:flex !important; align-items:center; gap:7px;
    font-size:12px; font-weight:500 !important; color:#66708a; margin:0 0 18px !important;
}
.dm-app-check input{ margin:0; }
.dm-app-btn{
    display:block; width:100%; box-sizing:border-box;
    padding:12px 16px; margin:0;
    background:#0f2244; color:#fff; border:none; border-radius:9px;
    font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
    text-decoration:none; text-align:center;
    transition:background .18s ease, transform .18s ease;
}
.dm-app-btn:hover{ background:#16305c; transform:translateY(-1px); }
.dm-app-link{
    display:inline-block; margin-top:16px;
    font-size:12.5px; color:#66708a; text-decoration:none; font-weight:600;
}
.dm-app-link:hover{ color:#2f6db8; text-decoration:underline; }
.dm-app-err, .dm-app-ok{
    text-align:left; font-size:13px; line-height:1.45;
    padding:10px 12px; border-radius:8px; margin:0 0 16px;
}
.dm-app-err{ background:#fdeceb; color:#8a1c17; border:1px solid #f5c6c2; }
.dm-app-ok{ background:#eaf6f0; color:#14603f; border:1px solid #bfe3d2; }

@media (max-width:720px){
    .dm-app-split{ flex-direction:column; max-width:400px; }
    /* Su mobile il pannello brand esteso lascia il posto a una fascia
       compatta in cima, cosi' la card resta il centro della scena. */
    .dm-app-aside{ flex:none; padding:26px 28px 22px; text-align:center; align-items:center; }
    .dm-app-aside::after{ display:none; }
    .dm-app-aside-top{ display:flex; justify-content:center; }
    .dm-app-aside-top .dm-app-logo{ margin:0 auto; }
    .dm-app-aside-mid{ display:none; }        /* il claim lungo si toglie su mobile */
    .dm-app-aside-foot{ display:none; }
    .dm-app-main{ padding:28px 24px 32px; }
    .dm-app-card{ max-width:none; }
}
@media (max-width:380px){
    .dm-app-aside{ padding:22px 20px 18px; }
    .dm-app-main{ padding:24px 18px 28px; }
}

/* ============================================================
   v5.60.0 — SIDEBAR SU SCHERMI BASSI
   Il menu ha fino a 11 voci: su un portatile 1366x768 lo spazio
   verticale utile e' circa quello richiesto, quindi basta poco
   (la barra delle note, una toolbar in piu' del browser) per
   mandare il menu in scorrimento.
   La variabile che conta e' l'ALTEZZA della finestra, non la
   larghezza: un 1920x1080 non ha il problema, un 1366x768 si'.
   Per questo le soglie qui sotto sono su max-height.
   ============================================================ */

/* Indizio di scorrimento: le due ombre compaiono da sole solo quando
   il contenuto eccede, e spariscono arrivati a fine corsa. Serve
   perche' la scrollbar e' nascosta di proposito e senza questo non
   c'e' modo di accorgersi che sotto ci sono altre voci. */
.dm-er.v2 .sb-top{
    background:
        linear-gradient(var(--dm-dark) 30%, rgba(15,34,68,0)) top / 100% 20px no-repeat local,
        linear-gradient(rgba(15,34,68,0), var(--dm-dark) 70%) bottom / 100% 20px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.45), rgba(0,0,0,0)) top / 100% 8px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.45), rgba(0,0,0,0)) bottom / 100% 8px no-repeat scroll;
}

/* ---- Livello 1: finestre basse (portatili 1366x768 e simili) ---- */
@media (max-height: 860px){
    .dm-er.v2 .sidebar{ padding: 14px 14px; }
    .dm-er.v2 .brand{ margin-bottom: 14px; padding-bottom: 10px; }
    .dm-er.v2 .menu a, .dm-er.v2 a.menu{ padding: 6px 11px; }
    .dm-er.v2 .help{ margin-top: 12px; padding: 11px; }
}

/* ---- Livello 2: finestre molto basse (1280x720, finestre ridotte) ---- */
@media (max-height: 720px){
    .dm-er.v2 .sidebar{ padding: 11px 12px; }
    .dm-er.v2 .brand{ margin-bottom: 10px; padding-bottom: 8px; }
    .dm-er.v2 .brand img{ height: 24px; }
    .dm-er.v2 .menu{ gap: 1px; }
    .dm-er.v2 .menu a, .dm-er.v2 a.menu{ padding: 5px 10px; font-size: 12.5px; }
    .dm-er.v2 .menu a .dm-icon{ width: 16px; height: 16px; }
    /* Il riquadro "Serve aiuto?" non e' navigazione: qui resta il solo
       pulsante, senza titolo e senza cornice. Recupera un centinaio di
       pixel mantenendo la funzione. */
    .dm-er.v2 .help{ margin-top: 10px; padding: 0; background: none; }
    .dm-er.v2 .help strong{ display: none; }
    .dm-er.v2 .help > div{ margin-top: 0 !important; }
    .dm-er.v2 .sb-bottom{ padding-top: 8px; }
}

/* ============================================================
   v5.62.0 — TOOLTIP INFORMATIVO "?"
   Cerchietto con punto interrogativo accanto ai termini tecnici.
   Testo su hover (desktop) e su focus/tocco (mobile e tastiera).
   ============================================================ */
.dm-er.v2 .dm-tip{
    display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px; margin-left:5px; vertical-align:middle;
    border-radius:50%; background:#c9d3e6; color:#0f2244;
    font-size:10px; font-weight:800; line-height:1; cursor:help;
    position:relative; user-select:none; font-family:'Manrope',sans-serif;
    transition:background .15s ease;
}
.dm-er.v2 .dm-tip:hover, .dm-er.v2 .dm-tip:focus{ background:#c3ec2e; outline:none; }
.dm-er.v2 .dm-tip-box{
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    width:240px; max-width:70vw; box-sizing:border-box;
    background:#0f2244; color:#fff; text-align:left;
    font-size:12px; font-weight:500; line-height:1.5; letter-spacing:0;
    padding:10px 12px; border-radius:9px;
    box-shadow:0 10px 30px rgba(10,23,48,.30);
    opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease;
    z-index:60; pointer-events:none;
}
/* freccetta */
.dm-er.v2 .dm-tip-box::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#0f2244;
}
.dm-er.v2 .dm-tip:hover .dm-tip-box,
.dm-er.v2 .dm-tip:focus .dm-tip-box{ opacity:1; visibility:visible; }
/* vicino ai bordi: la scheda non esce dallo schermo su mobile */
@media (max-width:600px){
    .dm-er.v2 .dm-tip-box{ width:200px; left:auto; right:0; transform:none; }
    .dm-er.v2 .dm-tip-box::after{ left:auto; right:6px; transform:none; }
}


/* ============================================================
   PREVISIONALE v5.74.0 — card "da → a" + striscia Panoramica
   ============================================================ */
.dm-er .dm-prev details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dm-er .dm-prev details > summary::-webkit-details-marker { display: none; }
.dm-er .dm-prev details > summary:hover { color: var(--dm-primary); }
.dm-er .dm-prev-chev { display: inline-block; transition: transform .18s ease; }
.dm-er .dm-prev details[open] > summary .dm-prev-chev { transform: rotate(180deg); }
@media (max-width: 900px) {
    .dm-er .dm-prev-body { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ============================================================
   PREVISIONALE v5.75.0 — fascia navy in Panoramica
   Registro invertito: i consuntivi sono card bianche, il futuro
   e' una fascia scura in cui il lime marca la parte stimata.
   ============================================================ */
.dm-er .dm-prev-panel {
    position: relative; margin: 2px 0 20px; overflow: hidden;
    border-radius: var(--dm-radius); border: none;
    background: var(--dm-surface);
    box-shadow: var(--dm-shadow);
}
.dm-er .dm-prev-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 15px 22px 13px; border-bottom: 1px solid var(--dm-border-light);
}
.dm-er .dm-prev-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--dm-text-muted);
}
.dm-er .dm-prev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-lime); box-shadow: 0 0 0 4px rgba(195,236,46,.16); }
.dm-er .dm-prev-pill {
    font-size: 10.5px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
    color: var(--dm-dark); background: var(--dm-lime); padding: 4px 11px; border-radius: 20px;
}
.dm-er .dm-prev-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.dm-er .dm-prev-col { padding: 18px 22px 20px; min-width: 0; }
.dm-er .dm-prev-col + .dm-prev-col { border-left: 1px solid var(--dm-border-light); }
.dm-er .dm-prev-mat { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.dm-er .dm-prev-mat-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 10px; border: 1px solid rgba(195,236,46,.60); background: rgba(195,236,46,.24); flex-shrink: 0;
}
.dm-er .dm-prev-mat-nm { font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dm-dark); }
.dm-er .dm-prev-val { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dm-er .dm-prev-val b { font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--dm-dark); }
.dm-er .dm-prev-val small { font-size: 13px; font-weight: 600; color: #8a93a8; }
.dm-er .dm-prev-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px;
    font-size: 12px; font-weight: 800; color: var(--dm-dark);
    background: var(--dm-surface-2); border: 1px solid var(--dm-border);
}
.dm-er .dm-prev-track { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.dm-er .dm-prev-row { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 11px; font-size: 11.5px; }
.dm-er .dm-prev-row > span:first-child { color: #8a93a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-er .dm-prev-bar { height: 9px; border-radius: 5px; background: #f0f3f8; overflow: hidden; display: flex; }
.dm-er .dm-prev-bar i { display: block; height: 100%; }
.dm-er .dm-prev-row > b { font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--dm-dark); }
.dm-er .dm-prev-foot { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--dm-border-light); font-size: 12px; line-height: 1.55; color: var(--dm-text-muted); }
.dm-er .dm-prev-panel details > summary { color: var(--dm-dark); }
.dm-er .dm-prev-panel details > summary:hover { color: var(--dm-lime); }
.dm-er .dm-prev-note { background: var(--dm-surface-2); border-radius: 10px; padding: 12px 13px; color: var(--dm-text-muted); }
@media (max-width: 760px) {
    .dm-er .dm-prev-col + .dm-prev-col { border-left: none; border-top: 1px solid var(--dm-border-light); }
    .dm-er .dm-prev-row { grid-template-columns: 62px minmax(0,1fr) auto; }
}

/* Consumo atteso dentro la fascia previsionale (v5.76.0) */
.dm-er .dm-prev-vol { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--dm-text-muted); }
.dm-er .dm-prev-vol b { font-size: 14.5px; font-weight: 700; color: var(--dm-dark); }
.dm-er .dm-prev-vol i { font-style: normal; font-weight: 700; font-size: 12.5px; }


/* ------------------------------------------------------------------
   v5.87.4 — Menu mobile coperto dalla banda superiore.
   La sidebar a tendina lasciava uno spazio FISSO di 64px per la banda,
   pari alla sua altezza esatta. Ma quando WordPress mostra la propria
   barra di amministrazione, la banda scende di 32-46px mentre la
   tendina (fissata al viewport) resta ancorata in alto: le prime voci
   finivano sotto la banda bianca. Ora lo spazio si calcola dal bordo
   inferiore reale della banda, misurato all'apertura.
   ------------------------------------------------------------------ */
@media (max-width: 900px){
    /* v5.99.5 — Il pannello non parte piu' da top:0 con l'imbottitura a compensare
       la banda: si ancora sotto di essa (top: --dm-nav-top). Quindi qui restano
       solo l'altezza massima, che deve tenere conto di dove il pannello inizia
       davvero, e lo spazio in fondo per la barra gesti dei telefoni.
       Queste regole stanno in coda al foglio e devono vincere su
       `.dm-er.v2 .sidebar{ max-height:100vh }` piu' sopra. */
    .dm-er.v2 .sidebar{
        max-height: calc(100vh - var(--dm-nav-top, 56px) - 12px);
        max-height: calc(100dvh - var(--dm-nav-top, 56px) - 12px);
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    /* la banda resta sopra la tendina, così il pulsante per chiudere è sempre raggiungibile */
    .dm-er.v2 .dm-topbar{ z-index: 220; }
}