/* AIDEV-NOTE: GCRM-W26 (interfaccia-material3, design D1) — tema Ghidetti sopra Syncfusion Material 3
   (customized/material3.css e material3-dark.css: le versioni "customized" non caricano Roboto da Google, vietato
   dalla CSP). I colori del marchio sono ruoli M3 (--color-sf-*, valori "R, G, B") GENERATI da
   Mobile.Core/Tema/TemaColori.cs, unica fonte anche per l'app: un test verifica che siano uguali e leggibili (AA).
   Le --crm-* sono alias dei ruoli per le regole del portale. data-tema="scuro" su <html> lo imposta js/tema.js. */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Token Material 3 del marchio, tema chiaro (generati da TemaColori.Chiaro) */
    --color-sf-primary: 31, 78, 121;
    --color-sf-on-primary: 255, 255, 255;
    --color-sf-primary-container: 211, 228, 255;
    --color-sf-on-primary-container: 0, 28, 56;
    --color-sf-secondary: 83, 95, 112;
    --color-sf-on-secondary: 255, 255, 255;
    --color-sf-secondary-container: 215, 227, 247;
    --color-sf-on-secondary-container: 16, 28, 43;
    --color-sf-tertiary: 122, 89, 0;
    --color-sf-on-tertiary: 255, 255, 255;
    --color-sf-tertiary-container: 255, 222, 166;
    --color-sf-on-tertiary-containe: 38, 25, 0;
    --color-sf-on-tertiary-container: 38, 25, 0;
    --color-sf-error: 186, 26, 26;
    --color-sf-on-error: 255, 255, 255;
    --color-sf-error-container: 255, 218, 214;
    --color-sf-on-error-container: 65, 0, 2;
    --color-sf-surface: 251, 249, 246;
    --color-sf-on-surface: 26, 28, 30;
    --color-sf-surface-variant: 223, 226, 235;
    --color-sf-on-surface-variant: 67, 71, 78;
    --color-sf-on-background: 26, 28, 30;
    --color-sf-outline: 115, 119, 127;
    --color-sf-outline-variant: 195, 199, 207;
    --color-sf-surface-tint-color: 31, 78, 121;
    --color-sf-inverse-surface: 47, 48, 51;
    --color-sf-inverse-on-surface: 241, 240, 244;
    --color-sf-inverse-primary: 162, 201, 255;
    --crm-m3-surface-container-low: 245, 243, 240;
    --crm-m3-surface-container: 239, 237, 234;
    --crm-m3-surface-container-high: 233, 231, 228;

    /* Alias del portale sui ruoli M3 */
    --crm-primario: rgb(var(--color-sf-primary));
    --crm-su-primario: rgb(var(--color-sf-on-primary));
    --crm-primario-scuro: rgb(var(--color-sf-on-primary-container));
    --crm-primario-chiaro: rgb(var(--color-sf-primary-container));
    --crm-accento: rgb(var(--color-sf-tertiary));
    --crm-accento-chiaro: rgb(var(--color-sf-tertiary-container));
    --crm-fondo: rgb(var(--color-sf-surface));
    --crm-superficie: rgb(var(--crm-m3-surface-container-low));
    --crm-superficie-2: rgb(var(--crm-m3-surface-container));
    --crm-superficie-3: rgb(var(--crm-m3-surface-container-high));
    --crm-testo: rgb(var(--color-sf-on-surface));
    --crm-testo-tenue: rgb(var(--color-sf-on-surface-variant));
    --crm-bordo: rgb(var(--color-sf-outline-variant));
    --crm-pericolo: rgb(var(--color-sf-error));
    --crm-pericolo-chiaro: rgb(var(--color-sf-error-container));
    --crm-su-pericolo-chiaro: rgb(var(--color-sf-on-error-container));
    --crm-successo: rgb(var(--color-sf-success));
    --crm-successo-chiaro: rgb(var(--color-sf-success-container));
    --crm-raggio: 12px;
    --crm-raggio-grande: 16px;
    --crm-ombra: 0 1px 2px rgba(var(--color-sf-shadow), .12), 0 1px 3px 1px rgba(var(--color-sf-shadow), .06);
    --crm-ombra-alta: 0 2px 6px 2px rgba(var(--color-sf-shadow), .10), 0 1px 2px rgba(var(--color-sf-shadow), .16);
    --crm-carattere: "Roboto", system-ui, "Segoe UI", Arial, sans-serif;
    --e-font-family: var(--crm-carattere);
}

:root[data-tema="scuro"] {
    /* Token Material 3 del marchio, tema scuro (generati da TemaColori.Scuro) */
    --color-sf-primary: 162, 201, 255;
    --color-sf-on-primary: 0, 49, 92;
    --color-sf-primary-container: 13, 74, 128;
    --color-sf-on-primary-container: 211, 228, 255;
    --color-sf-secondary: 187, 199, 219;
    --color-sf-on-secondary: 37, 49, 64;
    --color-sf-secondary-container: 59, 72, 88;
    --color-sf-on-secondary-container: 215, 227, 247;
    --color-sf-tertiary: 239, 192, 106;
    --color-sf-on-tertiary: 64, 45, 0;
    --color-sf-tertiary-container: 92, 66, 0;
    --color-sf-on-tertiary-containe: 255, 222, 166;
    --color-sf-on-tertiary-container: 255, 222, 166;
    --color-sf-error: 255, 180, 171;
    --color-sf-on-error: 105, 0, 5;
    --color-sf-error-container: 147, 0, 10;
    --color-sf-on-error-container: 255, 218, 214;
    --color-sf-surface: 17, 20, 24;
    --color-sf-on-surface: 226, 226, 230;
    --color-sf-surface-variant: 67, 71, 78;
    --color-sf-on-surface-variant: 195, 199, 207;
    --color-sf-on-background: 226, 226, 230;
    --color-sf-outline: 141, 145, 153;
    --color-sf-outline-variant: 67, 71, 78;
    --color-sf-surface-tint-color: 162, 201, 255;
    --color-sf-inverse-surface: 226, 226, 230;
    --color-sf-inverse-on-surface: 47, 48, 51;
    --color-sf-inverse-primary: 31, 78, 121;
    --crm-m3-surface-container-low: 25, 28, 32;
    --crm-m3-surface-container: 29, 32, 36;
    --crm-m3-surface-container-high: 40, 42, 47;
}

html, body {
    margin: 0;
    background: var(--crm-fondo);
    color: var(--crm-testo);
    font-family: var(--crm-carattere);
    font-size: 15px;
}

* { box-sizing: border-box; }

a { color: var(--crm-primario); }

h1 { font-size: 1.6rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; font-weight: 600; }

/* ---------- Guscio Material 3 (GCRM-W26, passo 2) ---------- */
.crm-shell { min-height: 100vh; }

/* Top app bar: superficie, non colore pieno; 64 px come M3. */
.crm-barra {
    position: sticky; top: 0; z-index: 1000; height: 64px;
    display: flex; align-items: center; gap: .75rem; padding: 0 1rem 0 .5rem;
    background: var(--crm-superficie-2); color: var(--crm-testo);
    border-bottom: 1px solid var(--crm-bordo);
}
.crm-barra-spazio { flex: 1; }
.crm-barra-icona {
    width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--crm-testo-tenue);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.15rem;
}
.crm-barra-icona:hover { background: rgba(var(--color-sf-on-surface), .08); }
.crm-barra-icona:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: 2px; }

.crm-marchio { display: flex; align-items: center; gap: .6rem; color: var(--crm-testo); text-decoration: none; margin-right: .5rem; }
/* Logo ufficiale Ghidetti (GCRM-W28): largo 1,74 volte l'altezza, ha già il suo bordo bianco. */
.crm-marchio img { height: 44px; width: auto; }
.crm-marchio-testo { font-size: .8rem; font-weight: 500; color: var(--crm-testo-tenue); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Ricerca a pillola (M3 search bar) */
.crm-ricerca {
    position: relative; flex: 0 1 560px; min-width: 0; height: 48px; display: flex; align-items: center;
    background: var(--crm-superficie-3); border-radius: 28px; padding-left: 3rem;
}
.crm-ricerca-icona { position: absolute; left: 1.1rem; color: var(--crm-testo-tenue); font-size: 1.05rem; }
.crm-ricerca .e-input-group.crm-ricerca-campo,
.crm-ricerca .e-input-group.e-control-wrapper.crm-ricerca-campo {
    border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0; width: 100%;
}
.crm-ricerca .e-input-group.crm-ricerca-campo::before,
.crm-ricerca .e-input-group.crm-ricerca-campo::after { display: none; }
.crm-ricerca .crm-ricerca-campo input.e-input { font-size: 1rem; padding-left: 0; }
.crm-ricerca-voce { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; }
.crm-ricerca-voce strong { display: block; font-weight: 500; }
.crm-ricerca-voce small { display: block; color: var(--crm-testo-tenue); font-size: .8rem; }
.crm-ricerca-iniziali {
    width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--crm-primario-chiaro); color: rgb(var(--color-sf-on-primary-container)); font-weight: 600; font-size: .82rem;
}
.crm-ricerca-vuota { color: var(--crm-testo-tenue); }

/* Menu utente (M3 menu) */
.crm-menu-utente { position: relative; }
.crm-menu-utente > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.crm-menu-utente > summary::-webkit-details-marker { display: none; }
.crm-menu-utente > summary:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: 2px; }
.crm-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--crm-accento-chiaro); color: rgb(var(--color-sf-on-tertiary-container));
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem;
}
.crm-avatar.grande { width: 48px; height: 48px; font-size: 1rem; }
.crm-menu-utente-elenco {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 1100; min-width: 280px; padding: .5rem 0;
    background: var(--crm-superficie-2); border-radius: 12px; box-shadow: var(--crm-ombra-alta);
}
.crm-menu-utente-chi { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem 1rem; border-bottom: 1px solid var(--crm-bordo); margin-bottom: .5rem; }
.crm-menu-utente-chi strong { display: block; }
.crm-menu-utente-chi small { display: block; color: var(--crm-testo-tenue); font-size: .82rem; }
.crm-menu-utente-elenco form { margin: 0; }
.crm-menu-utente-elenco a, .crm-menu-utente-elenco button {
    width: 100%; height: 48px; display: flex; align-items: center; gap: .9rem; padding: 0 1rem;
    border: 0; background: transparent; color: var(--crm-testo); font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer;
}
.crm-menu-utente-elenco a:hover, .crm-menu-utente-elenco button:hover { background: rgba(var(--color-sf-on-surface), .08); }
.crm-menu-utente-elenco .e-icons { color: var(--crm-testo-tenue); font-size: 1.05rem; }
.crm-velo { position: fixed; inset: 0; z-index: 1050; }

/* Area e navigation drawer / rail */
.crm-area { position: relative; min-height: calc(100vh - 64px); }
.crm-area > .e-sidebar { background: var(--crm-superficie); border-right: 0; height: 100%; }
.crm-area .e-sidebar-overlay { position: fixed; inset: 64px 0 0 0; }
/* Syncfusion mette una transform (identità) sul contenuto: renderebbe lo sfondo "fixed" relativo al contenuto invece
   che allo schermo. Lo spostamento del menu usa i margini, la transform non serve. */
.crm-contenuto.e-content-animation { transform: none !important; }
.crm-navigazione { display: flex; flex-direction: column; gap: 2px; padding: .75rem; min-height: 100%; box-sizing: border-box; }
.crm-navigazione-voce {
    height: 56px; display: flex; align-items: center; gap: .75rem; padding: 0 1rem; border-radius: 28px;
    color: var(--crm-testo-tenue); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.crm-navigazione-voce:hover { background: rgba(var(--color-sf-on-surface), .08); color: var(--crm-testo); }
.crm-navigazione-voce.active { background: rgb(var(--color-sf-secondary-container)); color: rgb(var(--color-sf-on-secondary-container)); font-weight: 600; }
.crm-navigazione-voce:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: 2px; }
.crm-navigazione-icona { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; font-size: 1.15rem; }
.crm-navigazione-contatore {
    position: absolute; top: -7px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--crm-pericolo); color: rgb(var(--color-sf-on-error)); font-size: .7rem; font-weight: 700;
    line-height: 18px; text-align: center;
}
/* Rail: icona in una pillola 56x32 e etichetta piccola sotto. */
.crm-navigazione.crm-compatto { padding: .75rem 0; align-items: center; gap: .75rem; }
.crm-compatto .crm-navigazione-voce {
    width: 72px; height: auto; flex-direction: column; gap: 4px; padding: 0; border-radius: 0; background: transparent !important;
    font-size: .72rem; white-space: normal; text-align: center;
}
.crm-compatto .crm-navigazione-icona { width: 56px; height: 32px; border-radius: 16px; }
.crm-compatto .crm-navigazione-voce:hover .crm-navigazione-icona { background: rgba(var(--color-sf-on-surface), .08); }
.crm-compatto .crm-navigazione-voce.active .crm-navigazione-icona { background: rgb(var(--color-sf-secondary-container)); }
.crm-compatto .crm-navigazione-etichetta { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }

.crm-contenuto { padding: 1.5rem clamp(1rem, 3vw, 2.25rem); max-width: 1500px; }

@media (max-width: 1000px) {
    .crm-marchio-testo { display: none; }
    .crm-ricerca { flex: 1 1 auto; }
}

/* ---------- Intestazione pagina ---------- */
.crm-intestazione { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.crm-intestazione p { margin: .35rem 0 0; color: var(--crm-testo-tenue); }
.crm-intestazione-azioni { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Superfici ---------- */
.crm-pannello {
    background: var(--crm-superficie); border: 1px solid var(--crm-bordo);
    border-radius: var(--crm-raggio); box-shadow: var(--crm-ombra); padding: 1.25rem;
}
.crm-pannello h2 { margin-top: 0; }

.crm-griglia-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.crm-card {
    position: relative; overflow: hidden;
    background: var(--crm-superficie); border: 1px solid var(--crm-bordo);
    border-radius: var(--crm-raggio); box-shadow: var(--crm-ombra);
    padding: 1.1rem 1.2rem; display: flex; gap: 1rem; align-items: center;
    color: var(--crm-testo); text-decoration: none;
}
.crm-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--crm-primario); }
.crm-card.accento::after { background: var(--crm-accento); }
.crm-card.pericolo::after { background: var(--crm-pericolo); }
a.crm-card:hover { transform: translateY(-1px); box-shadow: var(--crm-ombra-alta); }
.crm-card-icona {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--crm-primario-chiaro); color: var(--crm-primario); font-size: 1.35rem;
}
.crm-card.accento .crm-card-icona { background: var(--crm-accento-chiaro); color: var(--crm-accento); }
.crm-card.pericolo .crm-card-icona { background: var(--crm-pericolo-chiaro); color: var(--crm-pericolo); }
.crm-card-valore { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.crm-card-etichetta { display: block; color: var(--crm-testo-tenue); font-size: .88rem; }
.crm-elenco .crm-card-etichetta { display: inline; }

.crm-vuoto { text-align: center; padding: 2rem 1rem; color: var(--crm-testo-tenue); }
/* Solo l'icona dello stato vuoto, non quelle dei pulsanti al suo interno (difetto trovato da GCRM-W27). */
.crm-vuoto > .e-icons { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--crm-accento); }

.crm-caricamento { display: flex; justify-content: center; padding: 2rem; }
.crm-caricamento::before {
    content: ""; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--crm-primario-chiaro); border-top-color: var(--crm-primario);
    animation: crm-gira .8s linear infinite;
}
@keyframes crm-gira { to { transform: rotate(360deg); } }

.crm-elenco { list-style: none; margin: 0; padding: 0; }
.crm-elenco li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .25rem; border-bottom: 1px solid var(--crm-bordo); }
.crm-elenco li:last-child { border-bottom: 0; }
.crm-elenco .scaduta { color: var(--crm-pericolo); font-weight: 600; }
.crm-etichetta { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: var(--crm-superficie-2); border: 1px solid var(--crm-bordo); white-space: nowrap; }
.crm-etichetta.pericolo { background: var(--crm-pericolo-chiaro); border-color: transparent; color: var(--crm-su-pericolo-chiaro); }

.crm-campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.crm-campo label { font-weight: 600; font-size: .88rem; }
.crm-azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- Moduli, filtri, schede (GCRM-W8) ---------- */
.crm-modulo-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 1.25rem; }
.crm-modulo-griglia .crm-campo.largo { grid-column: 1 / -1; }
.crm-campo .validation-message { color: var(--crm-pericolo); font-size: .82rem; }
.crm-etichetta.accento { background: var(--crm-accento-chiaro); border-color: var(--crm-accento); color: var(--crm-testo); }
.crm-filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.crm-collegamento { color: var(--crm-primario); font-weight: 600; text-decoration: none; }
.crm-collegamento:hover { text-decoration: underline; }
.crm-nota { color: var(--crm-testo-tenue); font-size: .85rem; margin-top: 1rem; }
.crm-tab .e-content { padding-top: 1rem; }

/* ---------- Attività: timeline, filtri, contatore menu (GCRM-W9) ---------- */
.crm-filtro-gestore { margin-left: auto; }
.crm-timeline { list-style: none; margin: 1rem 0 0; padding: 0; border-left: 2px solid var(--crm-bordo); }
.crm-timeline li { position: relative; display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; padding: .25rem 0 1.1rem 1.1rem; }
.crm-timeline li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--crm-primario); border: 2px solid var(--crm-superficie); }
.crm-timeline li.chiusa::before { background: var(--crm-testo-tenue); }
.crm-timeline-data { font-weight: 600; font-size: .9rem; }
.crm-timeline-data span { display: block; font-weight: 400; color: var(--crm-testo-tenue); font-size: .8rem; }
.crm-timeline-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.crm-timeline-corpo p { margin: .3rem 0; }
.crm-timeline-corpo .crm-nota { margin-top: 0; }
@media (max-width: 640px) { .crm-timeline li { grid-template-columns: 1fr auto; } .crm-timeline-data { grid-column: 1 / -1; } }

/* Fiere (GCRM-W10): scheda con grafico, ripartizioni, dettaglio e scelta dell'abbinamento. */
.crm-spaziatore { flex: 1 1 auto; }
.crm-colonne-fiera { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.crm-colonne-fiera h2 { margin-top: 0; }
.crm-colonne-fiera h2 + .crm-ripartizione { margin-bottom: 1.25rem; }
.crm-grafico [id*="_Series_0_Point_"] { fill: var(--crm-primario); }
.crm-grafico text { fill: var(--crm-testo-tenue) !important; }
.crm-ripartizione { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.crm-ripartizione li { display: grid; grid-template-columns: 9.5rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .9rem; }
.crm-ripartizione-barra { height: .55rem; border-radius: 999px; background: var(--crm-primario-chiaro); overflow: hidden; }
.crm-ripartizione-barra span { display: block; height: 100%; border-radius: inherit; background: var(--crm-accento); }
.crm-ripartizione strong { text-align: right; }
.crm-ripartizione-voce { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-azioni-riga { display: flex; flex-wrap: nowrap; gap: .15rem; }
.crm-pulsante-testo { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.crm-dettagli { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem .9rem; margin: 0 0 1rem; font-size: .92rem; }
.crm-dettagli dt { color: var(--crm-testo-tenue); }
.crm-dettagli dd { margin: 0; overflow-wrap: anywhere; }
.crm-testo-libero { white-space: pre-line; }
.crm-scelte { border: 1px solid var(--crm-bordo); border-radius: var(--crm-raggio); padding: .75rem 1rem; margin: 0; display: grid; gap: .6rem; }
.crm-scelte legend { padding: 0 .4rem; font-weight: 600; }
.crm-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crm-scelta-manuale { margin: 0 0 .25rem 1.6rem; }
@media (max-width: 900px) { .crm-colonne-fiera { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .crm-dettagli { grid-template-columns: 1fr; } .crm-dettagli dd { margin-bottom: .4rem; } }

/* ---------- Layout account (pagine statiche) ---------- */
.crm-account {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(var(--color-sf-tertiary), .14), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(var(--color-sf-primary), .18), transparent 60%),
        var(--crm-fondo);
}
.crm-account-scheda {
    width: min(460px, 100%); background: var(--crm-superficie); border: 1px solid var(--crm-bordo);
    border-radius: 28px; box-shadow: var(--crm-ombra-alta); padding: 2rem 2rem 1.5rem;
}
.crm-account-scheda:has(.account-gestione) { width: min(860px, 100%); }
.crm-account-marchio { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.crm-account-marchio img { height: 88px; width: auto; }
.crm-account-marchio span { color: var(--crm-testo-tenue); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.crm-account h1 { font-size: 1.35rem; margin-bottom: 1rem; }
.crm-account .campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.crm-account .campo label { font-weight: 600; font-size: .88rem; }
.crm-account input[type=text], .crm-account input[type=email], .crm-account input[type=password], .crm-account input:not([type]) {
    padding: .7rem .8rem; border: 1px solid var(--crm-bordo); border-radius: 10px; font: inherit;
    background: var(--crm-superficie-2); color: var(--crm-testo);
}
.crm-account input:focus { outline: 2px solid var(--crm-primario-chiaro); border-color: var(--crm-primario); }
.crm-account .validation-message { color: var(--crm-pericolo); font-size: .85rem; }
.pulsante-primario, .pulsante, .pulsante-pericolo {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem 1.1rem; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: none; border: 1px solid transparent;
}
.pulsante-primario { width: 100%; background: var(--crm-primario); color: var(--crm-su-primario); border-radius: 999px; }
.pulsante-primario:hover { box-shadow: var(--crm-ombra); filter: brightness(1.08); }
.pulsante { background: var(--crm-superficie-2); color: var(--crm-testo); border-color: var(--crm-bordo); }
.pulsante-pericolo { background: var(--crm-pericolo); color: rgb(var(--color-sf-on-error)); }
.messaggio-errore, .messaggio-ok, .avviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .92rem; }
.messaggio-errore { background: var(--crm-pericolo-chiaro); color: var(--crm-su-pericolo-chiaro); }
.messaggio-ok { background: var(--crm-successo-chiaro); color: rgb(var(--color-sf-on-success-container)); }
.avviso { background: var(--crm-accento-chiaro); color: var(--crm-testo); }
.nota { color: var(--crm-testo-tenue); font-size: .88rem; margin-top: 1rem; }
.account-gestione { display: grid; grid-template-columns: 210px 1fr; gap: 1.5rem; }
.account-menu ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .25rem; }
.account-menu a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--crm-testo); text-decoration: none; }
.account-menu a.active { background: var(--crm-primario-chiaro); color: var(--crm-primario); font-weight: 600; }
.qr svg { width: 200px; height: 200px; margin: .75rem 0; background: rgb(var(--color-sf-white)); padding: 8px; border-radius: 8px; }
.codici-recupero { columns: 2; font-family: Consolas, monospace; }
kbd { background: var(--crm-superficie-2); border: 1px solid var(--crm-bordo); border-radius: 6px; padding: .1rem .4rem; }

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

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
    background: var(--crm-accento-chiaro); color: rgb(var(--color-sf-on-tertiary-container)); padding: .75rem 1.25rem; box-shadow: var(--crm-ombra-alta);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }


/* Tabelle semplici delle pagine statiche del profilo (GCRM-W20: dispositivi dell'app) */
.tabella-semplice { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.tabella-semplice th, .tabella-semplice td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--crm-bordo); vertical-align: middle; }
.tabella-semplice th { color: var(--crm-testo-tenue); font-weight: 600; }
.tabella-semplice form { margin: 0; }
@media (max-width: 700px) { .tabella-semplice th:nth-child(4), .tabella-semplice td:nth-child(4) { display: none; } }

/* ---------- Scheda cliente Material 3 (GCRM-W26, passo 3) ---------- */
.crm-indietro { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .75rem; color: var(--crm-testo-tenue); text-decoration: none; font-weight: 500; }
.crm-indietro:hover { color: var(--crm-primario); }
.crm-scheda-intestazione { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; border-radius: var(--crm-raggio-grande); margin-bottom: 1rem; }
.crm-scheda-intestazione h1 { margin: 0 0 .5rem; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.crm-avatar {
    width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--crm-primario-chiaro); color: var(--crm-primario-scuro); font-weight: 600; font-size: 1.25rem;
}
.crm-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.crm-chip {
    display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 .75rem; border-radius: 8px;
    border: 1px solid rgb(var(--color-sf-outline)); color: var(--crm-testo-tenue); font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.crm-chip.primario { background: rgb(var(--color-sf-secondary-container)); color: rgb(var(--color-sf-on-secondary-container)); border-color: transparent; }
.crm-chip .e-icons { font-size: .9rem; }
.crm-azioni-rapide { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.crm-azione-rapida {
    display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 1rem; border-radius: 20px;
    background: rgb(var(--color-sf-secondary-container)); color: rgb(var(--color-sf-on-secondary-container));
    text-decoration: none; font-weight: 500; font-size: .9rem;
}
.crm-azione-rapida:hover { box-shadow: var(--crm-ombra); }
@media (max-width: 900px) {
    .crm-scheda-intestazione { grid-template-columns: auto minmax(0, 1fr); }
    .crm-azioni-rapide { grid-column: 1 / -1; justify-content: flex-start; }
}

.crm-schede { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--crm-bordo); margin-bottom: 1rem; scrollbar-width: none; }
.crm-scheda {
    position: relative; flex: none; height: 48px; padding: 0 1.1rem; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-weight: 500; font-size: .92rem; color: var(--crm-testo-tenue);
}
.crm-scheda:hover { background: rgba(var(--color-sf-on-surface), .06); }
.crm-scheda:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: -2px; }
.crm-scheda.attiva { color: var(--crm-primario); }
.crm-scheda.attiva::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--crm-primario); }

.crm-sezione-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.crm-sezione-testa h2 { margin: 0; font-size: 1.1rem; }
.crm-panoramica { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.5rem; }
.crm-panoramica aside { border-left: 1px solid var(--crm-bordo); padding-left: 1.5rem; }
.crm-panoramica aside h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.crm-panoramica aside h3 { margin: 1.25rem 0 .5rem; font-size: .95rem; }
@media (max-width: 900px) {
    .crm-panoramica { grid-template-columns: minmax(0, 1fr); }
    .crm-panoramica aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--crm-bordo); padding-top: 1rem; }
}
.crm-dati { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
.crm-dati dt { color: var(--crm-testo-tenue); font-size: .85rem; }
.crm-dati dd { margin: 0; overflow-wrap: anywhere; }
.crm-testo-note { white-space: pre-line; margin: 0; }
.crm-elenco-persone { list-style: none; margin: 0; padding: 0; }
.crm-elenco-persone li { padding: .35rem 0; border-bottom: 1px solid var(--crm-bordo); }
.crm-elenco-persone li:last-child { border-bottom: 0; }
.crm-collegamento-pulsante { border: 0; background: none; padding: .25rem .5rem; color: var(--crm-primario); font: inherit; font-weight: 500; cursor: pointer; border-radius: 16px; }
.crm-collegamento-pulsante:hover { background: rgba(var(--color-sf-primary), .08); }

/* Pannello laterale (side sheet M3): DialogModifica Laterale="true". */
.e-dialog.crm-laterale { height: 100vh !important; max-height: 100vh !important; border-radius: var(--crm-raggio-grande) 0 0 var(--crm-raggio-grande); }
.e-dialog.crm-laterale .e-dlg-content { flex: 1 1 auto; }
@media (max-width: 600px) { .e-dialog.crm-laterale { border-radius: 0; } }

/* ---------- Elenchi Material 3 (GCRM-W26, passo 3.3) ---------- */
.crm-chip-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.crm-chip-filtro {
    display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 1rem; border-radius: 8px;
    border: 1px solid rgb(var(--color-sf-outline)); color: var(--crm-testo-tenue); background: transparent;
    font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.crm-chip-filtro:hover { background: rgba(var(--color-sf-on-surface), .08); }
.crm-chip-filtro:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: 2px; }
.crm-chip-filtro[aria-current="true"] {
    padding-left: .6rem; border-color: transparent;
    background: rgb(var(--color-sf-secondary-container)); color: rgb(var(--color-sf-on-secondary-container));
}
.crm-chip-filtro .e-icons { font-size: .9rem; }
.crm-chip-gruppo .crm-filtro-gestore { margin-left: auto; }
.crm-chip.compatto { height: 24px; padding: 0 .55rem; font-size: .78rem; border-radius: 6px; }

.crm-griglia .e-grid { border-radius: var(--crm-raggio); border-color: var(--crm-bordo); overflow: hidden; }
.crm-griglia .e-grid .e-gridheader, .crm-griglia .e-grid .e-headercell { background: var(--crm-superficie-2); }
.crm-griglia .e-grid .e-headercell .e-headertext { font-weight: 600; color: var(--crm-testo); }
.crm-griglia .e-grid .e-rowcell { padding-top: .7rem; padding-bottom: .7rem; }
.crm-griglia .e-grid .e-toolbar, .crm-griglia .e-grid .e-toolbar-items { background: transparent; }
.crm-griglia-cliccabile .e-grid .e-row { cursor: pointer; }
.crm-griglia-cliccabile .e-grid .e-row:hover .e-rowcell { background: rgba(var(--color-sf-primary), .06) !important; }

/* ---------- Cruscotto Material 3 (GCRM-W26, passo 4.1) ---------- */
.crm-cruscotto { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 1rem; align-items: start; }
.crm-cruscotto .crm-oggi { grid-row: span 2; border-radius: var(--crm-raggio-grande); }
.crm-cruscotto .crm-in-arrivo { border-radius: var(--crm-raggio-grande); }
.crm-indicatori { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
@media (max-width: 600px) {
    .crm-indicatori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-indicatori .crm-card { padding: .8rem; gap: .6rem; }
    .crm-indicatori .crm-card-icona { width: 38px; height: 38px; }
}
@media (max-width: 1000px) {
    .crm-cruscotto { grid-template-columns: minmax(0, 1fr); }
    .crm-cruscotto .crm-oggi { grid-row: auto; }
}
.crm-elenco-attivita { list-style: none; margin: 0; padding: 0; }
.crm-elenco-attivita li { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--crm-bordo); }
.crm-elenco-attivita li:last-child { border-bottom: 0; }
.crm-riga-attivita {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .9rem; padding: .7rem .5rem; border-radius: var(--crm-raggio);
    color: var(--crm-testo); text-decoration: none;
}
.crm-riga-attivita:hover { background: rgba(var(--color-sf-on-surface), .06); }
.crm-riga-attivita:focus-visible { outline: 2px solid var(--crm-primario); outline-offset: -2px; }
.crm-riga-attivita .crm-chip { flex: none; min-width: 5.5rem; justify-content: center; }
.crm-riga-testo { display: flex; flex-direction: column; min-width: 0; }
.crm-riga-testo span { color: var(--crm-testo-tenue); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-chip.pericolo { background: var(--crm-pericolo-chiaro); color: var(--crm-su-pericolo-chiaro); border-color: transparent; }
.crm-vuoto strong { display: block; margin-bottom: .75rem; }

/* Card degli indicatori: tonali (surface-container), senza la barra laterale di W6. */
.crm-card { border: 0; box-shadow: none; background: var(--crm-superficie-2); border-radius: var(--crm-raggio-grande); }
.crm-card::after { display: none; }
a.crm-card:hover { transform: none; box-shadow: none; background: var(--crm-superficie-3); }
.crm-card-valore { font-size: 1.6rem; }

/* ---------- Dialog, notifiche, account (GCRM-W26, passo 4.3) ---------- */
.e-dialog.crm-dialog { border-radius: 28px; background: rgb(var(--crm-m3-surface-container-high)); border: 0; box-shadow: var(--crm-ombra-alta); }
.e-dialog.crm-dialog .e-dlg-header-content, .e-dialog.crm-dialog .e-dlg-content, .e-dialog.crm-dialog .e-footer-content { background: transparent; }
.e-dialog.crm-dialog .e-dlg-header-content { padding: 1.5rem 1.5rem .75rem; }
.e-dialog.crm-dialog .e-dlg-header { font-size: 1.4rem; font-weight: 500; color: var(--crm-testo); }
.e-dialog.crm-dialog .e-dlg-content { padding: .25rem 1.5rem 1rem; color: var(--crm-testo-tenue); }
.e-dialog.crm-dialog .e-footer-content { padding: .5rem 1.5rem 1.5rem; border-top: 0; }
.e-dialog.crm-dialog .e-footer-content .e-btn { border-radius: 20px; min-height: 40px; padding: 0 1.25rem; }
.e-dialog.crm-laterale { border-radius: var(--crm-raggio-grande) 0 0 var(--crm-raggio-grande); }

.e-toast-container .e-toast.crm-snackbar {
    background: rgb(var(--color-sf-inverse-surface)); color: rgb(var(--color-sf-inverse-on-surface));
    border-radius: 4px; box-shadow: var(--crm-ombra-alta); border: 0; border-left: 4px solid transparent;
}
.e-toast-container .e-toast.crm-snackbar .e-toast-title { color: rgb(var(--color-sf-inverse-on-surface)); font-weight: 600; }
.e-toast-container .e-toast.crm-snackbar .e-toast-content { color: rgb(var(--color-sf-inverse-on-surface)); }
.e-toast-container .e-toast.crm-snackbar .e-toast-close-icon { color: rgb(var(--color-sf-inverse-on-surface)); }
.e-toast-container .e-toast.crm-snackbar.e-toast-success { border-left-color: rgb(var(--color-sf-inverse-primary)); }
.e-toast-container .e-toast.crm-snackbar.e-toast-danger { border-left-color: rgb(var(--color-sf-error)); }
.e-toast-container .e-toast.crm-snackbar.e-toast-warning { border-left-color: rgb(var(--color-sf-tertiary)); }

/* Pagine dell'account: campi "outlined" M3 (56 px, angoli 4) e pulsanti a pillola. */
.crm-account input[type=text], .crm-account input[type=email], .crm-account input[type=password], .crm-account input:not([type]) {
    min-height: 56px; padding: 0 1rem; border: 1px solid rgb(var(--color-sf-outline)); border-radius: 4px; background: transparent;
}
.crm-account input:focus { outline: 0; border: 2px solid var(--crm-primario); padding: 0 calc(1rem - 1px); }
.crm-account .campo label { font-weight: 500; color: var(--crm-testo-tenue); }
.pulsante-primario, .pulsante, .pulsante-pericolo { min-height: 40px; border-radius: 20px; padding: .55rem 1.5rem; font-weight: 500; }
.pulsante { background: transparent; color: var(--crm-primario); border-color: rgb(var(--color-sf-outline)); }
.pulsante:hover { background: rgba(var(--color-sf-primary), .08); }
.messaggio-errore, .messaggio-ok, .avviso { border-radius: 12px; }
.crm-account dl.profilo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; margin: 0; }
.crm-account dl.profilo dt { color: var(--crm-testo-tenue); font-size: .88rem; }
.crm-account dl.profilo dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .crm-account dl.profilo { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .crm-account dl.profilo dd { margin-bottom: .6rem; }
}

/* ---------- Powered by Ausint Tech (GCRM-W28) ---------- */
/* In fondo al menu (margin-top: auto nel flex del menu) e alla scheda delle pagine di accesso. Il logo giusto per il
   tema: un <img> SVG non eredita i colori della pagina. */
.crm-powered-by {
    display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; padding: 1.25rem .5rem .5rem;
    font-size: .72rem; color: var(--crm-testo-tenue); letter-spacing: .04em;
}
.crm-powered-by img { height: 22px; width: auto; }
.crm-account .crm-powered-by { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--crm-bordo); }
.crm-solo-scuro { display: none; }
:root[data-tema="scuro"] .crm-solo-chiaro { display: none; }
:root[data-tema="scuro"] .crm-solo-scuro { display: inline; }