/* ── Standard globali UX/UI Joorna (regola permanente, vedi CLAUDE.md) ──
 * Un solo punto per le misure dei componenti equivalenti: KPI, checklist dei
 * filtri e del selettore colonne, testo troncato nelle celle. Si registra
 * dopo i fogli di sezione (JoornaTheme) e prima di joorna-refine.css:
 * cambiare lo standard = cambiare i token qui sotto. */

:root {
    /* KPI (disegno della Panoramica, 1-ott): tessere basse e distinte —
     * icona tinta a sinistra, etichetta sopra, valore e nota sulla stessa riga. */
    --jo-kpi-pad: 10px 14px;
    --jo-kpi-pad-x: 14px;
    --jo-kpi-gap: 10px;
    --jo-kpi-icon: 30px;
    --jo-kpi-icon-svg: 16px;
    --jo-kpi-label: 12px;
    --jo-kpi-value: 1.125rem;
    --jo-kpi-note: 12px;
    /* Tessere KPI alte uguali in ogni pagina, con o senza nota. */
    --jo-kpi-min-h: 60px;

    /* Checklist (filtri di colonna, selettore colonne): controllo rotondo. */
    --jo-check-size: 15px;
    --jo-check-border: color-mix(in srgb, var(--jo-ui-muted) 55%, transparent);
}

/* ── KPI ─────────────────────────────────────────────────────
 * Stesso disegno per i .jo-kpi dei blade e per gli StatsOverviewWidget
 * (testata o dentro la pagina): niente altezza minima, padding ridotto,
 * valore leggibile ma non enorme, nota su una riga. */

.jo-kpis {
    gap: var(--jo-kpi-gap) !important;
}

.jo-kpi,
.fi-wi-stats-overview-stat {
    min-height: var(--jo-kpi-min-h) !important;
    padding: var(--jo-kpi-pad) !important;
}

.jo-kpi-top {
    gap: 6px;
}

.jo-kpi-ic {
    flex-basis: var(--jo-kpi-icon) !important;
    width: var(--jo-kpi-icon) !important;
    height: var(--jo-kpi-icon) !important;
    border-radius: 7px !important;
}

.jo-kpi-ic svg {
    width: var(--jo-kpi-icon-svg) !important;
    height: var(--jo-kpi-icon-svg) !important;
}

.jo-kpi-lbl,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font-size: var(--jo-kpi-label) !important;
    line-height: 1.35 !important;
}

.jo-kpi-val,
.jo-an-kpis .jo-kpi-val,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    margin-top: 4px !important;
    font-size: var(--jo-kpi-value) !important;
    line-height: 1.25 !important;
}

.jo-kpi-note,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    margin-top: 1px !important;
    font-size: var(--jo-kpi-note) !important;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La nota resta dentro la tessera: i figli di grid/flex hanno min-width
 * auto e una nota lunga ("dalla richiesta al primo preventivo inviato…")
 * usciva dal bordo invece di chiudersi coi puntini (testo intero nel
 * tooltip, ui-standard.js). */
.jo-kpi,
.jo-kpi > *,
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat > .grid,
.fi-wi-stats-overview-stat > .grid > *,
.fi-wi-stats-overview-stat-description {
    min-width: 0;
}

.fi-wi-stats-overview-stat-description-icon {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
}

/* Analytics: le etichette su due righe non tengono più una riga vuota. */
.jo-an-kpis .jo-kpi-lbl {
    min-height: 0 !important;
}

.fi-wi-stats-overview-stat > .grid {
    gap: 4px !important;
}

.fi-wi-stats-overview-stat-icon {
    box-sizing: content-box !important;
    width: var(--jo-kpi-icon-svg) !important;
    height: var(--jo-kpi-icon-svg) !important;
    padding: 4.5px !important;
    border-radius: 7px !important;
}

/* Il mini-grafico dei widget KPI: una traccia bassa sul fondo, non un blocco. */
.fi-wi-stats-overview-stat-chart {
    height: 18px !important;
    opacity: .6;
}

.fi-wi-stats-overview-stat-chart > canvas {
    height: 18px !important;
}

/* ── KPI: una riga per tessera (disegno della Panoramica) ─────
 * Stesso markup di sempre (.jo-kpi-top con icona ed etichetta, .jo-kpi-val,
 * .jo-kpi-note) e stessi widget di Filament: l'icona esce a sinistra
 * centrata, l'etichetta sta sopra, valore e note seguono sulla riga sotto
 * (testo lungo → puntini, intero nel tooltip). Niente da fare nei blade. */

.jo-kpi,
.fi-wi-stats-overview-stat > .grid {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: baseline !important;
    align-content: center;
    column-gap: 6px !important;
    row-gap: 1px !important;
}

.jo-kpi,
.fi-wi-stats-overview-stat {
    position: relative;
}

.fi-wi-stats-overview-stat {
    display: flex;
    align-items: center;
}

.fi-wi-stats-overview-stat > .grid { flex: 1 1 auto; min-width: 0; }

/* La riga dei widget KPI è alta quanto le tessere: senza, la griglia la
 * misurava sul contenuto tutto a capo (etichetta, valore e nota su tre righe). */
.fi-wi-stats-overview-stats-ctn { grid-auto-rows: minmax(var(--jo-kpi-min-h), max-content); }
.fi-wi-stats-overview-stat > .grid { width: 100%; }

.jo-kpi:has(> .jo-kpi-top > .jo-kpi-ic),
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-icon) {
    padding-left: calc(var(--jo-kpi-pad-x) + var(--jo-kpi-icon) + var(--jo-kpi-gap)) !important;
}

.jo-kpi > .jo-kpi-top,
.fi-wi-stats-overview-stat > .grid > :first-child {
    flex: 0 0 100%;
    min-width: 0;
}

.jo-kpi > .jo-kpi-top > .jo-kpi-ic,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    position: absolute;
    top: 50%;
    left: var(--jo-kpi-pad-x);
    margin: 0 !important;
    transform: translateY(-50%);
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    padding: calc((var(--jo-kpi-icon) - var(--jo-kpi-icon-svg)) / 2) !important;
}

.jo-kpi-val,
.jo-an-kpis .jo-kpi-val,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    flex: 0 0 auto;
    margin-top: 0 !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.jo-kpi > .jo-kpi-note,
.fi-wi-stats-overview-stat > .grid > :nth-child(n + 3) {
    /* Accanto al valore (testo lungo → puntini); a capo sotto solo se lo
     * spazio rimasto è meno di 88px (tessere strette). */
    flex: 1 1 0;
    min-width: min(100%, 88px);
    max-width: 100%;
    margin-top: 0 !important;
}

/* Quattro KPI su una riga da tablet largo in su (Panoramica). */
@media (min-width: 900px) {
    .jo-kpis.jo-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Checklist: un solo controllo, rotondo ───────────────────
 * Filtri di colonna (scelta multipla e singola), selettore colonne e
 * checklist dei pannelli filtro: stesso cerchio, spunta bianca su viola. */

.jo-colf-option input[type='checkbox'],
.jo-colf-option input[type='radio'],
.fi-ta-col-toggle input[type='checkbox'],
.fi-ta-filters input[type='checkbox'],
.jo-check {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 var(--jo-check-size);
    width: var(--jo-check-size) !important;
    height: var(--jo-check-size) !important;
    margin: 0;
    border: 1.5px solid var(--jo-check-border) !important;
    border-radius: 999px !important;
    background: var(--jo-ui-surface) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

.jo-colf-option input:hover,
.fi-ta-col-toggle input[type='checkbox']:hover,
.fi-ta-filters input[type='checkbox']:hover {
    border-color: var(--jo-ui-accent) !important;
}

.jo-colf-option input[type='checkbox']:checked,
.fi-ta-col-toggle input[type='checkbox']:checked,
.fi-ta-filters input[type='checkbox']:checked,
.jo-check:checked {
    border-color: var(--jo-ui-accent) !important;
    background: var(--jo-ui-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 11px no-repeat !important;
}

/* Scelta singola: il cerchio pieno con un punto chiaro al centro. */
.jo-colf-option input[type='radio']:checked {
    border-color: var(--jo-ui-accent) !important;
    background: var(--jo-ui-accent) !important;
    box-shadow: inset 0 0 0 3px var(--jo-ui-surface) !important;
}

.jo-colf-option input:focus-visible,
.fi-ta-col-toggle input[type='checkbox']:focus-visible,
.jo-check:focus-visible {
    outline: 2px solid var(--jo-ui-accent-soft);
    outline-offset: 1px;
}

/* ── Celle: testo troncato leggibile ─────────────────────────
 * Con le colonne ristrette il testo va a puntini; il tooltip con il testo
 * intero lo mette public/js/ui-standard.js. */
.fi-ta-cell .fi-ta-text-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Header operativo della tabella ──────────────────────────
 * Una sola barra per tabella, stesso schema ovunque:
 *   SINISTRA  CTA di creazione (label) · Import · Export (icona + tooltip)
 *             · azioni secondarie; le azioni massive quando c'è selezione
 *   DESTRA    filtri di stato (tab di getTabs, .jo-ta-status) · Cerca ·
 *             Lista/Card o Lista/Kanban · Azzera filtri · Colonne
 * Barra bassa (py 10px), controlli alti 34px; su schermi stretti va a capo
 * invece di comprimersi. */
.fi-ta-header-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px !important;
}

.fi-ta-header-toolbar > .ms-auto {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
    margin-inline-start: auto !important;
    column-gap: 10px !important;
}

.fi-ta-header-toolbar > .ms-auto > .fi-ta-search-field {
    order: -1;
}

.jo-ta-status {
    order: -2;
    flex: 0 1 auto;
}

/* Il contenitore vuoto delle azioni massive non deve lasciare un buco. */
.fi-ta-header-toolbar > .shrink-0:empty {
    display: none;
}

.jo-ta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.jo-ta-actions .fi-ac {
    flex-wrap: wrap;
    gap: 8px;
}

/* Schermi stretti: le azioni vanno a capo dentro la barra, mai fuori. */
@media (max-width: 640px) {
    .jo-ta-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Le etichette non vanno a capo dentro il pulsante: va a capo il gruppo. */
    .jo-ta-actions .fi-btn-label {
        white-space: nowrap;
    }
}

/* Nella barra le azioni della pagina hanno l'altezza dei controlli della
   tabella (ricerca, switch, imbuto: 36px), e la barra è alta uguale ovunque. */
.jo-ta-actions .fi-btn {
    min-height: 36px;
}

/* Le icone di Filament hanno un margine negativo (-m-1.5): in barra la prima
   partiva 8px più a sinistra delle altre barre. */
.jo-ta-actions .fi-icon-btn {
    margin: 0 !important;
}

.fi-ta-header-toolbar {
    min-height: 56px;
}

/* ── CTA di creazione: minimal, in alto a sinistra nella barra ──
 * "+ Nuovo ospite" non è un pulsante pieno: tessera "+" tratteggiata e label
 * viola, senza fondo; al passaggio la tessera si riempie. È la stessa azione
 * Filament (TableStandard::isCreateCta, .jo-cta-src in <x-jo.bar-actions>):
 * modale, link e permessi non cambiano. Tasto N: public/js/data-table.js. */
.jo-cta-src .fi-btn {
    gap: 9px !important;
    min-height: 36px;
    padding: 0 10px 0 4px !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--jo-ui-accent) !important;
    font-size: 13.5px;
    font-weight: 600;
}

.jo-cta-src .fi-btn:hover,
.jo-cta-src .fi-btn:focus-visible {
    background: var(--jo-ui-accent-soft) !important;
}

.jo-cta-src .fi-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--jo-ui-accent) !important;
}

.jo-cta-src .fi-btn .fi-btn-label {
    color: inherit !important;
    white-space: nowrap;
}

.jo-cta-src .fi-btn .fi-btn-icon {
    box-sizing: border-box;
    width: 24px !important;
    height: 24px !important;
    padding: 3px;
    border: 1.5px dashed color-mix(in srgb, var(--jo-ui-accent) 55%, transparent);
    border-radius: 8px;
    color: var(--jo-ui-accent) !important;
    transition: background .12s, border-color .12s, color .12s;
}

.jo-cta-src .fi-btn:hover .fi-btn-icon,
.jo-cta-src .fi-btn:focus-visible .fi-btn-icon {
    border-style: solid;
    border-color: var(--jo-ui-accent);
    background: var(--jo-ui-accent);
    color: #fff !important;
}

/* ── Icone come dato: icona + testo, sempre ──────────────────
 * Colonne icona (override icon-column) e badge con icona: il simbolo aiuta
 * a scorrere, il testo dice cosa significa. Stessa misura ovunque. */
.jo-data-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--jo-ui-ink);
}

.jo-data-icon .fi-ta-icon-item {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* ── Grafici: card alte quanto il loro contenuto ─────────────
 * In una riga di grafici ogni card segue il suo grafico (proporzionato ai
 * dati, x-analytics.chart): niente card stirate sulla più alta con un
 * grande vuoto sotto un grafico piccolo. */
.jo-an-body--summary,
.jo-an-grid {
    align-items: start;
}

/* "Altre azioni" dell'header operativo: un sottomenu già esistente (es.
 * "Pronti all'uso") si legge come le altre voci, non come un pulsante. */
.jo-ta-actions .fi-dropdown-panel .fi-dropdown-trigger .fi-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 8px;
    border: 0;
    box-shadow: none;
    background: transparent;
    font-weight: 400;
    color: inherit;
}

.jo-ta-actions .fi-dropdown-panel .fi-dropdown-trigger .fi-btn:hover {
    background: var(--jo-ui-soft);
}

.jo-ta-actions .fi-dropdown-panel .fi-dropdown-trigger .fi-btn .fi-btn-icon {
    width: 16px;
    height: 16px;
    color: var(--jo-ui-muted);
}

/* ── Tabelle essenziali: i comandi compaiono quando servono ──
 * Stesse funzioni, meno rumore. Su schermi touch (senza hover) tutto resta
 * visibile.
 *  - intestazioni: imbuto del filtro e freccia dell'ordinamento solo al
 *    passaggio sulla colonna, o sempre se il filtro/l'ordinamento è attivo;
 *  - barra: "Azzera filtri" solo con filtri o ricerca attivi, "Ripristina
 *    colonne" solo con una disposizione personalizzata (columns-reset);
 *  - righe: la casella di selezione al passaggio sulla riga o quando c'è
 *    una selezione ("Seleziona tutto" nell'intestazione resta sempre). */
@media (hover: hover) {
    .fi-ta-header-cell .jo-colf-btn:not(.is-active),
    .fi-ta-header-cell .fi-ta-header-cell-sort-icon.text-gray-400 {
        opacity: 0 !important;
        transition: opacity .12s;
    }

    .fi-ta-header-cell:hover .jo-colf-btn,
    .fi-ta-header-cell:focus-within .jo-colf-btn,
    .fi-ta-header-cell:hover .fi-ta-header-cell-sort-icon,
    .fi-ta-header-cell:focus-within .fi-ta-header-cell-sort-icon {
        opacity: 1 !important;
    }

    .fi-ta-row .fi-ta-record-checkbox:not(:checked) {
        opacity: 0;
        transition: opacity .12s;
    }

    .fi-ta-row:hover .fi-ta-record-checkbox,
    .fi-ta-record-checkbox:focus-visible,
    .fi-ta:has(.fi-ta-record-checkbox:checked) .fi-ta-record-checkbox {
        opacity: 1;
    }
}

/* Colonne allineate a destra (importi, numeri): imbuto e freccia prima
 * della label, così la label sta sopra i valori anche quando le icone sono
 * nascoste (prima "Importo" restava spostato di due icone a sinistra). */
.fi-ta-header-cell > .justify-end {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.fi-ta-header-cell > .justify-end .jo-colh {
    flex-direction: row-reverse;
}

.jo-filters-reset:disabled {
    display: none !important;
}

/* Vista Card (contentGrid o card su misura: segnale data-jo-grid dalla
   barra; Card generica: .jo-ta-cards): la scelta delle colonne non ha
   senso, le card non hanno colonne. */
.fi-ta:has([data-jo-grid]) .fi-ta-col-toggle,
.fi-ta:has([data-jo-grid]) .jo-cols-reset,
.jo-ta-cards .fi-ta-col-toggle,
.jo-ta-cards .jo-cols-reset {
    display: none !important;
}

/* …né la riga "Ordina per" che Filament mette sopra le card: l'ordinamento
   sta sulle intestazioni della Lista, come i filtri di colonna. */
.fi-ta:has([data-jo-grid]) .fi-ta-content > .bg-gray-50:has(select),
.jo-ta-cards .fi-ta-content > .bg-gray-50:has(select) {
    display: none !important;
}

/* Inbox: KPI in una riga (etichetta a sinistra, numero a destra), compatti
   di proposito sopra la casella: niente altezza minima delle tessere. */
.jo-ibx-kpis .jo-kpi {
    min-height: 0 !important;
}

/* ── AI, un'opzione delicata (owner 7-ott-2026: "un piccolo pulsante, una
 * possibilità accanto ai campi", non un riquadro): niente bordo né fondo
 * pieno, scintille piccole e testo lilla 13px; al passaggio sottolineato e
 * un fondo appena accennato. Vale per "Crea con AI" nelle barre delle liste,
 * "Imposta con AI" accanto ai titoli e ogni .jo-ai-action. ── */
html .fi-btn.jo-ai-action,
html .fi-link.jo-ai-action {
    min-height: 0 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ds-accent-fg, #6A4BB5) !important;
}

html .fi-btn.jo-ai-action:hover,
html .fi-btn.jo-ai-action:focus-visible,
html .fi-link.jo-ai-action:hover {
    background: var(--ds-accent-soft, #F3EEFC) !important;
}

html .fi-link.jo-ai-action .fi-link-icon { width: 14px !important; height: 14px !important; color: var(--ds-accent-fg, #6A4BB5) !important; }
html .fi-link.jo-ai-action { color: var(--ds-accent-fg, #6A4BB5) !important; font-size: 13px !important; }
html .fi-link.jo-ai-action:hover,
html .fi-btn.jo-ai-action:hover .fi-btn-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html .fi-btn.jo-ai-action .fi-btn-icon {
    width: 14px !important;
    height: 14px !important;
}

html .fi-btn.jo-ai-action .fi-btn-icon,
html .fi-btn.jo-ai-action .fi-btn-label {
    font-size: 13px !important;
    color: var(--ds-accent-fg, #6A4BB5) !important;
}

/* KPI: tessera icona colorata per SIGNIFICATO, non per posizione (owner
 * 7-ott-2026). Il tono viene dal concetto dell'icona (App\Filament\Support\
 * ConceptIcons): .jo-kpi-ic.jo-tone-* nei blade, data-jo-tone sugli Stat di
 * Filament (override stats-overview-widget/stat). Token --ds-tone-* in
 * joorna-tokens.css: lilla persone · blu email · verde WhatsApp · viola-blu
 * chatbot/AI · lime soldi e conversioni · arancio da fare · grigio il resto.
 * Più specifiche del grigio dato alle icone di Filament (design-system.css). */
html .fi-main .fi-wi-stats-overview-stats-ctn .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon,
html .jo-kpi-ic.jo-tone-neutral {
    background: var(--ds-tone-neutral-bg) !important;
    color: var(--ds-tone-neutral-fg) !important;
}

html .jo-kpi-ic.jo-tone-people,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='people'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-people-bg) !important;
    color: var(--ds-tone-people-fg) !important;
}

html .jo-kpi-ic.jo-tone-email,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='email'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-email-bg) !important;
    color: var(--ds-tone-email-fg) !important;
}

html .jo-kpi-ic.jo-tone-whatsapp,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='whatsapp'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-whatsapp-bg) !important;
    color: var(--ds-tone-whatsapp-fg) !important;
}

html .jo-kpi-ic.jo-tone-ai,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='ai'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-ai-bg) !important;
    color: var(--ds-tone-ai-fg) !important;
}

html .jo-kpi-ic.jo-tone-money,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='money'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-money-bg) !important;
    color: var(--ds-tone-money-fg) !important;
}

html .jo-kpi-ic.jo-tone-todo,
html .fi-main .fi-wi-stats-overview-stat[data-jo-tone='todo'] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-todo-bg) !important;
    color: var(--ds-tone-todo-fg) !important;
}

/* Variazioni nei KPI (▲29% vs prima): verde se l'andamento è buono, rosso
 * se peggiora, col senso del dato (ConceptIcons::deltaClass). Negli Stat di
 * Filament la descrizione è colorata solo se è una variazione (data-jo-trend
 * dall'override della vista), altrimenti resta testo neutro. */
.jo-delta { font-weight: 600; }
.jo-delta--good { color: var(--ds-ok-fg) !important; }
.jo-delta--bad { color: var(--ds-err-fg) !important; }

html .fi-wi-stats-overview-stat:not([data-jo-trend]) .fi-wi-stats-overview-stat-description,
html .fi-wi-stats-overview-stat:not([data-jo-trend]) .fi-wi-stats-overview-stat-description-icon,
html .fi-wi-stats-overview-stat[data-jo-trend='flat'] .fi-wi-stats-overview-stat-description,
html .fi-wi-stats-overview-stat[data-jo-trend='flat'] .fi-wi-stats-overview-stat-description-icon {
    color: var(--ds-text-tertiary) !important;
}

html .fi-wi-stats-overview-stat[data-jo-trend='good'] .fi-wi-stats-overview-stat-description,
html .fi-wi-stats-overview-stat[data-jo-trend='good'] .fi-wi-stats-overview-stat-description-icon {
    color: var(--ds-ok-fg) !important;
}

html .fi-wi-stats-overview-stat[data-jo-trend='bad'] .fi-wi-stats-overview-stat-description,
html .fi-wi-stats-overview-stat[data-jo-trend='bad'] .fi-wi-stats-overview-stat-description-icon {
    color: var(--ds-err-fg) !important;
}

html .fi-wi-stats-overview-stat[data-jo-trend='warn'] .fi-wi-stats-overview-stat-description,
html .fi-wi-stats-overview-stat[data-jo-trend='warn'] .fi-wi-stats-overview-stat-description-icon {
    color: var(--ds-warn-fg) !important;
}

/* Canali coi colori del marchio ovunque compaia un canale (tabelle, schede,
 * campagne, automazioni): stessa icona dell'Inbox e stesso colore
 * (ConceptIcons::channelAttr → data-jo-channel). Le altre icone di dato
 * (sorgente, sync, booleani) restano grigie tenui. */
html [data-jo-channel='email'] { --jo-channel-color: var(--ds-brand-email); }
html [data-jo-channel='whatsapp'] { --jo-channel-color: var(--ds-brand-whatsapp); }
html [data-jo-channel='messenger'] { --jo-channel-color: var(--ds-brand-messenger); }
html [data-jo-channel='instagram'] { --jo-channel-color: var(--ds-brand-instagram); }
html [data-jo-channel='chatbot'] { --jo-channel-color: var(--ds-tone-ai-fg); }

html [data-jo-channel] svg,
html [data-jo-channel] .fi-ta-icon-item {
    color: var(--jo-channel-color) !important;
}

/* Azione secondaria ripetuta (es. "Richiedi attivazione" per ogni modulo):
 * lilla tenue con testo viola, come "Usa modello"; il viola pieno resta
 * alla sola CTA principale della pagina. */
html .fi-btn.jo-btn-soft {
    border: 1px solid var(--ds-auto-bd, #DED2F5) !important;
    background: var(--ds-accent-soft, #F3EEFC) !important;
    color: var(--ds-accent-fg, #5F45A8) !important;
    box-shadow: none !important;
}

html .fi-btn.jo-btn-soft:hover {
    background: var(--ds-accent-soft-hover, #EEE7FB) !important;
}

html .fi-btn.jo-btn-soft .fi-btn-label {
    color: inherit !important;
}

/* ── Tabelle collegate vuote (pannelli in fondo ai dettagli: audience,
   soggiorni, invii…): una riga compatta icona · titolo · spiegazione invece
   di un riquadro alto, e senza la barra se c'è solo la scelta colonne. ── */
.fi-resource-relation-manager .fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-header-toolbar:not(:has(.fi-btn, .fi-ta-search-field)) {
    display: none;
}

.fi-resource-relation-manager .fi-ta-empty-state {
    padding: 14px 20px !important;
}

.fi-resource-relation-manager .fi-ta-empty-state-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    max-width: none;
    margin: 0;
    text-align: left;
}

.fi-resource-relation-manager .fi-ta-empty-state-icon-ctn {
    grid-row: span 2;
    margin: 0 !important;
    padding: 8px;
}

.fi-resource-relation-manager .fi-ta-empty-state-icon-ctn svg {
    width: 18px;
    height: 18px;
}

.fi-resource-relation-manager .fi-ta-empty-state-heading,
.fi-resource-relation-manager .fi-ta-empty-state-description {
    justify-self: start;
    max-width: none;
    text-align: left !important;
}

.fi-resource-relation-manager .fi-ta-empty-state-heading {
    grid-column: 2;
    margin: 0 !important;
    font-size: 13.5px;
}

.fi-resource-relation-manager .fi-ta-empty-state-description {
    grid-column: 2;
    margin: 2px 0 0 !important;
    font-size: 12.5px;
}

.fi-resource-relation-manager .fi-ta-empty-state-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0 !important;
}

/* ── "Indietro" in topbar (filament.topbar.back-link): sempre in vista sulle
   pagine record, a sinistra della ricerca. Discreto: freccia + nome della
   lista a cui torna, al passaggio un fondo tenue. ── */
/* "Indietro" minimal (owner 5-ott-2026, tutta la piattaforma): solo la
   freccia, senza bordo né etichetta; la pagina di ritorno sta nel tooltip
   ("Torna a Preventivatore"). Stesso disegno per .jo-backlink. */
.jo-topbar-back,
.jo-backlink {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-inline-end: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-control, 8px);
    background: transparent;
    color: var(--ds-text-tertiary, #5B5B6B);
    transition: background-color .12s ease, color .12s ease;
}

.jo-topbar-back:hover,
.jo-backlink:hover {
    background: var(--ds-surface-hover, #F1F2F5);
    color: var(--ds-text-primary, #18181B);
}

.jo-topbar-back:focus-visible,
.jo-backlink:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

.jo-topbar-back-ic,
.jo-backlink svg {
    width: 18px;
    height: 18px;
}

/* Tabella incorporata con le azioni nella barra (TableStandard::tableActionsLiveInBar):
 * la riga di testata di Filament, che le ripeteva, non si vede. Un header solo. */
.fi-ta-ctn:has(.jo-ta-actions--table) .fi-ta-header-ctn > .fi-ta-header:not(:has(.fi-ta-header-heading)) { display: none; }
/* Con un titolo (es. "Gruppi hotel") resta il titolo, senza le azioni ripetute. */
.fi-ta-ctn:has(.jo-ta-actions--table) .fi-ta-header-ctn > .fi-ta-header > .fi-ta-actions { display: none; }

/* ── Riquadro informativo (.jo-callout): un solo disegno per avvisi e note
   dentro le pagine, colori dai token di stato (chiaro e dark). Varianti:
   is-info (default), is-warn, is-ok, is-err. Icona facoltativa (.jo-callout-ic). ── */
.jo-callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 12px;
    border: 1px solid var(--ds-info-bd);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-info-bg);
    color: var(--ds-info-fg);
    font-size: 13px;
    line-height: 1.5;
}

/* Senza icona il riquadro è testo e basta: in flex ogni grassetto e ogni
   pezzo di testo diventava una colonna. */
.jo-callout:not(:has(> .jo-callout-ic)) { display: block; }
.jo-callout.is-warn { border-color: var(--ds-warn-bd); background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.jo-callout.is-ok { border-color: var(--ds-ok-bd); background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.jo-callout.is-err { border-color: var(--ds-err-bd); background: var(--ds-err-bg); color: var(--ds-err-fg); }
.jo-callout.is-neutral { border-color: var(--ds-border, #D4D8E0); background: var(--ds-surface-sunken, #EDEFF3); color: var(--ds-text-secondary, #3F3F46); }

.jo-callout-ic {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.jo-callout a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Nome della tabella in testa alla sua barra (due tabelle nella stessa
   pagina, es. Gruppi e schede hotel): un header solo, niente riga di titolo
   sopra. Separato dalla CTA da un filetto, solo se la barra ha azioni. */
.jo-ta-bar-title {
    margin: 0 4px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-text-primary);
    white-space: nowrap;
}

.jo-ta-bar-title.has-actions {
    padding-right: 14px;
    border-right: 1px solid var(--ds-border);
}

/* Righe che si aprono sotto (Feedback e questionari, owner 5-ott-2026): la
 * freccia in Azioni gira quando la riga è aperta; il dettaglio sta in una
 * riga sotto, sul fondo interno, senza un altro riquadro. */
.jo-row-toggle svg { transition: transform .15s ease; }
.jo-row-toggle.is-open svg { transform: rotate(180deg); }
/* Righe aperte da InlineRows (window.joInlineRow): la freccia gira finché la
 * riga sotto c'è, anche dopo un aggiornamento della tabella o Annulla. */
:is(tr, [wire\:key]):has(+ [data-jo-inline-row][data-jo-toggle]) .jo-row-toggle[data-jo-inline-action] svg { transform: rotate(180deg); }
/* Mentre una riga si apre o si salva: cursore di attesa (ui-standard.js). */
html.jo-busy, html.jo-busy * { cursor: progress !important; }
tr.jo-row-detail > td { padding: 4px 20px 16px 56px; background: var(--ds-surface-2, #F3F4F8); }
.jo-fb-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
.jo-fb-answer { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.jo-fb-q { font-size: 12px; color: var(--ds-text-tertiary); }
.jo-fb-a { font-size: 13.5px; font-weight: 600; color: var(--ds-text-primary); white-space: pre-line; overflow-wrap: anywhere; }
tr.jo-row-detail > td { white-space: normal; }
.jo-row-detail-in { position: sticky; left: 56px; }
.jo-fb-empty { padding-top: 10px; font-size: 13px; color: var(--ds-text-tertiary); }
.jo-colf-empty { margin: 0; padding: 6px 8px; font-size: 12.5px; color: var(--ds-text-tertiary); }

/* Tag come icone (owner 6-ott-2026, App\Filament\Support\TagIcons): in fila,
   tenui come le icone dei dati, il nome nel tooltip e nella legenda. */
.jo-tag-icons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jo-tag-icon { display: inline-flex; color: var(--ds-text-tertiary); }
.jo-tag-icon svg { width: 18px; height: 18px; }

/* ══ Anteprima laterale, standard della piattaforma (owner 6-ott-2026,
   App\Filament\Concerns\HasSidePreview, filament.pages.with-side-preview):
   le stesse misure e logiche del Preventivatore (.jo-qcomp / .jo-qside).
   Da 1280px il modulo a sinistra e l'anteprima a destra, ferma mentre si
   scorre; sotto, l'anteprima dopo il modulo. Compressa = linguetta sul bordo. ══ */
.jo-sp { position: relative; min-width: 0; }
.jo-sp-main { min-width: 0; }
.jo-sp-side { display: flex; flex-direction: column; margin-top: 20px; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface); box-shadow: var(--ds-shadow-rest); }
.jo-sp-side[style*='display: none'] { display: none !important; }
.jo-sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--ds-row-divider, var(--ds-border)); background: var(--ds-surface-2, var(--ds-surface)); font-size: 13px; font-weight: 600; color: var(--ds-text-primary); }
.jo-sp-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.jo-sp-head > span:first-child svg { width: 16px; height: 16px; color: var(--ds-text-tertiary); }
.jo-sp-tools { display: inline-flex; align-items: center; gap: 4px; }
.jo-sp-hide { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-surface); font-size: 12.5px; font-weight: 500; color: var(--ds-text-secondary); }
.jo-sp-hide:hover { border-color: var(--ds-accent); color: var(--ds-accent-fg, #5F45A8); background: var(--ds-accent-soft); }
.jo-sp-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding: 0; }
.jo-sp-loading, .jo-sp-empty { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 13px; color: var(--ds-text-tertiary); }
.jo-sp-page { transition: opacity .15s ease; }
.jo-sp-page.is-loading { opacity: .55; }
.jo-sp-tab { display: none; }
@media (min-width: 1280px) {
    .jo-sp.is-side-open { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 40%, 640px); gap: 20px; align-items: start; }
    .jo-sp-side { position: sticky; top: calc(var(--jo-topbar-h, 64px) + 8px); max-height: calc(100vh - var(--jo-topbar-h, 64px) - 28px); margin-top: 0; }
    .jo-sp-tab {
        display: inline-flex; position: fixed; top: 50%; right: 0; z-index: 20; flex-direction: column; align-items: center; gap: 8px;
        padding: 14px 9px; border: 1px solid var(--ds-accent, #7C5CCB); border-right: 0; border-radius: 12px 0 0 12px;
        background: var(--ds-accent-soft, #F3EEFC); box-shadow: var(--ds-shadow-raised, var(--ds-shadow-rest));
        font-size: 12.5px; font-weight: 600; color: var(--ds-accent-fg, #5F45A8); transform: translateY(-50%); transition: padding .15s ease;
    }
    .jo-sp-tab[style*='display: none'] { display: none !important; }
    .jo-sp-tab svg { width: 17px; height: 17px; }
    .jo-sp-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
    .jo-sp-tab:hover { padding-right: 13px; }
}
/* Il contenitore modulo + anteprima non è una card: sta sul fondo, come il Preventivatore. */
html body .fi-page .jo-sp { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.jo-sp-fragment { padding: 14px 16px 16px; display: grid; gap: 14px; transition: opacity .15s ease; }
.jo-sp-fragment.is-loading { opacity: .55; }
.jo-sp-fragment .jo-sp-k { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ds-text-tertiary); }

/* Inbox ▸ chat del sito (D7, audit 6-ott-2026): niente verdi e beige di
   WhatsApp, bolle lilla tenue su fondo delle superfici interne. */
.jo-thread-web {
  --jo-wa-bubble-outbound: var(--ds-accent-soft, #F3EEFC);
  --jo-wa-bubble-inbound: var(--ds-surface, #FCFCFD);
  --jo-wa-chat-background: var(--ds-surface-2, #F3F4F8);
}

/* Telefono (owner 7-ott-2026, prima "Gruppi e schede hotel"): la barra di una
   tabella con titolo sta su due righe — titolo e azioni, poi ricerca e
   strumenti — invece di quattro. */
@media (max-width: 639px) {
    html body .fi-ta-header-toolbar:has(> .jo-ta-bar-title) {
        flex-wrap: wrap !important;
        row-gap: 8px;
        column-gap: 8px;
    }
    html body .fi-ta-header-toolbar > .jo-ta-bar-title {
        flex: 0 1 auto;
        width: auto;
        margin: 0;
    }
    html body .fi-ta-header-toolbar:has(> .jo-ta-bar-title) > .jo-ta-actions {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    html body .fi-ta-header-toolbar:has(> .jo-ta-bar-title) > .ms-auto {
        flex: 1 1 100%;
        flex-wrap: nowrap !important;
        gap: 8px;
        min-width: 0;
        margin-inline-start: 0;
    }
    html body .fi-ta-header-toolbar:has(> .jo-ta-bar-title) > .ms-auto .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ── Strumenti dell'anteprima (x-jo.preview-toolbar, owner 7-ott-2026): solo
   icone con tooltip; vista attiva lilla tenue; schermo intero sopra la pagina;
   vista telefono = telefono intero. ── */
.jo-pt { display: inline-flex; align-items: center; gap: 2px; }
.jo-pt .jo-icon-btn.is-on { background: var(--ds-accent-soft); color: var(--ds-accent-fg, #5F45A8); }
@media (min-width: 1280px) {
    .jo-sp.is-side-open .jo-sp-side { height: calc(100vh - var(--jo-topbar-h, 64px) - 28px); }
}
.jo-sp-side.is-full { position: fixed !important; inset: 20px; z-index: 60; height: auto !important; max-height: none !important; margin: 0; box-shadow: 0 0 0 100vmax rgb(15 17 23 / .45); }
.jo-sp-page.is-phone { margin: 16px auto; overflow: hidden; border: 10px solid var(--ds-text-primary, #18181B); border-radius: 36px; background: var(--ds-surface); }
.jo-sp-page.is-phone iframe { height: 780px; }

/* "Scrivi con AI" accanto all'etichetta di un campo di testo
 * (App\Filament\Support\AiWriteAction): scintille viola e la scritta, nei
 * colori di .jo-ai-action (owner 8-ott-2026: la sola icona da 14px non si
 * vedeva). Il margine negativo compensa il padding: la riga dell'etichetta
 * resta alta com'era.
 *
 * Mai su due righe, mai a spese dell'etichetta: l'hint prende lo spazio che
 * l'etichetta lascia libero e fa da contenitore; se lì "Scrivi con AI" non
 * ci sta (anche con l'icona ⓘ accanto) resta "✨ AI". Così i controlli della
 * stessa riga partono alla stessa altezza (vedi form-standard.css). */
html .fi-fo-field-wrp-hint:has(.jo-ai-write) {
    flex: 1 1 0;
    min-width: 52px;
    justify-content: flex-end;
    container-type: inline-size;
}

@container (max-width: 140px) {
    html .jo-ai-write .jo-ai-write-long {
        display: none;
    }
}

html .fi-link.jo-ai-write {
    white-space: nowrap;
    gap: 5px !important;
    margin: -2px -6px -2px 0;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ds-accent-fg, #6A4BB5) !important;
}

html .fi-link.jo-ai-write .fi-link-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--ds-accent-fg, #6A4BB5) !important;
}

html .fi-link.jo-ai-write:hover,
html .fi-link.jo-ai-write:focus-visible {
    background: var(--ds-accent-soft, #F3EEFC) !important;
}

/* Menu a tendina: le voci si leggono intere (owner 7-ott-2026: "Sincronizza con Google …" era tagliata). */
.fi-dropdown-panel { max-width: min(22rem, calc(100vw - 2rem)) !important; }
.fi-dropdown-panel .fi-dropdown-list-item-label { white-space: normal; }

/* Versione della piattaforma nel menu utente, sotto Disconnetti (AppVersion,
 * owner 15-ott-2026): una riga piccola e tenue a destra, non una voce del
 * menu; il clic la copia. */
.fi-dropdown-panel .jo-app-version {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-tertiary, #5B5B6B);
    cursor: pointer;
}

.fi-dropdown-panel .jo-app-version:hover,
.fi-dropdown-panel .jo-app-version:focus-visible {
    color: var(--ds-text-secondary, #3F3F46);
    outline: none;
}

.fi-dropdown-panel .jo-app-version:focus-visible {
    box-shadow: var(--ds-focus-ring, 0 0 0 2px #EAE1FA);
}

/* Tooltip del testo troncato (celle, note dei KPI, etichette; ui-standard.js,
 * owner 12-ott-2026): al posto del title grezzo del browser, una bolla della
 * piattaforma che compare con una breve dissolvenza e sale di 2px. Testi
 * lunghi (una risposta intera) a capo e chiusi dopo 12 righe. */
.tippy-box[data-theme~='jo-tip'] {
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 8px;
    background: var(--ds-surface, #FCFCFD);
    color: var(--ds-text-primary, #18181B);
    box-shadow: 0 10px 28px -8px rgba(20, 22, 40, .22), 0 2px 6px -2px rgba(20, 22, 40, .08);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}
.tippy-box[data-theme~='jo-tip'][data-state='hidden'] { opacity: 0; transform: translateY(2px); }
.tippy-box[data-theme~='jo-tip'] > .tippy-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    overflow: hidden;
    padding: 7px 11px;
    overflow-wrap: anywhere;
}
.dark .tippy-box[data-theme~='jo-tip'] { box-shadow: 0 12px 28px -8px rgba(5, 8, 15, .6); }

/* Righe che si aprono in tabella o in pagina al posto dei pop-up (owner
   7-ott-2026, App\Filament\Tables\InlineRows + window.joInlineRow). */
.jo-inline-card { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface-2, #F3F4F8); }
.fi-ta-ctn > .jo-inline-card { margin: 0; border-radius: 0; border-width: 0 0 1px; }
.jo-inline-form { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.jo-if-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ds-text-primary); }
.jo-if-error { margin: 0; font-size: 12.5px; color: var(--ds-err-fg, #B42318); }
.jo-if-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; }
.jo-if-field { grid-column: span var(--jo-if-span, 4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 640px) { .jo-if-field { grid-column: span 12; } }
.jo-if-label { font-size: 12.5px; color: var(--ds-text-secondary); }
/* "Scrivi con AI" accanto all'etichetta, come .fi-link.jo-ai-write nei form.
 * Nel codice sta dopo il campo (ordine del Tab: campo → AI → campo dopo),
 * qui torna in alto a destra, sulla riga dell'etichetta. */
.jo-if-field.has-ai { position: relative; }
.jo-if-field.has-ai > .jo-if-label { padding-right: 120px; }
.jo-if-field.has-ai > .jo-if-ai { position: absolute; top: -3px; right: -6px; }
.jo-if-ai { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ds-accent-fg, #6A4BB5); cursor: pointer; }
.jo-if-ai svg { width: 16px; height: 16px; }
.jo-if-ai:hover, .jo-if-ai:focus-visible { outline: none; background: var(--ds-accent-soft, #F3EEFC); }
.jo-if-label sup { color: var(--ds-err-fg, #B42318); }
.jo-if-control { height: 34px; padding: 0 10px; font-size: 13.5px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-field-bg, var(--ds-surface)); color: var(--ds-text-primary); }
textarea.jo-if-control { height: auto; padding: 8px 10px; }
.jo-if-control:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-field-focus-halo, rgba(124, 92, 203, .18)); }
.jo-if-hint { margin: 0; font-size: 12px; color: var(--ds-text-tertiary); }
.jo-if-check { display: inline-flex; align-items: center; gap: 8px; height: 34px; font-size: 13.5px; color: var(--ds-text-secondary); }
.jo-if-actions { display: flex; justify-content: flex-end; gap: 8px; }
.jo-if-btn { height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-text-secondary); }
.jo-if-btn-primary { border-color: var(--ds-accent); background: var(--ds-accent); color: var(--ds-on-accent, #fff); }
.jo-if-extra { padding-top: 10px; }

/* ✨ "Prepara con AI" in riga (Preventivatore, owner 7-ott-2026): scintille viola,
   fondo lilla tenue al passaggio; spenta (crediti esauriti) resta grigia. */
html .fi-icon-btn.jo-ai-row:not([disabled]) { color: var(--ds-accent, #7C5CCB) !important; }
html .fi-icon-btn.jo-ai-row:not([disabled]):hover,
html .fi-icon-btn.jo-ai-row:not([disabled]):focus-visible { background: var(--ds-accent-soft, #F3EEFC) !important; }

/* "i" accanto all'intestazione di una colonna che ha una riga di spiegazione nel tooltip (jo-th-help). */
.jo-th-help .jo-colh > span:first-child::after {
    content: "i";
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    font-style: italic;
    opacity: .6;
    vertical-align: 1px;
}

/* Suggerimento AI in una riga che si apre sotto (compositore del preventivo), niente pop-up. */
.jo-ai-suggest { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--ds-accent-soft-2, #EAE1FA); border-radius: 10px; background: var(--ds-accent-soft, #F3EEFC); font-size: 13px; }
.jo-ai-suggest-head { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ds-text-primary); }
.jo-ai-suggest-note { margin: 4px 0 8px; color: var(--ds-text-secondary); }
.jo-ai-suggest ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.jo-ai-suggest li label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.jo-ai-suggest li small { display: block; color: var(--ds-text-tertiary); }
.jo-ai-suggest-actions { display: flex; gap: 8px; align-items: center; }
.jo-qbar-ai { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent-fg, #5F45A8); font-size: 12px; font-weight: 500; }
.jo-qbar-ai svg { width: 13px; height: 13px; }
.jo-qbar-ai button { color: inherit; text-decoration: underline; font-weight: 500; }

/* "✨ … con AI" piccolo, senza riquadro (AI delicata, owner 7-ott-2026). */
html .fi-link.jo-ai-link { font-size: 13px; font-weight: 500; }
html .fi-link.jo-ai-link svg { width: 14px; height: 14px; }


/* Riga aperta sotto (dettaglio o pochi campi, owner 8-ott-2026): stesso velo
   di tutta la piattaforma (--ds-focus-veil) su tutta la pagina; restano in
   chiaro solo la riga aperta e il suo dettaglio (le celle salgono sopra il velo). */
body:has(tr.jo-row-detail)::after { opacity: 1; }
body:has(tr.jo-row-detail) :is(.fi-topbar, .fi-sidebar) { filter: var(--ds-focus-veil-filter, brightness(.93)); }
:is(tr:has(+ tr.jo-row-detail), tr.jo-row-detail) > td { z-index: 10; background-color: var(--ds-surface, #fcfcfd); }
:is(tr:has(+ tr.jo-row-detail), tr.jo-row-detail) > td:not(.fi-ta-actions-cell:last-child) { position: relative; }
tr.jo-row-detail > td { background-color: var(--ds-surface-2, #F3F4F8); }
html body .fi-ta .fi-ta-content > table.fi-ta-table > tbody > tr:has(+ tr.jo-row-detail) > td.fi-ta-actions-cell:last-child { z-index: 10; }

/* Vista Card (owner 12-ott-2026): la riga aperta è un riquadro a tutta
 * larghezza sotto la fila della card, non una card in più. Con "dense" le card
 * che la seguono riempiono i posti rimasti nella fila, così la fila resta
 * intera e il riquadro sta subito sotto. In chiaro sopra il velo restano la
 * card intera (non le sue celle una per una) e il riquadro. */
.jo-ta-cards table.fi-ta-table > tbody:has(> tr.jo-row-detail) { grid-auto-flow: row dense; }
/* Lo stesso nelle card su misura (HasListCardLayout, es. Gruppi hotel): la
 * riga è un riquadro a tutta larghezza nella loro griglia (window.joInlineRow). */
:has(> .jo-inline-card[data-jo-inline-row][style*="grid-column"]) { grid-auto-flow: row dense; }
html body .jo-ta-cards table.fi-ta-table > tbody > tr.jo-row-detail {
    grid-column: 1 / -1;
    position: relative;
    z-index: 10;
    padding: 4px 16px 14px;
    border: 1px solid var(--ds-accent-light, #EAE1FA);
    border-radius: 12px;
    background: var(--ds-surface-2, #F3F4F8);
}
.jo-ta-cards table.fi-ta-table > tbody > tr.jo-row-detail > td {
    display: block;
    width: 100% !important;
    overflow: visible;
    background: none;
}
.jo-ta-cards tr.jo-row-detail .jo-row-detail-in { position: static; }
.jo-ta-cards table.fi-ta-table > tbody > tr:has(+ tr.jo-row-detail) {
    position: relative;
    z-index: 10;
    border-color: var(--ds-accent, #7C5CCB);
}
.jo-ta-cards table.fi-ta-table > tbody > tr:has(+ tr.jo-row-detail) > td {
    z-index: auto;
    background-color: transparent;
}

/* Testi lunghi chiusi in Card (colonna con ->extraCellAttributes(['class' =>
 * 'jo-card-clamp'])): al massimo 6 righe coi puntini, così una risposta
 * lunghissima non allunga tutta la fila. Nella Lista non cambia nulla. */
.jo-ta-cards td.jo-card-clamp .fi-ta-text-item-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

/* Segmento già esistente sul tag scelto (owner 8-ott-2026): la domanda con le due scelte. */
.jo-tag-exists p { margin: 0; }
.jo-tag-exists-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.jo-tag-exists-actions .fi-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.jo-tag-exists-actions .jo-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }

/* KPI con valore 0: neutre anche se il loro tono è "da fare" o "risultato" (ui-standard.js). */
html .jo-kpi-ic.is-zero,
html .fi-main .fi-wi-stats-overview-stat[data-jo-zero] .fi-wi-stats-overview-stat-icon {
    background: var(--ds-tone-neutral-bg) !important;
    color: var(--ds-tone-neutral-fg) !important;
}

/* Interruttore in tabella con conferma (App\Filament\Tables\ConfirmToggleColumn,
   owner 9-ott-2026): lo stesso disegno dello switch di Filament, il clic apre il pop-up. */
.jo-switch { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: var(--ds-border-strong, #C9CDD8); cursor: pointer; transition: background .15s ease; vertical-align: middle; }
.jo-switch-k { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--ds-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s ease; }
.jo-switch.is-on { background: var(--ds-accent, #7C5CCB); }
.jo-switch.is-on .jo-switch-k { transform: translateX(20px); }

/* Rotelline ferme dove non si vedono (owner 9-ott-2026: piattaforma veloce):
   dentro un accordion chiuso o un blocco nascosto girerebbero lo stesso e
   farebbero ricalcolare gli stili di continuo a pagina ferma. */
.fi-collapsed .animate-spin,
.invisible .animate-spin,
[style*="display: none"] .animate-spin {
    animation: none;
}


/* ── Classi Tailwind mai compilate (non c'è build) in tre componenti scritti
   prima del design system: WhatsApp della Scheda hotel, pop-up di
   ricollegamento e Analisi dei segmenti (audit 12-ott-2026). Senza queste
   regole fondi e pulsanti restavano trasparenti, testo bianco su bianco.
   Solo token: il tema scuro segue da solo. Il markup nuovo usa .jo-callout
   e i componenti Filament, mai queste classi. ── */
.jo-legacy-tw .bg-green-50,
.jo-legacy-tw .bg-green-100,
.jo-legacy-tw .bg-emerald-50,
.jo-legacy-tw .bg-emerald-100 { background-color: var(--ds-ok-bg); }
.jo-legacy-tw .border-green-200,
.jo-legacy-tw .border-green-300,
.jo-legacy-tw .border-emerald-200,
.jo-legacy-tw .border-emerald-300 { border-color: var(--ds-ok-bd); }
.jo-legacy-tw .text-green-600,
.jo-legacy-tw .text-green-700,
.jo-legacy-tw .text-green-800,
.jo-legacy-tw .text-green-900,
.jo-legacy-tw .text-emerald-600,
.jo-legacy-tw .text-emerald-700,
.jo-legacy-tw .text-emerald-800,
.jo-legacy-tw .text-emerald-900 { color: var(--ds-ok-fg); }
.jo-legacy-tw .bg-green-400,
.jo-legacy-tw .bg-green-500,
.jo-legacy-tw .bg-emerald-400,
.jo-legacy-tw .bg-emerald-500 { background-color: var(--ds-ok-dot); }
.jo-legacy-tw .bg-amber-50,
.jo-legacy-tw .bg-amber-100,
.jo-legacy-tw .bg-yellow-50,
.jo-legacy-tw .bg-yellow-100,
.jo-legacy-tw .bg-orange-50,
.jo-legacy-tw .bg-orange-100 { background-color: var(--ds-warn-bg); }
.jo-legacy-tw .border-amber-200,
.jo-legacy-tw .border-amber-300,
.jo-legacy-tw .border-yellow-200,
.jo-legacy-tw .border-yellow-300,
.jo-legacy-tw .border-orange-200,
.jo-legacy-tw .border-orange-300 { border-color: var(--ds-warn-bd); }
.jo-legacy-tw .text-amber-600,
.jo-legacy-tw .text-amber-700,
.jo-legacy-tw .text-amber-800,
.jo-legacy-tw .text-amber-900,
.jo-legacy-tw .text-yellow-600,
.jo-legacy-tw .text-yellow-700,
.jo-legacy-tw .text-yellow-800,
.jo-legacy-tw .text-yellow-900,
.jo-legacy-tw .text-orange-600,
.jo-legacy-tw .text-orange-700,
.jo-legacy-tw .text-orange-800,
.jo-legacy-tw .text-orange-900 { color: var(--ds-warn-fg); }
.jo-legacy-tw .bg-amber-400,
.jo-legacy-tw .bg-amber-500,
.jo-legacy-tw .bg-yellow-400,
.jo-legacy-tw .bg-yellow-500,
.jo-legacy-tw .bg-orange-400,
.jo-legacy-tw .bg-orange-500 { background-color: var(--ds-warn-dot); }
.jo-legacy-tw .bg-red-50,
.jo-legacy-tw .bg-red-100,
.jo-legacy-tw .bg-rose-50,
.jo-legacy-tw .bg-rose-100 { background-color: var(--ds-err-bg); }
.jo-legacy-tw .border-red-200,
.jo-legacy-tw .border-red-300,
.jo-legacy-tw .border-rose-200,
.jo-legacy-tw .border-rose-300 { border-color: var(--ds-err-bd); }
.jo-legacy-tw .text-red-600,
.jo-legacy-tw .text-red-700,
.jo-legacy-tw .text-red-800,
.jo-legacy-tw .text-red-900,
.jo-legacy-tw .text-rose-600,
.jo-legacy-tw .text-rose-700,
.jo-legacy-tw .text-rose-800,
.jo-legacy-tw .text-rose-900 { color: var(--ds-err-fg); }
.jo-legacy-tw .bg-red-400,
.jo-legacy-tw .bg-red-500,
.jo-legacy-tw .bg-rose-400,
.jo-legacy-tw .bg-rose-500 { background-color: var(--ds-err-dot); }
.jo-legacy-tw .bg-blue-50,
.jo-legacy-tw .bg-blue-100,
.jo-legacy-tw .bg-sky-50,
.jo-legacy-tw .bg-sky-100,
.jo-legacy-tw .bg-teal-50,
.jo-legacy-tw .bg-teal-100,
.jo-legacy-tw .bg-cyan-50,
.jo-legacy-tw .bg-cyan-100 { background-color: var(--ds-info-bg); }
.jo-legacy-tw .border-blue-200,
.jo-legacy-tw .border-blue-300,
.jo-legacy-tw .border-sky-200,
.jo-legacy-tw .border-sky-300,
.jo-legacy-tw .border-teal-200,
.jo-legacy-tw .border-teal-300,
.jo-legacy-tw .border-cyan-200,
.jo-legacy-tw .border-cyan-300 { border-color: var(--ds-info-bd); }
.jo-legacy-tw .text-blue-600,
.jo-legacy-tw .text-blue-700,
.jo-legacy-tw .text-blue-800,
.jo-legacy-tw .text-blue-900,
.jo-legacy-tw .text-sky-600,
.jo-legacy-tw .text-sky-700,
.jo-legacy-tw .text-sky-800,
.jo-legacy-tw .text-sky-900,
.jo-legacy-tw .text-teal-600,
.jo-legacy-tw .text-teal-700,
.jo-legacy-tw .text-teal-800,
.jo-legacy-tw .text-teal-900,
.jo-legacy-tw .text-cyan-600,
.jo-legacy-tw .text-cyan-700,
.jo-legacy-tw .text-cyan-800,
.jo-legacy-tw .text-cyan-900 { color: var(--ds-info-fg); }
.jo-legacy-tw .bg-blue-400,
.jo-legacy-tw .bg-blue-500,
.jo-legacy-tw .bg-sky-400,
.jo-legacy-tw .bg-sky-500,
.jo-legacy-tw .bg-teal-400,
.jo-legacy-tw .bg-teal-500,
.jo-legacy-tw .bg-cyan-400,
.jo-legacy-tw .bg-cyan-500 { background-color: var(--ds-info-dot); }
.jo-legacy-tw .bg-indigo-50,
.jo-legacy-tw .bg-indigo-100,
.jo-legacy-tw .bg-purple-50,
.jo-legacy-tw .bg-purple-100,
.jo-legacy-tw .bg-violet-50,
.jo-legacy-tw .bg-violet-100 { background-color: var(--ds-accent-soft); }
.jo-legacy-tw .border-indigo-200,
.jo-legacy-tw .border-indigo-300,
.jo-legacy-tw .border-purple-200,
.jo-legacy-tw .border-purple-300,
.jo-legacy-tw .border-violet-200,
.jo-legacy-tw .border-violet-300 { border-color: var(--ds-accent-soft-hover, var(--ds-border)); }
.jo-legacy-tw .text-indigo-600,
.jo-legacy-tw .text-indigo-700,
.jo-legacy-tw .text-indigo-800,
.jo-legacy-tw .text-indigo-900,
.jo-legacy-tw .text-purple-600,
.jo-legacy-tw .text-purple-700,
.jo-legacy-tw .text-purple-800,
.jo-legacy-tw .text-purple-900,
.jo-legacy-tw .text-violet-600,
.jo-legacy-tw .text-violet-700,
.jo-legacy-tw .text-violet-800,
.jo-legacy-tw .text-violet-900 { color: var(--ds-accent); }
.jo-legacy-tw .bg-indigo-400,
.jo-legacy-tw .bg-indigo-500,
.jo-legacy-tw .bg-purple-400,
.jo-legacy-tw .bg-purple-500,
.jo-legacy-tw .bg-violet-400,
.jo-legacy-tw .bg-violet-500 { background-color: var(--ds-accent); }
/* Pulsanti pieni: la CTA è viola; rosso pieno solo per la conferma nel pop-up. */
.jo-legacy-tw .bg-green-600, .jo-legacy-tw .bg-amber-600, .jo-legacy-tw .bg-blue-600 {
    background-color: var(--ds-accent); color: var(--ds-on-accent, #fff);
}
.jo-legacy-tw .hover\:bg-green-700:hover, .jo-legacy-tw .hover\:bg-amber-700:hover, .jo-legacy-tw .hover\:bg-blue-700:hover {
    background-color: var(--ds-accent-hover, var(--ds-accent));
}
.jo-legacy-tw .bg-red-600 { background-color: var(--ds-err-fg); color: var(--ds-on-accent, #fff); }
.jo-legacy-tw .hover\:bg-red-700:hover { filter: brightness(.92); }
.jo-legacy-tw .disabled\:opacity-50:disabled { opacity: .5; }
.jo-legacy-tw .disabled\:opacity-60:disabled { opacity: .6; }
.jo-legacy-tw .h-px { height: 1px; }
.jo-legacy-tw .h-20 { height: 5rem; }
.jo-legacy-tw .ml-1 { margin-inline-start: .25rem; }
.jo-legacy-tw .ml-2 { margin-inline-start: .5rem; }
.jo-legacy-tw .ml-4 { margin-inline-start: 1rem; }
.jo-legacy-tw .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jo-legacy-tw .col-span-2 { grid-column: span 2 / span 2; }
.jo-legacy-tw .rotate-180 { transform: rotate(180deg); }
@media (min-width: 640px) { .jo-legacy-tw .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dark .jo-legacy-tw .bg-red-600 { background-color: var(--ds-err-dot); }

/* ── Tracciamento e ricavi (EmailAttributionReport, 12-ott-2026) ──
   I blocchi di sempre (Come decidiamo · Su cosa possiamo dire qualcosa ·
   Due modi di contare · Campagna per campagna · Stato del tracciamento) in
   card standard aperte, col passo unico; testi, righe e tabella coi token. */
.jo-attr { display: flex; flex-direction: column; gap: 20px; }
.jo-attr-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jo-attr-from { font-size: 12.5px; color: var(--ds-text-tertiary); }
.jo-attr-prose { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ds-text-secondary); }
.jo-attr-prose p { margin: 0; }
.jo-attr-prose strong, .jo-attr-text strong { color: var(--ds-text-primary); font-weight: 600; }
.jo-attr-rows { margin: 0; padding: 0; list-style: none; }
.jo-attr-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ds-row-divider, var(--ds-border)); font-size: 13.5px; color: var(--ds-text-secondary); }
.jo-attr-row:first-child { border-top: 0; padding-top: 0; }
.jo-attr-row.is-muted { color: var(--ds-text-tertiary); }
.jo-attr-count { flex: none; min-width: 3.5rem; text-align: right; font-size: 15px; font-weight: 600; color: var(--ds-text-primary); font-variant-numeric: tabular-nums; }
.jo-attr-text { min-width: 0; }
.jo-attr-muted { color: var(--ds-text-tertiary); }
.jo-attr .jo-attr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jo-attr .jo-attr-kpis .jo-kpi-lbl { text-transform: none; }
/* Le spiegazioni "dedotto" e "misurato" sono il contenuto del blocco: intere, mai coi puntini. */
.jo-attr .jo-attr-kpis .jo-kpi-note { white-space: normal; overflow: visible; text-overflow: clip; }
.jo-attr-alert, .jo-attr-note { margin: 12px 0 0; font-size: 13px; }
.jo-attr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jo-attr-table th { padding: 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ds-text-tertiary); background: var(--ds-surface-2); }
.jo-attr-table td { padding: 9px 8px; border-top: 1px solid var(--ds-row-divider, var(--ds-border)); color: var(--ds-text-secondary); }
.jo-attr-table td a { font-weight: 600; color: var(--ds-text-primary); }
.jo-attr-table td a:hover { color: var(--ds-accent); }
.jo-attr-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Da dove arrivano i ricavi: totali per canale, poi riga per riga. */
.jo-attr .jo-attr-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jo-attr-table--spaced { margin-top: 14px; }
.jo-attr-table td { vertical-align: top; }
.jo-attr-table .jo-attr-date { text-align: left; color: var(--ds-text-tertiary); }
.jo-attr-table .jo-attr-strong { font-weight: 600; color: var(--ds-text-primary); }
.jo-attr-channel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jo-attr-channel-ic { width: 16px; height: 16px; flex: none; color: var(--ds-text-tertiary); }
.jo-attr-more > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--ds-text-primary); font-weight: 500; }
.jo-attr-more > summary::-webkit-details-marker { display: none; }
.jo-attr-more > summary:hover { color: var(--ds-accent); }
.jo-attr-more > summary:focus-visible { outline: 2px solid var(--ds-focus-ring, var(--ds-accent)); outline-offset: 2px; border-radius: 4px; }
.jo-attr-more-ic { width: 16px; height: 16px; flex: none; color: var(--ds-text-tertiary); transition: transform .15s ease; }
.jo-attr-more[open] .jo-attr-more-ic { transform: rotate(180deg); }
.jo-attr-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 8px; background: var(--ds-surface-2); font-size: 12.5px; }
.jo-attr-dl dt { color: var(--ds-text-tertiary); }
.jo-attr-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ds-text-secondary); }
.jo-attr-dl code { font-size: 12px; }
@media (max-width: 640px) {
    .jo-attr .jo-attr-kpis { grid-template-columns: minmax(0, 1fr); }
    /* Sul telefono ogni prenotazione è una scheda: data e ricavo, canale, poi da dove. */
    .jo-attr-table--spaced, .jo-attr-table--spaced tbody { display: block; }
    .jo-attr-table--spaced thead { display: none; }
    .jo-attr-table--spaced tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--ds-row-divider, var(--ds-border)); }
    .jo-attr-table--spaced td { display: block; padding: 0; border: 0; }
    .jo-attr-table--spaced td:nth-child(1) { grid-area: 1 / 1; }
    .jo-attr-table--spaced td:nth-child(5) { grid-area: 1 / 2; }
    .jo-attr-table--spaced td:nth-child(2) { grid-area: 2 / 1; }
    .jo-attr-table--spaced td:nth-child(4) { grid-area: 2 / 2; }
    .jo-attr-table--spaced td:nth-child(4)::after { content: " pren."; color: var(--ds-text-tertiary); }
    .jo-attr-table--spaced td:nth-child(3) { grid-area: 3 / 1 / 4 / 3; }
    .jo-attr-count { min-width: 2.5rem; }
}