/* ============================================================================
   DEIA — TEMA UNICO A STRATI
   Regole: C:\BJ Sviluppo\Regole Claude\docs\rules\ui-theme.md
   Ordine degli strati (NON riordinare):
     1. font  2. design token  3. rimappatura --rz-*  4. shell
     5. componenti brand  6. regole globali (griglie/print)
     7. effetti & micro-interazioni  8. moduli di progetto (chat, dropzone)
   Nessun colore/raggio/ombra hardcoded fuori dallo strato 2.

   Direzione (redesign 04/10/2026): "archivio che risponde".
   - Una risposta di Deia si legge come un documento: serif da lettura,
     la domanda come titolo, le fonti in coda come una bibliografia.
     È l'unico punto "audace": tutto il resto è quieto.
   - Filetti sottili al posto delle ombre; le ombre restano solo a ciò che
     galleggia (dialog, menu, notifiche).
   - Raggi per gerarchia: controlli 6px, contenitori 10px, overlay 14px,
     pastiglie piene.
   - Maiuscoletto mai: etichette in sentence case.
   - Base Radzen "standard" (piatta), non "material" (maiuscole e ombre).
   ========================================================================== */

/* ── 1. FONT ─────────────────────────────────────────────────────────────── */
/* Source Serif 4 per titoli e testo delle risposte (è un testo da leggere),
   IBM Plex Sans per l'interfaccia (cifre tabellari, ottimo in italiano),
   IBM Plex Mono solo per l'SQL. Fallback dichiarati nei token. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

/* ── 2. DESIGN TOKEN ─────────────────────────────────────────────────────── */
:root {
    /* Inchiostro: il testo è blu-notte, non nero (sta col blu Diesys). */
    --deia-ink: #13263B;
    --deia-text: var(--deia-ink);
    --deia-text-muted: #56677A;   /* 5,6:1 sul bianco */
    --deia-text-faint: #7D8C9C;   /* solo segnaposto e metadati secondari */

    /* Brand: blu Diesys per azioni e stato attivo */
    --deia-primary: #0B4F8A;
    --deia-primary-dark: #093F6E;
    --deia-primary-darker: #13263B; /* i titoli usano l'inchiostro */
    --deia-primary-light: #2C6DA8;
    --deia-primary-ultralight: #E8F0F8;
    --deia-primary-rgb: 11, 79, 138;
    --deia-ink-rgb: 19, 38, 59;

    /* Evidenza: il ciano Diesys si usa poco — marcatori, focus, drop. */
    --deia-accent: #00B4D8;
    --deia-accent-dark: #00718A;  /* versione leggibile come testo */
    --deia-accent-light: #7FD9EC;
    --deia-accent-soft: #E0F4F9;
    --deia-accent-rgb: 0, 180, 216;

    /* Grafici (Data Agent, fase 4): ordine categoriale fisso, mai ciclato. Validata con lo
       script dataviz (banda di luminosità, croma, separazione per daltonici e a vista
       normale): passa. Tre colori (3, 4, 5) stanno sotto 3:1 sul bianco: per questo il
       grafico ha sempre legenda ed è sempre disponibile la vista tabella. Il primo colore
       è il blu chiaro Diesys: il blu pieno #0B4F8A è troppo scuro per la banda. */
    --deia-chart-1: #2C6DA8;
    --deia-chart-2: #EB6834;
    --deia-chart-3: #1BAF7A;
    --deia-chart-4: #EDA100;
    --deia-chart-5: #E87BA4;
    --deia-chart-6: #008300;
    --deia-chart-7: #6250D6;
    --deia-chart-8: #E34948;

    /* Carta */
    --deia-bg: #F4F6F9;
    --deia-surface: #FFFFFF;
    --deia-surface-tint: #F1F4F8;
    --deia-surface-sunken: #F8FAFC;
    --deia-border: #E1E7EE;
    --deia-border-strong: #C8D2DD;

    /* Stato */
    --deia-success: #2F7D4F;
    --deia-success-soft: #E6F2EA;
    --deia-warning: #9A5B00;
    --deia-warning-soft: #FBF0DC;
    --deia-danger: #B5382F;
    --deia-danger-soft: #FAE8E6;
    --deia-info: #2C6DA8;

    /* Ombre: solo per ciò che galleggia sopra la pagina. */
    --deia-shadow-sm: 0 1px 2px rgba(var(--deia-ink-rgb), .06);
    --deia-shadow: 0 4px 14px rgba(var(--deia-ink-rgb), .08);
    --deia-shadow-lg: 0 18px 44px rgba(var(--deia-ink-rgb), .18);
    --deia-ring: 0 0 0 3px rgba(var(--deia-accent-rgb), .28);

    /* Raggi per gerarchia */
    --deia-radius-sm: 6px;
    --deia-radius: 10px;
    --deia-radius-lg: 14px;

    /* Misure di layout */
    --deia-sidebar-width: 244px;
    --deia-topbar-height: 52px;
    --deia-reading: 46rem;  /* misura di lettura della chat (~75 battute) */

    /* Font */
    --deia-font-display: 'Source Serif 4', 'Georgia', 'Cambria', serif;
    --deia-font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --deia-font-mono: 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', monospace;

    /* Scala tipografica (base 14.5px di interfaccia, 17px di lettura) */
    --deia-fs-xs: .75rem;
    --deia-fs-sm: .8125rem;
    --deia-fs-base: .90625rem;
    --deia-fs-read: 1.0625rem;
    --deia-fs-h3: 1.1875rem;
    --deia-fs-h2: 1.5rem;
    --deia-fs-h1: 1.875rem;
    --deia-fs-hero: 2.375rem;
}

html {
    font-size: 16px;
}

/* ── 3. RIMAPPATURA SUI TOKEN RADZEN ─────────────────────────────────────── */
:root {
    --rz-primary: var(--deia-primary);
    --rz-primary-dark: var(--deia-primary-dark);
    --rz-primary-darker: var(--deia-primary-dark);
    --rz-primary-light: var(--deia-primary-light);
    --rz-primary-lighter: var(--deia-primary-ultralight);
    --rz-on-primary-lighter: var(--deia-primary);
    --rz-secondary: var(--deia-accent-dark);
    --rz-secondary-dark: var(--deia-accent-dark);
    --rz-secondary-light: var(--deia-accent-light);
    --rz-secondary-lighter: var(--deia-accent-soft);
    --rz-info: var(--deia-info);
    --rz-success: var(--deia-success);
    --rz-success-lighter: var(--deia-success-soft);
    --rz-warning: var(--deia-warning);
    --rz-warning-lighter: var(--deia-warning-soft);
    --rz-danger: var(--deia-danger);
    --rz-danger-lighter: var(--deia-danger-soft);

    --rz-base-background-color: var(--deia-surface);
    --rz-body-background-color: var(--deia-bg);
    --rz-panel-background-color: var(--deia-surface);
    --rz-base-50: var(--deia-surface-sunken);
    --rz-base-100: var(--deia-surface-tint);
    --rz-base-200: var(--deia-surface-tint);
    --rz-base-300: var(--deia-border);
    --rz-base-400: var(--deia-border-strong);
    --rz-border-color: var(--deia-border);
    --rz-border-normal: 1px solid var(--deia-border);

    --rz-text-color: var(--deia-ink);
    --rz-text-secondary-color: var(--deia-text-muted);
    --rz-text-tertiary-color: var(--deia-text-faint);
    --rz-text-title-color: var(--deia-ink);
    --rz-text-h-color: var(--deia-ink);
    --rz-text-font-family: var(--deia-font-sans);
    --rz-body-font-size: var(--deia-fs-base);
    --rz-body-line-height: 1.45;

    --rz-border-radius: var(--deia-radius-sm);
    --rz-card-border-radius: var(--deia-radius);
    --rz-dialog-border-radius: var(--deia-radius-lg);
    --rz-outline-color: var(--deia-accent);
    --rz-outline-focus: 2px solid var(--deia-accent);

    /* Bottoni: piatti, peso medio, niente maiuscole. */
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: var(--deia-ring);
    --rz-button-active-shadow: none;
    --rz-button-hover-gradient: none;
    --rz-button-focus-gradient: none;
    --rz-text-button-text-transform: none;

    /* Campi */
    --rz-input-border: 1px solid var(--deia-border-strong);
    --rz-input-hover-border: 1px solid var(--deia-text-faint);
    --rz-input-focus-border: 1px solid var(--deia-primary);
    --rz-input-focus-shadow: var(--deia-ring);
    --rz-input-border-radius: var(--deia-radius-sm);
    --rz-input-placeholder-color: var(--deia-text-faint);

    /* Griglie: filetti orizzontali, intestazione quieta */
    --rz-grid-border: none;
    --rz-grid-cell-border: none;
    --rz-grid-right-cell-border: none;
    --rz-grid-bottom-cell-border: 1px solid var(--deia-border);
    --rz-grid-header-background-color: var(--deia-surface-sunken);
    --rz-grid-header-sorted-background-color: var(--deia-surface-tint);
    --rz-grid-header-cell-border: none;
    --rz-grid-header-cell-border-bottom: 1px solid var(--deia-border);
    --rz-grid-header-color: var(--deia-text-muted);
    --rz-grid-header-font-size: var(--deia-fs-sm);
    --rz-grid-header-font-weight: 600;
    --rz-grid-cell-padding: .55rem .75rem;
    --rz-grid-hover-background-color: var(--deia-surface-sunken);
    --rz-grid-hover-color: var(--deia-ink);
    --rz-grid-stripe-background-color: var(--deia-surface);
    --rz-grid-selected-background-color: var(--deia-primary-ultralight);
    --rz-grid-data-border-shadow: none;

    /* Tab: sottolineatura, non linguette */
    --rz-tabs-border: none;
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-selected-background-color: transparent;
    --rz-tabs-tab-hover-background-color: transparent;
    --rz-tabs-tab-focus-background-color: transparent;
    --rz-tabs-tab-color: var(--deia-text-muted);
    --rz-tabs-tab-hover-color: var(--deia-ink);
    --rz-tabs-tab-selected-color: var(--deia-primary);
    --rz-tabs-tab-selected-top-border-color: transparent;
    --rz-tabs-tab-font-weight: 500;
    --rz-tabs-tab-text-transform: none;

    --rz-badge-text-transform: none;

    /* Shell */
    --rz-header-height: var(--deia-topbar-height);
    --rz-header-min-height: var(--deia-topbar-height);
    --rz-header-background-color: var(--deia-surface);
    --rz-header-color: var(--deia-ink);
    --rz-header-shadow: none;
    --rz-sidebar-width: var(--deia-sidebar-width);
    --rz-sidebar-background-color: var(--deia-surface);
    --rz-sidebar-color: var(--deia-ink);
    --rz-sidebar-border-inline-end: 1px solid var(--deia-border);
    --rz-sidebar-toggle-background-color: transparent;
    --rz-sidebar-toggle-hover-background-color: var(--deia-surface-tint);
    --rz-sidebar-toggle-border: none;
    --rz-sidebar-toggle-color: var(--deia-text-muted);

    /* Menu laterale */
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-background-color: var(--deia-surface-tint);
    --rz-panel-menu-item-active-background-color: var(--deia-primary-ultralight);
    --rz-panel-menu-item-active-indicator: transparent;
    --rz-panel-menu-item-color: var(--deia-text-muted);
    --rz-panel-menu-item-hover-color: var(--deia-ink);
    --rz-panel-menu-item-active-color: var(--deia-primary);
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-item-border-radius: var(--deia-radius-sm);
    --rz-panel-menu-icon-color: currentColor;
    --rz-panel-menu-font-weight: 500;
    --rz-panel-menu-item-padding-block: .45rem;
    --rz-panel-menu-item-padding-inline: .7rem;
}

body {
    font-family: var(--deia-font-sans);
    font-size: var(--deia-fs-base);
    background: var(--deia-bg);
    color: var(--deia-ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 0;
}

h1, h2, h3, h4, h5, h6,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
    font-family: var(--deia-font-display);
    font-weight: 600;
    color: var(--deia-ink);
    letter-spacing: -.005em;
}

a { color: var(--deia-primary); }

/* ── 4. SHELL (sidebar, topbar, contenuto) ───────────────────────────────── */

.deia-topbar {
    background: var(--deia-surface) !important;
    border-bottom: 1px solid var(--deia-border) !important;
    box-shadow: none !important;
}

.deia-topbar-inner {
    height: 100%;
    padding: 0 1rem 0 .25rem;
}

/* Briciole: dove sono (sezione / pagina). Il titolo vero è l'H1 della pagina. */
.deia-crumbs {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.deia-crumbs-sep { color: var(--deia-border-strong); }

.deia-topbar-title {
    font-family: var(--deia-font-sans);
    font-weight: 600;
    font-size: var(--deia-fs-sm);
    color: var(--deia-ink);
    margin: 0;
}

.deia-topbar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.deia-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--deia-primary);
    background: var(--deia-primary-ultralight);
    flex: 0 0 auto;
}

.deia-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.deia-user-name {
    font-size: var(--deia-fs-sm);
    font-weight: 600;
    color: var(--deia-ink);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deia-user-role {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

.deia-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--deia-radius-sm);
    background: transparent;
    color: var(--deia-text-muted);
    cursor: pointer;
}

    .deia-icon-btn:hover { background: var(--deia-surface-tint); color: var(--deia-ink); }
    .deia-icon-btn:focus-visible { outline: none; box-shadow: var(--deia-ring); }

/* Sidebar chiara: la navigazione non compete col contenuto. */
.deia-sidebar {
    background: var(--deia-surface) !important;
    border-right: 1px solid var(--deia-border) !important;
    color: var(--deia-ink);
}

/* Nella topbar il marchio occupa la larghezza della sidebar (meno il toggle):
   così le briciole partono allineate al contenuto. */
.deia-brand {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: calc(var(--deia-sidebar-width) - 3.5rem);
    flex: 0 0 auto;
    text-decoration: none;
}

.deia-topbar .deia-brand:focus-visible { outline: none; box-shadow: var(--deia-ring); border-radius: var(--deia-radius-sm); }

@media (max-width: 767px) {
    .deia-topbar .deia-brand { width: auto; margin-right: .75rem; }
}

.deia-brand-name {
    font-family: var(--deia-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--deia-ink);
    letter-spacing: -.01em;
}

/* Il punto ciano è il "segno di citazione" di Deia: ricorre accanto alle fonti. */
.deia-brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--deia-accent);
    align-self: flex-end;
    margin-bottom: .3em;
}

.deia-brand-claim {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

.deia-menu-section {
    padding: 1.1rem 1.15rem .35rem;
    font-size: var(--deia-fs-xs);
    font-weight: 500;
    color: var(--deia-text-faint);
}

.deia-sidebar .rz-panel-menu,
.deia-sidebar .rz-panel-menu .rz-navigation-menu,
.deia-sidebar .rz-panel-menu .rz-navigation-item,
.deia-sidebar .rz-navigation-item-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.deia-sidebar .rz-panel-menu {
    padding: 0 .6rem;
}

.deia-sidebar .rz-navigation-item { margin-bottom: 1px; }

.deia-sidebar .rz-navigation-item-link {
    border-radius: var(--deia-radius-sm);
    padding: .45rem .65rem !important;
    color: var(--deia-text-muted) !important;
    font-size: var(--deia-fs-base);
    font-weight: 500;
}

.deia-sidebar .rz-navigation-item-icon {
    color: var(--deia-text-faint) !important;
    font-size: 1.15rem;
}

.deia-sidebar .rz-navigation-item-link:hover {
    background: var(--deia-surface-tint) !important;
    color: var(--deia-ink) !important;
}

.deia-sidebar .rz-navigation-item-link:hover .rz-navigation-item-icon { color: var(--deia-ink) !important; }

.deia-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-link,
.deia-sidebar .rz-navigation-item-link.active {
    background: var(--deia-primary-ultralight) !important;
    color: var(--deia-primary) !important;
    font-weight: 600;
    box-shadow: none;
}

.deia-sidebar .rz-navigation-item-wrapper-active .rz-navigation-item-icon,
.deia-sidebar .rz-navigation-item-link.active .rz-navigation-item-icon { color: var(--deia-primary) !important; }

.deia-sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.15rem 1.15rem;
    font-size: var(--deia-fs-xs);
    line-height: 1.5;
    color: var(--deia-text-faint);
}

/* La base "standard" mette 16px di padding al corpo: lo spazio lo gestisce
   .deia-content, altrimenti la chat (100vh) sfora e il corpo scorre di 32px. */
.rz-body {
    padding: 0 !important;
    background: var(--deia-bg);
}

/* Il contenitore del contenuto è anche il contenitore dello scroll orizzontale
   delle griglie (strato 6, livello 2). */
.deia-content {
    padding: 1.75rem 2rem 3rem;
    overflow-x: auto;
    container-type: inline-size;
    min-width: 0; /* senza, le griglie larghe sfondano il layout invece di scrollare */
}

.deia-content--flush {
    /* pagine a tutta altezza (chat): niente padding, gestiscono loro lo spazio */
    padding: 0;
    overflow-x: hidden;
}

@media (max-width: 767px) {
    .deia-content:not(.deia-content--flush) { padding: 1.1rem 1rem 2rem; }
    .deia-user-text { display: none; }
    /* sul telefono basta il nome della pagina */
    .deia-crumbs-section, .deia-crumbs-sep { display: none; }
}

/* ── 5. COMPONENTI BRAND ─────────────────────────────────────────────────── */

/* Testata di pagina: titolo serif, sottotitolo, azioni a destra. */
.deia-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.deia-page-title {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: var(--deia-fs-h1);
    line-height: 1.15;
    color: var(--deia-ink);
    margin: 0 0 .4rem;
    letter-spacing: -.012em;
}

.deia-page-sub {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--deia-text-muted);
    max-width: 72ch;
}

.deia-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Card: un foglio. Filetto, niente ombra — non è cliccabile, non deve sembrarlo. */
.deia-card {
    background: var(--deia-surface);
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius);
    padding: 1.25rem 1.4rem;
}

.deia-card-title {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: var(--deia-fs-h3);
    line-height: 1.25;
    color: var(--deia-ink);
    margin: 0 0 .2rem;
}

.deia-card-sub {
    font-size: var(--deia-fs-sm);
    line-height: 1.5;
    color: var(--deia-text-muted);
    margin: 0 0 1rem;
    max-width: 80ch;
}

/* Fascia KPI: un solo pannello diviso da filetti, non cinque card uguali.
   Ogni cella disegna il filetto a sinistra e sopra; quelli sul bordo
   vengono tagliati dall'overflow del pannello. */
.deia-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    background: var(--deia-surface);
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.deia-stat {
    position: relative;
    padding: 1rem 1.2rem 1.05rem;
    box-shadow: -1px 0 0 var(--deia-border), 0 -1px 0 var(--deia-border);
    min-width: 0;
}

.deia-stat-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--deia-fs-sm);
    font-weight: 500;
    color: var(--deia-text-muted);
}

    .deia-stat-label .rzi { font-size: 1rem !important; color: var(--deia-text-faint); }

/* Il tono si legge su un punto accanto all'etichetta, non su una barra. */
.deia-stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: auto;
    background: transparent;
}

.deia-stat.is-success .deia-stat-dot { background: var(--deia-success); }
.deia-stat.is-warning .deia-stat-dot { background: var(--deia-warning); }
.deia-stat.is-danger .deia-stat-dot { background: var(--deia-danger); }

.deia-stat-value {
    font-family: var(--deia-font-sans);
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 1.15;
    margin: .3rem 0 .15rem;
    color: var(--deia-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.deia-stat.is-warning .deia-stat-value { color: var(--deia-warning); }
.deia-stat.is-danger .deia-stat-value { color: var(--deia-danger); }

.deia-stat-hint {
    font-size: var(--deia-fs-xs);
    line-height: 1.4;
    color: var(--deia-text-muted);
}

/* Pastiglia: neutra per i conteggi, col punto per gli stati. */
.deia-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .14rem .55rem;
    border-radius: 999px;
    font-size: var(--deia-fs-xs);
    font-weight: 500;
    line-height: 1.35;
    background: var(--deia-surface-tint);
    color: var(--deia-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.deia-pill.is-success::before,
.deia-pill.is-warning::before,
.deia-pill.is-danger::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.deia-pill.is-success { background: var(--deia-success-soft); color: var(--deia-success); }
.deia-pill.is-warning { background: var(--deia-warning-soft); color: var(--deia-warning); }
.deia-pill.is-danger  { background: var(--deia-danger-soft);  color: var(--deia-danger); }
.deia-pill.is-accent  { background: var(--deia-primary-ultralight); color: var(--deia-primary); }

/* Toolbar sopra le griglie */
.deia-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.deia-toolbar-spacer { margin-left: auto; }

/* Empty state: un invito ad agire, non un'illustrazione. */
.deia-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--deia-text-muted);
    font-size: var(--deia-fs-sm);
    line-height: 1.5;
}

.deia-empty-icon {
    font-size: 1.6rem !important;
    color: var(--deia-primary-light);
    background: var(--deia-primary-ultralight);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid !important;
    place-items: center;
}

.deia-empty-title {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: var(--deia-fs-h3);
    color: var(--deia-ink);
    margin: .75rem 0 .3rem;
}

/* Skeleton (stati di caricamento: mai solo lo spinner) */
.deia-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--deia-surface-tint);
    border-radius: var(--deia-radius-sm);
    min-height: 14px;
}

.deia-skeleton-row {
    height: 36px;
    margin-bottom: .45rem;
}

/* Login: a sinistra cosa fa Deia, a destra l'accesso. */
.deia-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    background: var(--deia-surface);
}

.deia-login-aside {
    background: var(--deia-primary);
    color: #fff;
    padding: 2.75rem 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.deia-login-aside .deia-brand { width: auto; }
.deia-login-aside .deia-brand-name { color: #fff; font-size: 1.75rem; }

.deia-login-statement {
    font-family: var(--deia-font-display);
    font-weight: 400;
    font-size: var(--deia-fs-hero);
    line-height: 1.15;
    letter-spacing: -.015em;
    max-width: 16ch;
    margin: 0;
}

.deia-login-points {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .82);
    max-width: 42ch;
}

    .deia-login-points li { display: flex; gap: .6rem; align-items: baseline; }

    .deia-login-points li::before {
        content: "";
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--deia-accent-light);
        transform: translateY(-2px);
    }

.deia-login-aside-foot {
    font-size: var(--deia-fs-xs);
    color: rgba(255, 255, 255, .6);
}

.deia-login-main {
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.deia-login-card {
    width: min(360px, 100%);
}

.deia-login-title {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: var(--deia-fs-h1);
    margin: 0 0 .35rem;
}

.deia-login-lead {
    margin: 0 0 1.75rem;
    color: var(--deia-text-muted);
    font-size: .9375rem;
}

.deia-login-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1rem;
}

    .deia-login-field label {
        font-size: var(--deia-fs-sm);
        font-weight: 500;
        color: var(--deia-ink);
    }

    .deia-login-field input {
        box-sizing: border-box;
        width: 100%;
        height: 2.6rem;
        font-size: .9375rem;
    }

.deia-login-submit {
    width: 100%;
    height: 2.6rem;
    margin-top: .5rem;
    font-size: .9375rem !important;
}

.deia-login-foot {
    margin-top: 1.5rem;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

@media (max-width: 860px) {
    .deia-login { grid-template-columns: 1fr; }
    .deia-login-aside { padding: 1.75rem 1.25rem; }
    .deia-login-statement { font-size: 1.75rem; }
    .deia-login-points, .deia-login-aside-foot { display: none; }
}

/* ── 6. REGOLE GRAFICHE GLOBALI ──────────────────────────────────────────── */

/* Bottoni: niente maiuscole (eredità material), peso medio, piatti. */
.rz-button {
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500;
    font-family: var(--deia-font-sans);
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-primary,
.rz-button.rz-variant-outlined.rz-base {
    border-color: var(--deia-border-strong) !important;
    color: var(--deia-ink) !important;
    background: var(--deia-surface) !important;
    box-shadow: none !important;
}

    .rz-button.rz-variant-outlined.rz-primary:not(:disabled):hover,
    .rz-button.rz-variant-outlined.rz-base:not(:disabled):hover {
        background: var(--deia-surface-tint) !important;
        border-color: var(--deia-text-faint) !important;
    }

    .rz-button.rz-variant-outlined.rz-primary .rzi { color: var(--deia-primary); }

.rz-button.rz-primary.rz-variant-filled:not(:disabled):hover { background: var(--deia-primary-dark) !important; }

.rz-button:focus-visible { outline: none !important; box-shadow: var(--deia-ring) !important; }
.rz-button:disabled { opacity: .45; cursor: not-allowed; }

/* Tab: sottolineatura sul selezionato */
.rz-tabview-nav {
    border-bottom: 1px solid var(--deia-border) !important;
    gap: .25rem;
    margin-bottom: 1.1rem !important;
}

.rz-tabview-nav li { border: none !important; }

.rz-tabview-nav li a,
.rz-tabview-nav li button {
    padding: .55rem .15rem !important;
    margin-right: 1.1rem;
    font-weight: 500;
    border-radius: 0 !important;
    background: transparent !important;
}

.rz-tabview-nav li.rz-tabview-selected a,
.rz-tabview-nav li.rz-tabview-selected button {
    box-shadow: inset 0 -2px 0 var(--deia-primary) !important;
    color: var(--deia-primary) !important;
}

.rz-tabview-panels { padding: 0 !important; background: transparent !important; border: none !important; }
.rz-tabview-panel { padding: 0 !important; }

/* Finiture: scrollbar e selezione col brand. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--deia-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--deia-border-strong);
    border-radius: 8px;
    border: 2px solid var(--deia-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--deia-text-faint); }

::selection {
    background: var(--deia-accent-soft);
    color: var(--deia-ink);
}

/* --- Griglie, livello 1: titoli a capo, mai troncati --- */
.rz-column-title {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rz-grid-table thead th { vertical-align: middle; }
/* la colonna coi bottoni resta su una riga */
.rz-grid-table td:has(> .rz-button) { white-space: nowrap; }
/* numeri allineati in colonna */
.rz-grid-table td { font-variant-numeric: tabular-nums; }

/* --- Griglie, livello 2: scroll orizzontale a livello di PAGINA --- */
/* Con lo scroll interno, sui portatili la barra finisce fuori viewport e
   l'ultima colonna resta tagliata. */
@media (min-width: 768px) {
    .deia-content .rz-data-grid { width: max-content; min-width: 100%; }
    .deia-content .rz-grid-table { width: auto; min-width: 100%; }
    .deia-content .rz-data-grid,
    .deia-content .rz-data-grid-data { overflow: visible; }
    .deia-content .rz-cell-data { max-width: 480px; }
    .deia-content .deia-card:has(.rz-grid-table) { width: max-content; min-width: 100%; }
    /* i figli non-griglia della card non si stirano oltre la viewport */
    .deia-content .deia-card:has(.rz-grid-table) > *:not(.rz-data-grid) { max-width: calc(100cqw - 104px); }

    /* Eccezione: dentro i dialog lo scroll resta interno (il dialog non si allarga). */
    .rz-dialog .rz-data-grid { width: auto; min-width: 0; }
    .rz-dialog .rz-data-grid,
    .rz-dialog .rz-data-grid-data { overflow: auto; }
}

/* --- Griglie, livello 3: colonne a priorità --- */
/* deia-col-lg = terziaria (sparisce sotto il full HD)
   deia-col-md = secondaria (sparisce sui portatili piccoli) */
@media (max-width: 1399px) {
    .deia-col-lg, th.deia-col-lg, td.deia-col-lg { display: none; }
}

@media (max-width: 999px) {
    .deia-col-md, th.deia-col-md, td.deia-col-md { display: none; }
}

/* --- Griglie, livello 4: card-mode sotto 768px --- */
@media (max-width: 767px) {
    .deia-content .rz-data-grid thead { display: none; }
    .deia-content .rz-grid-table,
    .deia-content .rz-grid-table tbody,
    .deia-content .rz-grid-table tr { display: block; width: 100% !important; }

    .deia-content .rz-grid-table tr.rz-data-row {
        border: 1px solid var(--deia-border);
        border-radius: var(--deia-radius);
        margin-bottom: 10px;
        padding: 6px 10px;
        background: var(--deia-surface);
    }

        .deia-content .rz-grid-table tr.rz-data-row td {
            display: flex;
            align-items: baseline;
            gap: 8px;
            border: none;
            width: 100% !important;
            text-align: left !important; /* le colonne numeriche non spingono l'etichetta a destra */
        }

            /* l'etichetta arriva dallo script deia-ui.js (data-label) */
            .deia-content .rz-grid-table tr.rz-data-row td::before {
                content: attr(data-label);
                flex: 0 0 38%;
                font-size: var(--deia-fs-xs);
                font-weight: 500;
                color: var(--deia-text-muted);
            }

            .deia-content .rz-grid-table tr.rz-data-row td[data-label=""]::before { display: none; }
            .deia-content .rz-grid-table tr.rz-data-row td:has(> .rz-button) { justify-content: flex-end; }
}

/* Textarea sempre ridimensionabili in altezza */
.rz-textarea, textarea { resize: vertical !important; }

/* Resizer di colonna evidente */
.rz-column-resizer { cursor: col-resize; width: 6px; }
.rz-column-resizer:hover { background: rgba(var(--deia-accent-rgb), .5); }

/* Bottone export Excel: sempre spinto a destra nella toolbar */
.deia-btn-excel { margin-left: auto; }

/* Griglia: dentro una card non ha bordo proprio; fuori sì. */
.rz-data-grid {
    border-radius: var(--deia-radius-sm);
    border: 1px solid var(--deia-border);
    background: var(--deia-surface);
    overflow: hidden;
}

.rz-data-grid .rz-grid-table thead th {
    background: var(--deia-surface-sunken) !important;
    border-bottom: 1px solid var(--deia-border) !important;
    color: var(--deia-text-muted);
    font-weight: 600;
    font-size: var(--deia-fs-sm);
}

/* La maniglia per spostare le colonne compare solo quando serve. */
.rz-grid-table thead th .rz-column-drag { opacity: 0; transition: opacity .12s ease; }
.rz-grid-table thead th:hover .rz-column-drag { opacity: .6; }

.rz-datatable-empty-message,
.rz-grid-table .rz-datatable-emptymessage {
    color: var(--deia-text-muted);
}

.rz-paginator { border-top: 1px solid var(--deia-border); background: var(--deia-surface) !important; }

.rz-paginator .rz-paginator-page { border-radius: var(--deia-radius-sm) !important; }

    .rz-paginator .rz-paginator-page.rz-state-active {
        background: var(--deia-primary-ultralight) !important;
        color: var(--deia-primary) !important;
        font-weight: 600;
    }

/* Dialog e notifiche: galleggiano, quindi hanno l'ombra. */
.rz-dialog { box-shadow: var(--deia-shadow-lg) !important; }
.rz-dialog-titlebar { border-bottom: 1px solid var(--deia-border); }
.rz-dialog-title { font-family: var(--deia-font-display); font-weight: 600; font-size: var(--deia-fs-h3); }
.rz-dialog-mask { background: rgba(var(--deia-ink-rgb), .38) !important; }
.rz-notification-item { box-shadow: var(--deia-shadow) !important; border-radius: var(--deia-radius) !important; }
.rz-popup, .rz-dropdown-panel { box-shadow: var(--deia-shadow) !important; border: 1px solid var(--deia-border) !important; border-radius: var(--deia-radius-sm) !important; }

/* Alert: piatti col filetto */
.rz-alert { border-radius: var(--deia-radius-sm) !important; }

/* Utility di testo usate dalle pagine */
.text-danger { color: var(--deia-danger); }

/* --- Print --- */
@media print {
    .deia-sidebar, .deia-topbar, .rz-paginator,
    .deia-page-actions, .deia-toolbar, .app-no-print, .deia-no-print { display: none !important; }

    .deia-content { padding: 0; overflow: visible; }
    .deia-card { border: 1px solid #999; break-inside: avoid; }
    .rz-grid-table th, .rz-grid-table td { border: 1px solid #999 !important; }
    .deia-print-only { display: block !important; }

    @page { size: A4; margin: 1.2cm; }
}

.deia-print-only { display: none; }

/* ── 7. EFFETTI & MICRO-INTERAZIONI ──────────────────────────────────────── */
/* Regole: docs/rules/ui-effects.md, in versione sobria (redesign 04/10):
   il movimento risponde a un gesto o segnala un cambiamento — niente
   decorazioni continue (shine, shimmer, icone che fluttuano, blob).
   Si animano solo transform/opacity/colore. */

/* 7.1 Bottoni: pressione percepibile, nient'altro */
.rz-button {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease !important;
}

.rz-button:not(:disabled):active { transform: scale(.98); }

/* TRAPPOLA (bug reale su SioPROD/Dreaming): i bottoni-icona che Radzen
   posiziona absolute dentro i campi (datepicker, numeric, timespan) non
   vanno toccati da regole generali sui bottoni. */
.rz-button.rz-datepicker-field-button,
.rz-numeric-button,
.rz-timespanpicker-trigger {
    position: absolute !important;
    overflow: visible !important;
}

    .rz-button.rz-datepicker-field-button:active,
    .rz-numeric-button:active,
    .rz-timespanpicker-trigger:active { transform: none !important; }

/* 7.2 Focus: anello ciano su tutti gli input (accessibilità da tastiera) */
.rz-textbox, .rz-password, .rz-textarea, .rz-dropdown, .rz-multiselect,
.rz-datepicker .rz-inputtext, .rz-numeric .rz-textbox {
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.rz-textbox:focus, .rz-password:focus, .rz-textarea:focus,
.rz-dropdown.rz-state-focused, .rz-multiselect.rz-state-focused,
.rz-datepicker .rz-inputtext:focus, .rz-numeric .rz-textbox:focus {
    border-color: var(--deia-primary) !important;
    box-shadow: var(--deia-ring) !important;
    outline: none !important;
}

.rz-form-field:focus-within .rz-form-field-label { color: var(--deia-primary) !important; }

/* 7.3 Griglie: la riga sotto il puntatore si schiarisce appena */
.rz-data-grid .rz-grid-table tbody tr.rz-data-row { transition: background-color .12s ease; }

/* 7.4 Cambio pagina: l'unico ingresso orchestrato dell'app.
   Il contenuto arriva con una dissolvenza breve; le card non "salgono"
   una a una (sarebbe rumore su pagine dense). */
.deia-content > * { animation: fxIn .22s ease both; }

@keyframes fxIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* 7.5 Dialog e notifiche: entrano, così si vede cosa è cambiato */
.rz-dialog { animation: fxDialogIn .2s cubic-bezier(.2, .9, .3, 1); }

@keyframes fxDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.rz-dialog-mask { animation: fxFade .18s ease; }

@keyframes fxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rz-notification-item { animation: fxNotifIn .22s cubic-bezier(.2, .9, .3, 1); }

@keyframes fxNotifIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

/* 7.6 Skeleton: il luccichio è informazione (sta caricando) */
.deia-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform: translateX(-100%);
    animation: fxSkeleton 1.4s ease infinite;
}

@keyframes fxSkeleton {
    to { transform: translateX(100%); }
}

/* 7.7 OBBLIGATORIO in chiusura: riduzione movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── 8. MODULI DI PROGETTO ───────────────────────────────────────────────── */

/* 8.1 Chat ---------------------------------------------------------------
   La conversazione è impaginata come un documento: ogni scambio è una
   domanda-titolo seguita dalla risposta in serif da lettura e dalle fonti. */
.chat-page {
    display: flex;
    height: calc(100vh - var(--deia-topbar-height));
    background: var(--deia-surface);
}

.chat-history {
    width: 256px;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem .75rem;
    background: var(--deia-surface-sunken);
    border-right: 1px solid var(--deia-border);
}

.chat-new {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--deia-border-strong);
    border-radius: var(--deia-radius-sm);
    background: var(--deia-surface);
    color: var(--deia-ink);
    font: 500 var(--deia-fs-base) var(--deia-font-sans);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .chat-new:hover { background: var(--deia-surface-tint); border-color: var(--deia-text-faint); }
    .chat-new:focus-visible { outline: none; box-shadow: var(--deia-ring); }
    .chat-new .rzi { font-size: 1.1rem; color: var(--deia-primary); }

.chat-history-list {
    overflow-y: auto;
    flex: 1;
    margin: 0 -.25rem;
    padding: 0 .25rem;
}

.chat-history-label {
    font-size: var(--deia-fs-xs);
    font-weight: 500;
    color: var(--deia-text-faint);
    padding: .5rem .5rem .3rem;
}

.chat-history-empty {
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
    padding: .25rem .5rem;
    line-height: 1.5;
}

.chat-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    padding: .2rem .2rem .2rem .55rem;
    min-height: 2rem;
    border-radius: var(--deia-radius-sm);
    cursor: pointer;
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
    transition: background-color .12s ease, color .12s ease;
}

    .chat-history-item:hover { background: var(--deia-surface-tint); color: var(--deia-ink); }

    .chat-history-item.active {
        background: var(--deia-primary-ultralight);
        color: var(--deia-primary);
        font-weight: 500;
    }

    /* Il cestino compare solo dove serve: sotto il puntatore o sulla voce aperta. */
    .chat-history-item .rz-button { opacity: 0; transition: opacity .12s ease; }
    .chat-history-item:hover .rz-button,
    .chat-history-item.active .rz-button,
    .chat-history-item .rz-button:focus-visible { opacity: 1; }

.chat-history-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--deia-surface);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2.25rem 2rem 1rem;
}

.chat-thread {
    max-width: var(--deia-reading);
    margin: 0 auto;
}

/* Stato vuoto: il compositore sale al centro, come una ricerca. */
.chat-main.is-empty { justify-content: center; }
.chat-main.is-empty .chat-messages { flex: 0 0 auto; overflow: visible; padding-bottom: 0; }
.chat-main.is-empty .chat-input { border-top: none; padding-top: 1.25rem; padding-bottom: 12vh; }

.chat-empty-title {
    font-family: var(--deia-font-display);
    font-weight: 400;
    font-size: var(--deia-fs-hero);
    line-height: 1.12;
    letter-spacing: -.018em;
    color: var(--deia-ink);
    margin: 0 0 .6rem;
}

.chat-empty-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--deia-text-muted);
    max-width: 60ch;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.chat-suggestion {
    background: var(--deia-surface);
    border: 1px solid var(--deia-border);
    border-radius: 999px;
    padding: .4rem .85rem;
    font: 400 var(--deia-fs-sm) var(--deia-font-sans);
    color: var(--deia-ink);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .chat-suggestion:hover { background: var(--deia-surface-tint); border-color: var(--deia-border-strong); }
    .chat-suggestion:focus-visible { outline: none; box-shadow: var(--deia-ring); }

/* Uno scambio: domanda + risposta. Filetto tra uno scambio e l'altro. */
.chat-exchange {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--deia-border);
}

    .chat-exchange:last-child { border-bottom: none; margin-bottom: 0; }

.chat-question {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--deia-ink);
    margin: 0 0 1rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.chat-answer {
    font-family: var(--deia-font-display);
    font-size: var(--deia-fs-read);
    line-height: 1.65;
    color: var(--deia-ink);
    overflow-wrap: break-word;
}

    .chat-answer > :first-child { margin-top: 0; }
    .chat-answer > :last-child { margin-bottom: 0; }
    .chat-answer p { margin: 0 0 .85em; }
    .chat-answer ul, .chat-answer ol { padding-left: 1.3em; margin: 0 0 .85em; }
    .chat-answer li { margin-bottom: .3em; }
    .chat-answer strong { font-weight: 600; }

    .chat-answer h1, .chat-answer h2, .chat-answer h3, .chat-answer h4 {
        font-size: 1.125rem;
        margin: 1.2em 0 .45em;
    }

    .chat-answer code {
        font-family: var(--deia-font-mono);
        font-size: .82em;
        background: var(--deia-surface-tint);
        padding: .05rem .3rem;
        border-radius: 4px;
    }

    /* Le tabelle nelle risposte sono dati: tornano al sans con cifre tabellari. */
    .chat-answer table {
        border-collapse: collapse;
        width: 100%;
        font-family: var(--deia-font-sans);
        font-size: var(--deia-fs-sm);
        font-variant-numeric: tabular-nums;
        margin: .5rem 0 1rem;
    }

    .chat-answer th, .chat-answer td {
        border-bottom: 1px solid var(--deia-border);
        padding: .4rem .6rem;
        text-align: left;
    }

    .chat-answer th { color: var(--deia-text-muted); font-weight: 600; background: var(--deia-surface-sunken); }

/* Fonti: la bibliografia della risposta. */
.chat-sources {
    margin-top: 1.25rem;
    animation: fxIn .3s ease both;
}

.chat-sources-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--deia-fs-xs);
    font-weight: 600;
    color: var(--deia-text-muted);
    margin-bottom: .45rem;
}

    .chat-sources-label::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--deia-accent);
    }

.chat-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chat-source-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    font-size: var(--deia-fs-sm);
    color: var(--deia-ink);
    background: var(--deia-surface-sunken);
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius-sm);
    padding: .25rem .6rem;
}

    .chat-source-chip .rzi { font-size: 1rem !important; color: var(--deia-primary-light); }

.chat-source-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}

.chat-source-page {
    color: var(--deia-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chat-feedback {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* su mobile l'indicatore di privacy va a capo intero */
    gap: .15rem;
}

.chat-model {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-faint);
    margin-left: .5rem;
}

/* Piano dell'agente (Task 29): dove ha cercato, sopra la risposta. */
.chat-plan {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
}

    .chat-plan .rzi { font-size: 1rem !important; color: var(--deia-primary); align-self: center; }
    .chat-plan b { font-weight: 600; color: var(--deia-ink); }

.chat-sql {
    margin-top: 1rem;
    font-size: var(--deia-fs-sm);
}

    .chat-sql summary {
        cursor: pointer;
        color: var(--deia-primary);
        font-weight: 500;
    }

    .chat-sql .sql-box { margin-top: .4rem; }

/* Piano del Data Agent (fase 5): gli strumenti chiamati, apribile. */
.chat-data-plan { display: block; }

    .chat-data-plan summary {
        display: flex;
        align-items: baseline;
        gap: .4rem;
        cursor: pointer;
        list-style: none;
    }

    .chat-data-plan summary::-webkit-details-marker { display: none; }

.chat-steps {
    margin: .5rem 0 0;
    padding-left: 1.4rem;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
    display: grid;
    gap: .25rem;
}

    .chat-steps code {
        font-family: var(--deia-font-mono);
        color: var(--deia-ink);
    }

    .chat-steps .is-error code { color: var(--deia-danger); }

.chat-step-mode {
    margin: 0 .35rem;
    padding: 0 .4rem;
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius-sm);
}

.chat-step-args { margin-left: .35rem; overflow-wrap: anywhere; }

/* Le righe dei dati restano su una riga: nella colonna di lettura della chat
   andare a capo spezza codici e date ("A-" / "100"). Scorre in orizzontale. */
.deia-data-table .result-table th,
.deia-data-table .result-table td { white-space: nowrap; }

.chat-read-tables summary { color: var(--deia-text-muted); }
.chat-read-tables .deia-chart { margin: .6rem 0; }

.chat-step-error {
    display: block;
    color: var(--deia-danger);
}

.chat-documents {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0;
}

.chat-connector {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
}

    .chat-connector .rzi { font-size: 1rem !important; }

/* Livello di privacy della risposta: un'etichetta quieta, accanto al modello. */
.deia-privacy {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    padding: .05rem .5rem;
    border: 1px solid var(--deia-border);
    border-radius: 999px;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
    white-space: nowrap;
    cursor: help;
}

    .deia-privacy .rzi { font-size: .95rem !important; }
    .deia-privacy.is-local .rzi { color: var(--deia-success); }
    .deia-privacy.is-cloud .rzi { color: var(--deia-primary); }
    .deia-privacy-sep { color: var(--deia-text-faint); }

/* Card di conferma (fase 5): l'unico punto in cui una proposta diventa una modifica.
   Filetto blu a sinistra finché aspetta il click, verde o rosso dopo. */
.deia-confirm {
    margin: 1rem 0;
    padding: .8rem 1rem;
    background: var(--deia-surface);
    border: 1px solid var(--deia-border-strong);
    border-left: 3px solid var(--deia-primary);
    border-radius: var(--deia-radius);
}

    .deia-confirm.is-done { border-left-color: var(--deia-success); background: var(--deia-success-soft); }
    .deia-confirm.is-failed { border-left-color: var(--deia-danger); background: var(--deia-danger-soft); }
    .deia-confirm.is-cancelled { border-left-color: var(--deia-border-strong); color: var(--deia-text-muted); }

.deia-confirm-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

    .deia-confirm-head .rzi { font-size: 1.1rem !important; color: var(--deia-primary); }
    .deia-confirm.is-done .deia-confirm-head .rzi { color: var(--deia-success); }
    .deia-confirm.is-failed .deia-confirm-head .rzi { color: var(--deia-danger); }

.deia-confirm-title {
    font-weight: 600;
    font-size: var(--deia-fs-base);
    color: var(--deia-ink);
}

.deia-confirm-tool {
    font-family: var(--deia-font-mono);
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-faint);
}

.deia-confirm-preview {
    margin: .5rem 0 .75rem;
    font-size: var(--deia-fs-base);
    color: var(--deia-ink);
}

.deia-confirm-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.deia-confirm-expiry {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

.deia-confirm-message {
    margin: 0;
    font-size: var(--deia-fs-sm);
}

/* Intestazioni ordinabili delle tabelle del Data Agent */
.deia-sort {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    cursor: pointer;
}

    .deia-sort:focus-visible { box-shadow: var(--deia-ring); border-radius: 4px; }
    .deia-sort .rzi { font-size: .9rem !important; }

/* In attesa della risposta */
.chat-waiting {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
}

.chat-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--deia-accent);
    animation: fxTyping 1.2s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes fxTyping {
    0%, 60%, 100% { opacity: .3; }
    30% { opacity: 1; }
}

/* Compositore: un unico riquadro con campo, modalità, filtro e invio. */
.chat-input {
    padding: .75rem 2rem 1.25rem;
    background: var(--deia-surface);
    border-top: 1px solid var(--deia-border);
}

.chat-input-inner {
    max-width: var(--deia-reading);
    margin: 0 auto;
}

.chat-composer {
    border: 1px solid var(--deia-border-strong);
    border-radius: var(--deia-radius-lg);
    background: var(--deia-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .chat-composer:focus-within {
        border-color: var(--deia-primary);
        box-shadow: var(--deia-ring);
    }

.chat-textarea {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    max-height: 40vh;
    padding: .85rem 1rem .4rem;
    border: none;
    outline: none;
    background: transparent;
    resize: none !important;
    font-family: var(--deia-font-sans);
    font-size: .9875rem;
    line-height: 1.5;
    color: var(--deia-ink);
    border-radius: var(--deia-radius-lg) var(--deia-radius-lg) 0 0;
}

    .chat-textarea::placeholder { color: var(--deia-text-faint); }

.chat-composer-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .4rem .5rem .5rem .6rem;
}

.chat-composer-hint {
    margin-left: auto;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-faint);
    white-space: nowrap;
}

.chat-send {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--deia-radius-sm);
    background: var(--deia-primary);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, transform .08s ease;
}

    .chat-send:not(:disabled):hover { background: var(--deia-primary-dark); }
    .chat-send:not(:disabled):active { transform: scale(.96); }
    .chat-send:focus-visible { outline: none; box-shadow: var(--deia-ring); }
    .chat-send:disabled { background: var(--deia-border-strong); cursor: not-allowed; }
    .chat-send .rzi { font-size: 1.2rem; }

/* Selettore a segmenti (modalità documenti / agente). */
.deia-seg {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--deia-radius-sm);
    background: var(--deia-surface-tint);
}

.deia-seg button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: none;
    background: transparent;
    padding: .3rem .65rem;
    border-radius: 5px;
    font: 500 var(--deia-fs-sm) var(--deia-font-sans);
    color: var(--deia-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

    .deia-seg button .rzi { font-size: 1rem; }
    .deia-seg button:hover:not(:disabled) { color: var(--deia-ink); }
    .deia-seg button:focus-visible { outline: none; box-shadow: var(--deia-ring); }
    .deia-seg button:disabled { cursor: not-allowed; opacity: .6; }

    .deia-seg button[aria-pressed="true"] {
        background: var(--deia-surface);
        color: var(--deia-primary);
        box-shadow: var(--deia-shadow-sm);
    }

/* Il filtro documenti nel compositore è compatto e senza bordo proprio. */
.chat-doc-filter.rz-dropdown {
    border-color: transparent !important;
    background: transparent !important;
    min-width: 12rem;
    max-width: 18rem;
    font-size: var(--deia-fs-sm);
}

    .chat-doc-filter.rz-dropdown:hover { background: var(--deia-surface-tint) !important; }

.chat-mode-hint {
    margin: .55rem .25rem 0;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

@media (max-width: 767px) {
    .chat-history { display: none; }
    .chat-messages { padding: 1.25rem 1rem .5rem; }
    .chat-input { padding: .6rem .75rem .9rem; }
    .chat-empty-title { font-size: 1.75rem; }
    .chat-question { font-size: 1.2rem; }
    .chat-composer-hint { display: none; }
    /* il filtro va su una riga sua, sotto modalità e invio */
    .chat-composer-bar .deia-seg { flex: 1; }
    .chat-composer-bar .deia-seg button { flex: 1; justify-content: center; }
    .chat-doc-filter.rz-dropdown { order: 3; flex: 1 1 100%; max-width: none; }
}

/* 8.2 Query DB ----------------------------------------------------------- */
.sql-box {
    background: var(--deia-ink);
    color: #DCE6F1;
    border-radius: var(--deia-radius-sm);
    padding: .75rem .95rem;
    font-family: var(--deia-font-mono);
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 0;
    overflow-x: auto;
}

.result-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--deia-fs-sm);
    font-variant-numeric: tabular-nums;
}

    .result-table th, .result-table td {
        border-bottom: 1px solid var(--deia-border);
        padding: .45rem .7rem;
        text-align: left;
    }

    .result-table th {
        background: var(--deia-surface-sunken);
        color: var(--deia-text-muted);
        font-weight: 600;
        position: sticky;
        top: 0;
    }

    .result-table tbody tr:hover { background: var(--deia-surface-sunken); }
    .result-table .num { text-align: right; }

/* 8.2c Grafici del Data Agent (fase 4) ------------------------------------ */
/* Un contenitore quieto come le card: filetto, niente ombra; il colore sta
   solo nei segni del grafico, il testo resta inchiostro. */
.deia-chart {
    margin: 1rem 0;
    padding: .9rem 1rem .6rem;
    background: var(--deia-surface);
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius);
}

.deia-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .4rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

.deia-chart-heading {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 16rem;
    min-width: 0;
}

/* I pulsanti restano insieme: se lo spazio manca vanno sotto il titolo in blocco. */
.deia-chart-actions {
    display: flex;
    gap: .15rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.deia-chart-title {
    font-family: var(--deia-font-sans);
    font-weight: 600;
    font-size: var(--deia-fs-base);
    color: var(--deia-ink);
}

.deia-chart-meta {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

.deia-chart-plot { width: 100%; }

.deia-chart-table-wrap { overflow-x: auto; }

.deia-chart-note {
    margin: .4rem 0 0;
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

/* 8.2a Query builder a blocchi -------------------------------------------- */
/* Si legge come una frase: "Tabella … Mostra … Dove … Ordina per …". */
.deia-block-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;      /* i blocchi vanno a capo invece di comprimersi */
    margin-bottom: .55rem;
}

.deia-block-label {
    font-size: var(--deia-fs-sm);
    font-weight: 600;
    color: var(--deia-ink);
    min-width: 6.5rem;    /* le etichette incolonnate rendono leggibile la sequenza */
}

.deia-block-hint {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
}

/* 8.2b Query salvate ------------------------------------------------------ */
.deia-saved-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--deia-border);
    border-radius: var(--deia-radius-sm);
    overflow: hidden;
}

.deia-saved-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .5rem;
    background: var(--deia-surface);
    border-bottom: 1px solid var(--deia-border);
}

    .deia-saved-item:last-child { border-bottom: none; }
    .deia-saved-item:hover { background: var(--deia-surface-sunken); }

.deia-saved-text {
    display: flex;
    flex-direction: column;
    min-width: 0;      /* senza, il testo lungo sfonda la riga invece di troncarsi */
    flex: 1;
}

.deia-saved-name {
    font-weight: 600;
    font-size: var(--deia-fs-base);
}

.deia-saved-question,
.deia-saved-meta {
    font-size: var(--deia-fs-xs);
    color: var(--deia-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deia-saved-meta { flex: 0 0 auto; }

/* Sotto i 900px la riga diventa stretta: la data sparisce prima del nome. */
@media (max-width: 900px) {
    .deia-saved-meta { display: none; }
}

/* 8.3 Dropzone (drag & drop documenti — Task 26) ------------------------- */
.deia-dropzone {
    position: relative;
    border: 1.5px dashed var(--deia-border-strong);
    border-radius: var(--deia-radius);
    background: var(--deia-surface-sunken);
    padding: 1.6rem 1rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}

    .deia-dropzone:hover { border-color: var(--deia-text-faint); }

    .deia-dropzone.is-over {
        border-color: var(--deia-accent);
        border-style: solid;
        background: var(--deia-accent-soft);
    }

.deia-dropzone-icon {
    font-size: 1.75rem !important;
    color: var(--deia-primary);
}

.deia-dropzone-title {
    font-family: var(--deia-font-display);
    font-weight: 600;
    font-size: var(--deia-fs-h3);
    color: var(--deia-ink);
    margin-top: .35rem;
}

.deia-dropzone-hint {
    font-size: var(--deia-fs-sm);
    color: var(--deia-text-muted);
    margin-top: .15rem;
}

.deia-dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Coda di caricamento sotto la dropzone */
.deia-queue {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--deia-border);
}

.deia-queue-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--deia-fs-sm);
    padding: .2rem 0;
}

.deia-queue-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deia-queue-msg { color: var(--deia-text-muted); }

/* 8.4 Board dei permessi (Task 27) -------------------------------------- */
.deia-board {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991px) {
    .deia-board { grid-template-columns: 1fr; }
}

/* Chip trascinabile: un utente o un gruppo. */
.deia-subject {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    margin: .2rem .2rem 0 0;
    border-radius: 999px;
    border: 1px solid var(--deia-border-strong);
    background: var(--deia-surface);
    font-size: var(--deia-fs-sm);
    cursor: grab;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease;
}

    .deia-subject:hover {
        border-color: var(--deia-primary-light);
        background: var(--deia-surface-sunken);
    }

    .deia-subject:active { cursor: grabbing; }

    .deia-subject.is-group {
        background: var(--deia-primary-ultralight);
        border-color: transparent;
        color: var(--deia-primary);
        font-weight: 600;
    }

    .deia-subject.is-dragging { opacity: .45; }

/* Zona di rilascio: un ambito riservato. */
.deia-scope {
    border: 1.5px dashed var(--deia-border-strong);
    border-radius: var(--deia-radius);
    background: var(--deia-surface);
    padding: .8rem 1rem;
    margin-bottom: .75rem;
    transition: border-color .15s ease, background-color .15s ease;
}

    .deia-scope.is-over {
        border-color: var(--deia-accent);
        border-style: solid;
        background: var(--deia-accent-soft);
    }

.deia-scope-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .45rem;
    font-weight: 600;
    font-size: var(--deia-fs-base);
    color: var(--deia-ink);
}

.deia-scope-empty {
    font-size: var(--deia-fs-sm);
    color: var(--deia-danger);
}

/* Chip di un permesso già assegnato (con la X per revocarlo). */
.deia-granted {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .25rem .15rem .6rem;
    margin: .2rem .2rem 0 0;
    border-radius: 999px;
    background: var(--deia-success-soft);
    color: var(--deia-success);
    font-size: var(--deia-fs-xs);
    font-weight: 600;
}

    .deia-granted button {
        border: none;
        background: transparent;
        color: inherit;
        cursor: pointer;
        line-height: 1;
        padding: 0 .2rem;
        font-size: .9rem;
        opacity: .7;
        border-radius: 50%;
    }

    .deia-granted button:hover { opacity: 1; color: var(--deia-danger); }
    .deia-granted button:focus-visible { outline: none; box-shadow: var(--deia-ring); opacity: 1; }

/* 8.5 Riordino per trascinamento (Task 26) ------------------------------- */
.deia-drag-handle {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: var(--deia-text-faint);
    padding: .2rem;
    border-radius: var(--deia-radius-sm);
}

    .deia-drag-handle:hover {
        color: var(--deia-primary);
        background: var(--deia-surface-tint);
    }

    .deia-drag-handle:active { cursor: grabbing; }

/* Riga sotto il puntatore durante il trascinamento: si vede DOVE si lascerà. */
.deia-reorder-target {
    box-shadow: 0 -2px 0 var(--deia-accent) !important;
}

/* Errore Blazor: coerente col brand */
.blazor-error-boundary {
    background: var(--deia-danger-soft);
    border: 1px solid var(--deia-danger);
    padding: 1rem;
    color: var(--deia-danger);
    border-radius: var(--deia-radius-sm);
}

    .blazor-error-boundary::after { content: "Si è verificato un errore."; }

h1:focus { outline: none; }