/*
 * JOORNA · Design System v2 (2026-09-30) — regole globali.
 * Token in public/css/joorna-tokens.css (--ds-*). Caricato per ULTIMO
 * (JoornaTheme): qui stanno le decisioni visive trasversali, non i
 * componenti. Vale per ogni pagina presente e futura.
 *
 *  1. Superfici: fondo app grigio chiaro, card bianche con bordo + ombra
 *     morbida, testate e pannelli interni tenui.
 *  2. Testi: niente grigio chiaro illeggibile (min. 5.3:1 su bianco).
 *  3. Tabelle: righe alternate (da 6 righe in su), hover e selezione
 *     viola tenue, colonna principale in evidenza, celle vuote discrete.
 *  4. Badge di stato a pillola: fondo chiaro, bordo, testo scuro (≥ 6:1).
 *  5. Sidebar: default / hover / attiva con filetto, focus da tastiera.
 */

/* ── 1. Superfici ───────────────────────────────────────────────── */

html body.fi-body,
html .fi-body {
    background-color: var(--ds-bg-app) !important;
}

/* Niente bianco puro nel pannello: le superfici "bianche" di Filament
 * (card, tabelle, topbar, campi, menu, modali) prendono il bianco tenue
 * della superficie. Senza !important: gli sfondi trasparenti voluti
 * (pill delle sotto-sezioni…) restano. Le anteprime delle email restano
 * bianche (sono il contenuto vero, con i loro stili). */
html:not(.dark) .fi-body .bg-white {
    background-color: var(--ds-surface);
}

/* …ma non sopra lo stato "spuntato": la regola qui sopra (più specifica di
 * checked:bg-primary-600) rendeva le caselle spuntate chiare come quelle
 * vuote. Spuntata = viola, come lo vuole Filament. */
html:not(.dark) .fi-body .bg-white:is(input[type="checkbox"], input[type="radio"]):checked {
    background-color: var(--ds-accent);
}

/* Scelta a pulsanti (ToggleButtons) selezionata: stessa causa (testo
 * bianco su fondo chiaro, illeggibile). Selezione = lilla tenue con testo
 * viola, mai viola pieno (quello è solo della CTA). */
html .fi-body input:checked + .fi-btn.bg-white {
    background-color: var(--ds-accent-soft-2, #EAE1FA);
    color: var(--ds-accent-fg, #5F45A8);
    --tw-ring-color: var(--ds-accent, #7C5CCB);
    box-shadow: 0 0 0 1px var(--ds-accent, #7C5CCB);
}

html .fi-body input:checked + .fi-btn.bg-white:hover {
    background-color: var(--ds-accent-soft-hover, #EEE7FB);
}

/* Card: bordo di 1px + ombra a riposo, così il contorno si vede anche su
 * schermi poco contrastati. Le fasce dei builder (.jo-qb) restano piatte. */
html .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.jo-qb):not(.jo-psec):not(.fi-section .fi-section),
html .fi-ta-ctn,
html .fi-wi-stats-overview-stat,
html .jo-kpi,
html .jo-listcard {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-rest) !important;
}

html:not(.dark) .fi-modal-window {
    border-radius: var(--ds-radius-card) !important;
    box-shadow: 0 20px 40px -8px rgba(20, 22, 40, .18) !important;
}

/* ── 1b. Dark mode: morbido, mai nero (token in joorna-tokens.css) ── */

/* Testi: mai bianco puro (abbaglia sul fondo scuro). */
html.dark .dark\:text-white,
html.dark .fi-header-heading,
html.dark .fi-section-header-heading {
    color: var(--ds-text-primary) !important;
}

/* Sidebar e topbar: un gradino sopra la pagina, sotto le card. */
html.dark .fi-sidebar,
html.dark .fi-sidebar-header,
html.dark .fi-topbar > nav {
    background-color: var(--ds-bg-sidebar) !important;
}

html.dark .fi-sidebar {
    border-right: 1px solid var(--ds-row-divider);
}

html.dark .fi-topbar > nav {
    box-shadow: 0 1px 0 var(--ds-row-divider) !important;
}

/* Modali e menu: la superficie delle card, bordo sottile, ombra morbida. */
html.dark .fi-modal-window,
html.dark .fi-dropdown-panel {
    background-color: var(--ds-surface) !important;
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-raised) !important;
}

html.dark .fi-modal-window {
    border-radius: var(--ds-radius-card) !important;
}

/* Chip della struttura in topbar: in dark niente viola pieno (abbaglia),
 * lilla tenue con testo viola chiaro; resta riconoscibile come contesto. */

/* Campi: un gradino sotto la card, non un buco nero. */
html.dark .fi-input-wrp {
    background-color: var(--ds-surface-sunken) !important;
}

/* Campi: bordo leggibile (3:1, requisito per i controlli). */
html .fi-input-wrp {
    --tw-ring-color: var(--ds-border-strong) !important;
}

/* ── 2. Testi ───────────────────────────────────────────────────── */

/* I grigi chiari di Filament (text-gray-400, #a1a1aa: 2.6:1) diventano il
 * grigio minimo leggibile; i 500 il terziario. */
html:not(.dark) :is(.fi-main, .fi-sidebar, .fi-modal, .fi-dropdown-panel) .text-gray-400 {
    color: var(--ds-text-placeholder) !important;
}

html:not(.dark) :is(.fi-main, .fi-modal) .text-gray-500 {
    color: var(--ds-text-tertiary) !important;
}

html:not(.dark) .fi-input::placeholder,
html:not(.dark) .fi-select-input::placeholder,
html:not(.dark) textarea::placeholder {
    color: var(--ds-text-placeholder) !important;
}

html .fi-header-subheading,
html .fi-section-header-description,
html .fi-fo-field-wrp-helper-text {
    color: var(--ds-text-tertiary) !important;
}

html .fi-header-heading,
html .fi-section-header-heading {
    color: var(--ds-text-primary) !important;
}

/* ── 3. Tabelle ─────────────────────────────────────────────────── */

/* Testata: fondo interno, etichette in sentence case, terziario 600. */
html .fi-ta-table > thead > tr,
html .fi-ta-table > thead > tr > th {
    background-color: var(--ds-surface-sunken) !important;
}

html .fi-ta-table > thead .fi-ta-header-cell-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: none !important;
    color: var(--ds-text-tertiary) !important;
}

html .fi-ta-table > thead {
    border-bottom: 1px solid var(--ds-border);
}

/* Separatori di riga appena percettibili. */
html .fi-ta-table > tbody > tr.fi-ta-row + tr.fi-ta-row {
    border-top-color: var(--ds-row-divider) !important;
}

/* Righe alternate solo nelle tabelle con almeno 6 righe (sotto bastano i
 * separatori); mai nella vista Card. Ogni cella prende il fondo della sua
 * riga, anche la colonna Azioni sticky. */
html .fi-ta-table:not(.jo-ta-cards *) > tbody:has(> tr.fi-ta-row:nth-child(6)) > tr.fi-ta-row:nth-child(even) > td {
    background-color: var(--ds-row-stripe) !important;
}

html .fi-ta-table:not(.jo-ta-cards *) > tbody > tr.fi-ta-row > td {
    transition: background-color .12s ease;
}

html .fi-ta-table:not(.jo-ta-cards *) > tbody > tr.fi-ta-row:hover > td {
    background-color: var(--ds-row-hover) !important;
}

/* Riga selezionata: fondo viola tenue + filetto a sinistra. */
html .fi-ta-table:not(.jo-ta-cards *) > tbody > tr.fi-ta-row:has(.fi-ta-record-checkbox:checked) > td {
    background-color: var(--ds-row-selected) !important;
}

html .fi-ta-table:not(.jo-ta-cards *) > tbody > tr.fi-ta-row:has(.fi-ta-record-checkbox:checked) > td:first-child {
    box-shadow: inset 2px 0 0 var(--ds-accent);
}

/* Gerarchia: la colonna principale (la prima dopo la casella) in
 * evidenza; il resto è testo secondario. */
html .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell .fi-ta-text-item-label {
    color: var(--ds-text-secondary);
}

html .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell + td.fi-ta-cell .fi-ta-text-item-label,
html .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:first-child:not(.fi-ta-selection-cell) .fi-ta-text-item-label {
    font-weight: 600;
    color: var(--ds-text-primary);
}

/* Link nelle celle: neutri a riposo, viola sottolineati al passaggio. */
html .fi-ta-table > tbody a.fi-ta-text-item:hover .fi-ta-text-item-label,
html .fi-ta-table > tbody .fi-ta-text-item a:hover {
    color: var(--ds-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Numeri allineati in colonna. */
html .fi-ta-table .fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
}

/* Celle vuote: il trattino resta, discreto (segnale non testuale, 3:1). */
html .fi-ta-placeholder,
html .fi-ta-cell .fi-ta-text-item-label:is([data-empty]) {
    color: var(--ds-empty) !important;
}

/* ── 4. Badge di stato a pillola ────────────────────────────────── */

html .fi-badge {
    border-radius: var(--ds-radius-pill) !important;
    padding: 2px 10px !important;
    min-height: 22px;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    gap: 6px !important;
}

/* Una semantica = un colore, in tutta la piattaforma. Il colore del
 * badge Filament (success/gray/warning/danger/info/primary) sceglie la
 * variante; l'icona prende il colore del pallino. */
html .fi-badge.fi-color-success { background-color: var(--ds-ok-bg) !important;   color: var(--ds-ok-fg) !important;   --tw-ring-color: var(--ds-ok-bd) !important; }
html .fi-badge.fi-color-gray    { background-color: var(--ds-off-bg) !important;  color: var(--ds-off-fg) !important;  --tw-ring-color: var(--ds-off-bd) !important; }
html .fi-badge.fi-color-warning { background-color: var(--ds-warn-bg) !important; color: var(--ds-warn-fg) !important; --tw-ring-color: var(--ds-warn-bd) !important; }
html .fi-badge.fi-color-danger  { background-color: var(--ds-err-bg) !important;  color: var(--ds-err-fg) !important;  --tw-ring-color: var(--ds-err-bd) !important; }
html .fi-badge.fi-color-info    { background-color: var(--ds-info-bg) !important; color: var(--ds-info-fg) !important; --tw-ring-color: var(--ds-info-bd) !important; }
html .fi-badge.fi-color-primary { background-color: var(--ds-auto-bg) !important; color: var(--ds-auto-fg) !important; --tw-ring-color: var(--ds-auto-bd) !important; }

html .fi-badge.fi-color-success .fi-badge-icon { color: var(--ds-ok-dot) !important; }
html .fi-badge.fi-color-gray .fi-badge-icon    { color: var(--ds-off-dot) !important; }
html .fi-badge.fi-color-warning .fi-badge-icon { color: var(--ds-warn-dot) !important; }
html .fi-badge.fi-color-danger .fi-badge-icon  { color: var(--ds-err-dot) !important; }
html .fi-badge.fi-color-info .fi-badge-icon    { color: var(--ds-info-dot) !important; }
html .fi-badge.fi-color-primary .fi-badge-icon { color: var(--ds-auto-dot) !important; }

html .fi-badge .fi-badge-icon {
    width: 14px !important;
    height: 14px !important;
}

/* ── 4b. Celle delle tabelle: meno pill, meno colori ─────────────
 * (App\Filament\Tables\CellStyle, override text-column/icon-column)
 * Stato = pallino + testo; tag descrittivo = etichetta neutra sottile;
 * dati semplici = icona outline tenue con tooltip. */
html .jo-cell-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 20px;
    color: var(--ds-text-secondary);
}

html .jo-cell-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ds-off-dot);
}

html .jo-cell-status.fi-color-success .jo-cell-dot { background: var(--ds-ok-dot); }
html .jo-cell-status.fi-color-warning .jo-cell-dot { background: var(--ds-warn-dot); }
html .jo-cell-status.fi-color-danger .jo-cell-dot  { background: var(--ds-err-dot); }
html .jo-cell-status.fi-color-info .jo-cell-dot    { background: var(--ds-info-dot); }
html .jo-cell-status.fi-color-primary .jo-cell-dot { background: var(--ds-auto-dot); }
html .jo-cell-status.fi-color-custom:not(.fi-color-success, .fi-color-warning, .fi-color-danger, .fi-color-info, .fi-color-primary) .jo-cell-dot {
    background: rgb(var(--c-500));
}

html .jo-cell-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    color: var(--ds-text-secondary);
}

html .jo-cell-tag-more {
    color: var(--ds-text-tertiary);
    cursor: default;
}

html .jo-cell-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ds-text-secondary);
}

html .jo-cell-text-icon {
    width: 15px;
    height: 15px;
    color: var(--ds-nav-icon);
}

/* ── 4c. Valore che si cambia dalla cella (App\Filament\Tables\CellMenu) ──
 * Stato e "In carico a" della Pipeline lead: il valore (pallino + testo,
 * o il nome) è il pulsante, con un chevron discreto che dice "si apre";
 * sotto, il dropdown di Filament con le voci come nelle tendine di riga.
 * Il fondo compare al passaggio, a menu aperto e col fuoco da tastiera. */
html .jo-cell-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    /* Area di clic più ampia del testo senza spostarlo nella cella. */
    margin: -4px -6px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--ds-radius-control);
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color .12s ease, box-shadow .12s ease;
}

html .jo-cell-menu-btn:hover,
html .jo-cell-menu-btn[aria-expanded='true'] {
    background: var(--ds-surface-hover);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}

html .jo-cell-menu-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

html .jo-cell-menu-chevron {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--ds-text-tertiary);
    opacity: .6;
    transition: opacity .12s ease, transform .12s ease;
}

html .jo-cell-menu-btn:hover .jo-cell-menu-chevron,
html .jo-cell-menu-btn:focus-visible .jo-cell-menu-chevron,
html .jo-cell-menu-btn[aria-expanded='true'] .jo-cell-menu-chevron {
    opacity: 1;
}

html .jo-cell-menu-btn[aria-expanded='true'] .jo-cell-menu-chevron {
    transform: rotate(180deg);
}

/* "Assegna" quando nessuno è in carico: un invito, non un valore. */
html .jo-cell-menu-empty {
    color: var(--ds-text-tertiary);
}

/* Al tocco (telefono, tablet) il pulsante è alto abbastanza per il dito. */
@media (pointer: coarse) {
    html .jo-cell-menu-btn {
        min-height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .jo-cell-menu-btn,
    html .jo-cell-menu-chevron {
        transition: none;
    }
}

/* Icone-dato (booleani, consensi, sorgente, canale, sync): solo il
 * simbolo, tenue, con il significato nel tooltip. */
html .jo-data-icon .fi-ta-icon-item.text-gray-400 {
    color: var(--ds-text-tertiary) !important;
}

html .jo-data-icon .fi-ta-icon-item.fi-color-custom {
    color: var(--ds-text-tertiary) !important;
}

html .jo-data-icon .fi-ta-icon-item.fi-color-success {
    color: var(--ds-ok-dot) !important;
}

html .jo-data-icon .fi-ta-icon-item.fi-color-danger {
    color: var(--ds-err-dot) !important;
}

html .jo-data-icon .fi-ta-icon-item.fi-color-warning {
    color: var(--ds-warn-dot) !important;
}

/* Sorgente che è un canale (chatbot, email, WhatsApp): colore del canale
 * come nell'Inbox (SourceIcons::attr, owner 7-ott-2026). */
html [data-jo-channel] .jo-data-icon .fi-ta-icon-item.fi-ta-icon-item,
html body .jo-legend-icon [data-jo-channel] :is(svg, .fi-ta-icon-item).fi-ta-icon-item,
html body .jo-legend-icon [data-jo-channel] svg {
    color: var(--jo-channel-color) !important;
}

/* Icone di dato tutte della stessa misura delle azioni (16px, owner
 * 7-ott-2026): tag, sorgente, consensi, colonne a icona e legenda. */
html body :is(.jo-tag-icon, .jo-gc-ico, .jo-gc-ico .jo-ch-ic, .jo-legend-icon) svg,
html body :is(.jo-gc-ico .jo-ch-ic),
html body :is(td, .jo-legend-icon) .fi-ta-icon-item.fi-ta-icon-item {
    width: 16px !important;
    height: 16px !important;
}

/* Tag colorati (TagIcons::tone): stesso colore in tabella, Kanban e legenda. */
html body .jo-tag-icon.jo-tag-icon[data-jo-tag-tone] { color: var(--jo-tag-c) !important; }
html body .jo-tag-icon.jo-tag-icon[data-jo-tag-tone] svg { color: inherit !important; }
.jo-tag-icon[data-jo-tag-tone='sky'] { --jo-tag-c: var(--ds-tag-sky); }
.jo-tag-icon[data-jo-tag-tone='green'] { --jo-tag-c: var(--ds-tag-green); }
.jo-tag-icon[data-jo-tag-tone='amber'] { --jo-tag-c: var(--ds-tag-amber); }
.jo-tag-icon[data-jo-tag-tone='rust'] { --jo-tag-c: var(--ds-tag-rust); }
.jo-tag-icon[data-jo-tag-tone='rose'] { --jo-tag-c: var(--ds-tag-rose); }
.jo-tag-icon[data-jo-tag-tone='violet'] { --jo-tag-c: var(--ds-tag-violet); }
.jo-tag-icon[data-jo-tag-tone='teal'] { --jo-tag-c: var(--ds-tag-teal); }
.jo-tag-icon[data-jo-tag-tone='gold'] { --jo-tag-c: var(--ds-tag-gold); }

/* Contatori della sidebar e delle pill: pillola viola compatta. */
html .fi-sidebar-item .fi-badge,
html .fi-page-sub-navigation-tabs .fi-badge {
    min-height: 18px;
    padding: 0 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    background-color: var(--ds-accent-soft) !important;
    color: var(--ds-accent-fg) !important;
    --tw-ring-color: transparent !important;
}

/* ── 5. Sidebar e navigazione ───────────────────────────────────── */

html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
    background-color: var(--ds-bg-sidebar) !important;
}

html:not(.dark) .fi-sidebar {
    border-right: 1px solid var(--ds-row-divider);
}

/* Sidebar ariosa e leggera (misure in sidebar.css): testo regolare, icone
 * tenui, voce attiva con un fondo lilla appena accennato (niente filetto né
 * grassetto pesante). */
/* Macroarea: riga leggera come le voci; quella in cui si lavora ha testo
 * scuro e icona viola, senza fondo (lo stato attivo è sulla sotto-voce). */
html .fi-sidebar-group-button {
    transition: background-color .12s ease;
}

html .fi-sidebar-group-button:hover {
    background-color: var(--ds-nav-hover, #EBEDF1);
}

html .fi-sidebar-group-label {
    color: var(--ds-text-secondary) !important;
}

html .fi-sidebar-group-icon {
    color: var(--ds-nav-icon, #8A8A99) !important;
}

html .fi-sidebar-group-button .fi-icon-btn {
    color: var(--ds-nav-icon, #8A8A99) !important;
}

html .fi-sidebar-group.fi-active > .fi-sidebar-group-button .fi-sidebar-group-label {
    color: var(--ds-text-primary) !important;
    font-weight: 600;
}

html .fi-sidebar-group.fi-active > .fi-sidebar-group-button .fi-sidebar-group-icon {
    color: var(--ds-accent) !important;
}

/* Default */
html .fi-sidebar-item-button {
    transition: background-color .12s ease, color .12s ease;
}

html .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-label {
    color: var(--ds-text-secondary) !important;
    font-weight: 400;
}

html .fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-icon {
    color: var(--ds-nav-icon, #8A8A99) !important;
}

/* Hover */
html .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover {
    background-color: var(--ds-nav-hover, #F6F7F9) !important;
}

html .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: var(--ds-text-primary) !important;
}

html .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--ds-text-tertiary) !important;
}

/* Attiva: fondo lilla appena accennato, testo e icona viola. */
html .fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--ds-nav-active-bg, #F6F1FF) !important;
}

html .fi-sidebar-item-active > .fi-sidebar-item-button:hover {
    background-color: var(--ds-accent-soft) !important;
}

html .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--ds-accent-fg) !important;
    font-weight: 500 !important;
}

html .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--ds-accent) !important;
}

/* Contatori più discreti. */
html .fi-sidebar-item .fi-badge {
    font-weight: 500 !important;
    background-color: var(--ds-nav-active-bg, #F6F1FF) !important;
}

/* Focus da tastiera: anello visibile, mai al clic del mouse. */
html .fi-sidebar-item-button:focus-visible,
html .fi-sidebar-group-button:focus-visible,
html .fi-page-sub-navigation-tabs .fi-tabs-item:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring) !important;
}

/* Pill delle sotto-sezioni: default / hover / attiva. */
html:not(.dark) .fi-page-sub-navigation-tabs .fi-tabs-item {
    border-color: var(--ds-border) !important;
    background: var(--ds-surface) !important;
}

html:not(.dark) .fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-label {
    color: var(--ds-text-secondary) !important;
    font-weight: 500;
}

html:not(.dark) .fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    border-color: var(--ds-border-strong) !important;
    background: var(--ds-surface-hover) !important;
}

html:not(.dark) .fi-page-sub-navigation-tabs .fi-tabs-item:hover .fi-tabs-item-label {
    color: var(--ds-text-primary) !important;
}

html .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    border-color: var(--ds-auto-bd) !important;
    background: var(--ds-accent-soft) !important;
}

html .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--ds-accent-fg) !important;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    html .fi-sidebar-item-button,
    html .fi-ta-table > tbody > tr.fi-ta-row > td {
        transition: none !important;
    }
}

/* ── 6. Stati disegnati a mano: stessa palette dei badge ────────── */

/* Pill di stato delle campagne WhatsApp (whatsapp-tokens.css). */
html .jo-wa-campaign-status-pill { border: 1px solid transparent; }
html .jo-wa-campaign-status-pill--draft,
html .jo-wa-campaign-status-pill--cancelled { background: var(--ds-off-bg) !important;  color: var(--ds-off-fg) !important;  border-color: var(--ds-off-bd); }
html .jo-wa-campaign-status-pill--scheduled,
html .jo-wa-campaign-status-pill--sending   { background: var(--ds-info-bg) !important; color: var(--ds-info-fg) !important; border-color: var(--ds-info-bd); }
html .jo-wa-campaign-status-pill--sent      { background: var(--ds-ok-bg) !important;   color: var(--ds-ok-fg) !important;   border-color: var(--ds-ok-bd); }
html .jo-wa-campaign-status-pill--failed    { background: var(--ds-err-bg) !important;  color: var(--ds-err-fg) !important;  border-color: var(--ds-err-bd); }

/* Segnaposto delle select (Choices.js) come quelli dei campi. */
html:not(.dark) .choices__placeholder {
    color: var(--ds-text-placeholder) !important;
    opacity: 1 !important;
}

/* Pulsante WhatsApp della scheda ospite: verde del marchio scurito per
 * il testo bianco (5.4:1). */
html .jo-gp-btn--wa {
    background-color: #0E7A6D !important;
}

/* Anteprima messaggio WhatsApp vuota, sul fondo chat. */
html .jo-wa-template-preview__empty {
    color: #4A4A57 !important;
}

/* ── Sotto-sezioni = menu orizzontale (owner 15-ott-2026) ─────────────
 * Le sotto-sezioni sotto il titolo (cluster, ChannelNavigation, sub-
 * navigation di Filament) non sono più pill staccate, che sembravano
 * filtri: una barra di menu sola, larga quanto il contenuto, col bordo
 * delle card; le voci sono testo (e la loro icona, se c'è) e quella
 * attiva ha il testo viola e una linea viola sul bordo basso della barra.
 * I filtri rapidi (.jo-qf): stesso disegno del menu (in fondo al file), cambiano i dati, non la sezione.
 * Ultimo blocco del file: vince sulle regole delle pill in
 * joorna-refine.css e nei blocchi sopra. */
html body .fi-page-sub-navigation-tabs {
    display: flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100%;
    height: 46px;
    margin-inline: 0 !important;
    padding: 0 8px !important;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-rest) !important;
}

html body .fi-page-sub-navigation-tabs::-webkit-scrollbar {
    display: none;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item {
    position: relative;
    flex: 0 0 auto;
    height: auto !important;
    gap: 7px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-label {
    color: var(--ds-text-secondary) !important;
    font-size: 13.5px;
    font-weight: 500 !important;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item .fi-tabs-item-icon {
    width: 16px;
    height: 16px;
    color: var(--ds-text-tertiary) !important;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    background: var(--ds-surface-hover) !important;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item:hover .fi-tabs-item-label {
    color: var(--ds-text-primary) !important;
}

/* Voce attiva: testo viola e linea sul bordo basso, come nei menu delle app. */
html body .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    background: transparent !important;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ds-accent);
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html body .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--ds-accent-fg) !important;
    font-weight: 600 !important;
}

html body .fi-page-sub-navigation-tabs .fi-tabs-item:focus-visible {
    outline: none;
    box-shadow: inset var(--ds-focus-ring) !important;
}

/* Voce con sottovoci (es. Chatbot ▸ Addestra il chatbot): stessa altezza
   delle altre e una freccina che dice che si apre. */
html body .fi-page-sub-navigation-tabs > .fi-dropdown {
    display: flex;
    align-items: stretch;
}

/* Il trigger resta un blocco (in flex la tendina di Filament non si apre). */
html body .fi-page-sub-navigation-tabs > .fi-dropdown > .fi-dropdown-trigger {
    display: block !important;
    height: 100%;
}

html body .fi-page-sub-navigation-tabs > .fi-dropdown > .fi-dropdown-trigger > .fi-tabs-item {
    height: 100% !important;
}

html body .fi-page-sub-navigation-tabs > .fi-dropdown > .fi-dropdown-trigger > .fi-tabs-item::after {
    content: '';
    width: 10px;
    height: 10px;
    margin-left: 2px;
    background: currentColor;
    color: var(--ds-text-tertiary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 7.6a.75.75 0 0 1 1.06.04L10 11.69l3.74-4.05a.75.75 0 1 1 1.1 1.02l-4.3 4.65a.75.75 0 0 1-1.1 0l-4.3-4.65a.75.75 0 0 1 .06-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 7.6a.75.75 0 0 1 1.06.04L10 11.69l3.74-4.05a.75.75 0 1 1 1.1 1.02l-4.3 4.65a.75.75 0 0 1-1.1 0l-4.3-4.65a.75.75 0 0 1 .06-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sul telefono lo stesso menu, che scorre di lato, al posto della tendina. */
@media (max-width: 767.98px) {
    html body .fi-page-sub-navigation-select {
        display: none !important;
    }

    html body .fi-page-sub-navigation-tabs {
        height: 44px;
        padding: 0 4px !important;
    }

    html body .fi-page-sub-navigation-tabs .fi-tabs-item {
        padding: 0 11px !important;
    }
}

/* Da 768px la barra non taglia il pannello delle sottovoci: le voci ci
   stanno, lo scorrimento di lato serve solo sul telefono. */
@media (min-width: 768px) {
    html body .fi-page-sub-navigation-tabs {
        overflow: visible !important;
    }
}

/* ── Filtri rapidi (.jo-qf) come il menu orizzontale (owner 15-ott-2026) ──
 * "Più simili ai menu orizzontali, più semplici": voci di testo, la scelta in
 * viola con la linea sotto, niente pillole né bordi; il conteggio è un numero
 * piccolo tenue (lilla sulla voce scelta). Vale ovunque: barre delle tabelle,
 * Libreria immagini, Traffico e Ads, Attività del Preventivatore… */
html body .fi-tabs.jo-qf {
    gap: 2px !important;
}
html body .jo-qf .fi-tabs-item {
    position: relative;
    height: 34px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body .jo-qf .fi-tabs-item:hover {
    background: var(--ds-surface-hover) !important;
}
html body .jo-qf .fi-tabs-item .fi-tabs-item-label {
    font-size: 13.5px;
    font-weight: 500 !important;
    color: var(--ds-text-secondary) !important;
}
html body .jo-qf .fi-tabs-item .fi-tabs-item-icon {
    color: var(--ds-text-tertiary) !important;
}
html body .jo-qf .fi-tabs-item.fi-active {
    background: transparent !important;
}
html body .jo-qf .fi-tabs-item.fi-active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ds-accent);
}
html body .jo-qf .fi-tabs-item.fi-active .fi-tabs-item-label,
html body .jo-qf .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--ds-accent-fg) !important;
    font-weight: 600 !important;
}
html body .jo-qf .fi-badge {
    background: transparent !important;
    color: var(--ds-text-tertiary) !important;
    padding: 0 2px !important;
    font-weight: 500 !important;
}
html body .jo-qf .fi-tabs-item.fi-active .fi-badge {
    background: var(--ds-accent-soft) !important;
    color: var(--ds-accent-fg) !important;
    padding: 0 6px !important;
}
html body .jo-qf .fi-tabs-item:focus-visible {
    outline: none;
    box-shadow: inset var(--ds-focus-ring) !important;
}