/* Visual refinement Joorna — livello trasversale, caricato per ULTIMO.
 *
 * Non un redesign: la stessa interfaccia, più calma. Meno bianco uniforme
 * (fondo neutro, superfici bianche), meno bordi (ombre-filo al posto delle
 * cornici), meno colore (solo CTA primaria, stati e selezione), testate più
 * compatte, gerarchia tipografica su quattro livelli:
 *
 *   1 Titolo pagina   26px / 700      .fi-header-heading
 *   2 Titolo sezione  15px / 600      .fi-section-header-heading
 *   3 Testo operativo 13.5–14px / 400–500
 *   4 Secondario      12.5–13.5px, --jo-ui-muted (leggibile su bianco)
 *
 * Tutto per selettori Filament/Joorna già esistenti: nessun markup nuovo,
 * vale per ogni sezione e per quelle future. Il dark mode resta com'è
 * (regole di superficie solo in chiaro).
 */

:root {
    /* Fondo pagina appena più scuro delle superfici: le card si staccano senza cornici. */
    --jo-ui-page: var(--ds-bg-app);
    /* Sezione interna a una card: fondo dedicato, non un contorno. */
    --jo-ui-panel: var(--ds-surface-sunken);
    /* Secondario più leggibile su bianco. */
    --jo-ui-muted: var(--ds-text-tertiary);
    /* Contorno-ombra delle superfici: un filo, non una griglia. */
    --jo-ui-edge: 0 0 0 1px var(--ds-row-divider), var(--ds-shadow-rest);
    --jo-ui-divider: var(--ds-row-divider);
}

/* Il :root qui sopra viene dopo quello di joorna-standard.css: punta ai
 * token --ds-*, che cambiano da soli in dark. */

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

html:not(.dark) .fi-body {
    background-color: var(--jo-ui-page);
}

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

/* Card principali: bianche, filo + ombra minima al posto del bordo. */
html:not(.dark) .fi-section:not(.fi-section-not-contained):not(.fi-aside),
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-fo-tabs:not(.fi-contained-false),
html:not(.dark) .fi-in-tabs,
html:not(.dark) .fi-fo-wizard {
    box-shadow: var(--jo-ui-edge) !important;
    outline: 0;
}

/* Separatori interni più leggeri (testata di sezione, righe, footer). */
html:not(.dark) .fi-section-content-ctn,
html:not(.dark) .fi-section-footer,
html:not(.dark) .fi-ta-header-toolbar,
html:not(.dark) .fi-ta-filters-above-content-ctn,
html:not(.dark) .fi-ta-footer,
html:not(.dark) .fi-ta-content,
html:not(.dark) .fi-fo-tabs-tab-ctn,
html:not(.dark) .fi-fo-wizard > ol,
html:not(.dark) .fi-fo-wizard-header-step-separator {
    border-color: var(--jo-ui-divider) !important;
}

html:not(.dark) .fi-ta-ctn .fi-ta-table > tbody > tr.fi-ta-row,
html:not(.dark) .fi-ta-ctn .fi-ta-table > thead > tr,
html:not(.dark) .fi-ta-ctn .fi-ta-table {
    border-color: var(--jo-ui-divider);
}

.fi-ta-ctn .fi-ta-table > tbody > tr.fi-ta-row:hover {
    background-color: var(--ds-row-hover);
}

/* ── 4. Niente card dentro card ──────────────────────────────
 * Dentro una sezione i riquadri (KPI, tessere con bordo) diventano zone a
 * fondo tenue, senza cornice né ombra. */
html:not(.dark) .fi-section .fi-wi-stats-overview-stat,
html:not(.dark) .fi-section .fi-section-content .border.rounded-xl,
html:not(.dark) .fi-section .fi-section-content .border.rounded-lg.p-4 {
    border-color: transparent !important;
    background-color: var(--ds-surface-sunken) !important;
    box-shadow: none !important;
}

/* Sezione dentro una card: un pannello a fondo tenue con il suo titolo,
 * non un secondo riquadro a contorno grigio. */
html:not(.dark) .fi-section .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    background: var(--jo-ui-panel) !important;
    box-shadow: none !important;
}

html:not(.dark) .fi-section .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn {
    border-top-color: transparent !important;
}

/* ── 5. Testate e toolbar compatte ───────────────────────── */

.fi-page > section {
    row-gap: 1.25rem !important;
    /* Margini della pagina dimezzati (owner 9-ott-2026): sopra 10px, sotto 16px. */
    padding-top: 0.625rem !important;
    padding-bottom: 1rem !important;
}

/* Margini ai lati della pagina dimezzati (owner 9-ott-2026): 8 / 12 / 16px. */
.fi-main {
    padding-inline: 0.5rem !important;
}
@media (min-width: 768px) {
    .fi-main { padding-inline: 0.75rem !important; }
}
@media (min-width: 1024px) {
    .fi-main { padding-inline: 1rem !important; }
}

/* Stesso passo verticale anche dentro il contenuto: testata → KPI → pill →
   tabella sempre 20px (il contenitore di Filament ne metteva 32 fra KPI,
   pill e tabella, e 20 solo dopo il titolo). */
.fi-page > section > .flex.flex-col,
.fi-page > section > div > .flex.flex-col.gap-y-4,
.fi-page > section > div > .grid.auto-cols-fr {
    row-gap: 1.25rem !important;
}

.fi-header {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 0.75rem 1.5rem !important;
}

/* Azioni sempre in alto a destra, sulla riga del titolo: la descrizione va
 * a capo pur di lasciarle lì. Solo se il titolo scenderebbe sotto 20rem
 * (molte azioni, schermo stretto) le azioni vanno a capo (a destra). */
/* Solo da sm in su: sotto i 640px la testata è in colonna e la base
 * diventava ALTEZZA, lasciando un vuoto sotto il titolo. */
@media (min-width: 640px) {
    .fi-header > div:first-child {
        flex: 1 1 20rem;
    }
}

.fi-header > div:first-child {
    min-width: 0;
}

.fi-header > div:last-child {
    margin-left: auto;
}

.fi-breadcrumbs {
    margin-bottom: 2px;
}

.fi-breadcrumbs-item-label {
    font-size: 12.5px !important;
}

.fi-header-heading {
    font-size: 1.625rem !important;
    line-height: 2rem !important;
    letter-spacing: -0.015em;
}

.fi-header-subheading,
.jo-page-desc {
    max-width: 46rem !important;
    margin-top: 4px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--jo-ui-muted) !important;
}

/* Sotto-sezioni di un'area (es. Lead ▸ Pipeline lead · Richieste dai form ·
 * Chiavi API…): pill compatte sotto il titolo, stesso disegno dei filtri
 * rapidi di Segmenti (.jo-qf). Le pill cambiano SOTTO-SEZIONE; i dati si
 * filtrano nelle intestazioni di colonna, mai con una seconda riga di pill. */
.fi-page-sub-navigation-tabs {
    gap: 6px !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 13px !important;
    border: 1px solid var(--jo-ui-line);
    border-radius: 999px !important;
    background: var(--jo-ui-surface) !important;
    font-size: 12.5px;
    white-space: nowrap;
}

.fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    background: var(--jo-ui-soft) !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item-label {
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.fi-page-sub-navigation-tabs .fi-tabs-item-icon {
    width: 15px;
    height: 15px;
    color: var(--jo-ui-muted);
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active {
    border-color: color-mix(in srgb, var(--jo-ui-accent) 35%, transparent);
    background: var(--jo-ui-accent-soft) !important;
    box-shadow: none;
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--jo-ui-accent);
}

.fi-page-sub-navigation-tabs .fi-badge {
    border-radius: 999px;
    font-size: 11px;
}

.fi-ta-header-toolbar {
    padding-block: 10px !important;
}

.fi-section-header {
    padding-block: 14px !important;
}

.fi-section-header-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.fi-section-header-description {
    font-size: 13px !important;
    color: var(--jo-ui-muted) !important;
}

/* ── 2/3. Meno colore: pulsanti success/info/warning neutri, in
 * public/css/actions.css. */

/* KPI: la descrizione è un'informazione secondaria — testo neutro, il
 * colore resta solo sull'icona (che dice tendenza/stato). */
span.fi-wi-stats-overview-stat-description {
    color: var(--jo-ui-muted) !important;
}

/* Badge: niente cornice, solo la tinta tenue. */
.fi-badge {
    --tw-ring-color: transparent !important;
}

/* ── 3. Tag e chip ───────────────────────────────────────────
 * Profilazione: chip leggero, ancora riconoscibile ma non viola pieno.
 * Lingua: semplice testo. */
html:not(.dark) .jo-q-tag {
    background: var(--ds-accent-soft);
    color: var(--ds-accent-fg);
}

.jo-q-chip {
    padding: 0 !important;
    border: 0 !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── 12. Empty state compatti ──────────────────────────────── */

.fi-ta-empty-state {
    padding-block: 2rem !important;
}

.fi-ta-empty-state-icon-ctn {
    margin-bottom: 0.75rem !important;
    background: var(--jo-ui-soft) !important;
}

.fi-ta-empty-state-heading {
    font-size: 15px !important;
}

.fi-ta-empty-state-description {
    max-width: 34rem;
    font-size: 13px !important;
    color: var(--jo-ui-muted) !important;
}

/* ── Riquadri KPI "single-stat" (Campagne, Automazioni, Dashboard…) ──
 * Erano tessere a tinta piena (blu, verde, viola, giallo): ora superfici
 * bianche come le altre, numero in evidenza, il colore solo sull'icona. */
.jo-single-stat {
    /* Stesso padding dei KPI standard (--jo-kpi-pad, ui-standard.css). */
    padding: var(--jo-kpi-pad) !important;
    border-color: transparent !important;
    background: var(--jo-ui-surface) !important;
    box-shadow: var(--jo-ui-edge) !important;
}

.jo-single-stat dt {
    opacity: 1 !important;
    font-size: 13px !important;
    color: var(--jo-ui-muted) !important;
}

.jo-single-stat dd {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    color: var(--jo-ui-ink) !important;
}

.jo-single-stat dd + div {
    margin-top: 2px !important;
    font-size: 12.5px !important;
    color: var(--jo-ui-muted) !important;
}

.jo-single-stat .flex-shrink-0 svg {
    width: 28px !important;
    height: 28px !important;
}

.jo-single-stat .flex-shrink-0.opacity-30 {
    opacity: 0.55 !important;
}

/* Sidebar: modulo da attivare (owner 15-ott-2026: "più evidente"). Il
 * badge ambra è solo dei moduli (GatedByModule): pillola ambra tenue con
 * un piccolo lucchetto, e il nome della voce un tono più chiaro, così si
 * vede subito che la sezione c'è ma va attivata. Al passaggio torna pieno. */
.fi-sidebar .fi-sidebar-item .fi-badge.fi-color-warning {
    position: relative;
    padding-left: 19px !important;
    background-color: var(--ds-warn-bg) !important;
    color: var(--ds-warn-fg) !important;
    box-shadow: inset 0 0 0 1px var(--ds-warn-bd) !important;
    font-weight: 600 !important;
}
.fi-sidebar .fi-sidebar-item .fi-badge.fi-color-warning::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translateY(-50%);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%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 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fi-sidebar .fi-sidebar-item:has(.fi-badge.fi-color-warning):not(:hover) .fi-sidebar-item-label {
    color: var(--ds-text-tertiary) !important;
}
/* La pillola è più larga: il nome si stringe (coi puntini), mai la riga che sborda. */
.fi-sidebar .fi-sidebar-item:has(.fi-badge.fi-color-warning) .fi-sidebar-item-label {
    min-width: 0;
}


/* ── Gerarchia delle superfici (raffinamento 2) ──────────────────────
 * pagina (grigio morbido) → card (bianca, ombra-filo) → testata della card
 * (appena velata) → pannelli interni (fondo tenue) → campi (bianchi, bordo
 * leggibile). Il viola resta per CTA, selezione e focus. */

/* Testata delle card: una velatura leggerissima la stacca dal contenuto. */
html:not(.dark) .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.jo-qb):not(.jo-psec) > .fi-section-header {
    background: var(--ds-surface-sunken);
    border-radius: 12px 12px 0 0;
}

html:not(.dark) .fi-section.fi-collapsed:not(.jo-qb):not(.jo-psec) > .fi-section-header {
    border-radius: 12px;
}

.fi-section:not(.jo-qb):not(.jo-psec) > .fi-section-header.cursor-pointer {
    transition: background-color .15s ease;
}

html:not(.dark) .fi-section:not(.fi-section-not-contained):not(.fi-aside):not(.jo-qb):not(.jo-psec) > .fi-section-header.cursor-pointer:hover {
    background: var(--jo-ui-panel, var(--ds-surface-sunken));
}

html:not(.dark) .fi-section .fi-section > .fi-section-header {
    background: transparent !important;
}

/* Fieldset: da riquadro con bordo a pannello con etichetta. */
html:not(.dark) .fi-fieldset {
    border-color: transparent !important;
    background: var(--jo-ui-panel);
}

.fi-fieldset > legend {
    padding: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--jo-ui-ink);
    transform: translateY(1.1rem);
}

.fi-fieldset {
    padding-top: 2.4rem !important;
}

/* Campi: bianchi con un bordo leggibile, anche sui pannelli tenui. La
   select dentro un .fi-input-wrp resta trasparente: il bianco lo dà già il
   contenitore, e il suo fondo quadrato copriva il bordo arrotondato a
   destra (es. "per pagina" della paginazione). */
html:not(.dark) .fi-input-wrp,
html:not(.dark) .fi-select-input:not(.fi-input-wrp .fi-select-input),
html:not(.dark) .fi-fo-tags-input,
html:not(.dark) .fi-fo-textarea {
    background-color: var(--ds-surface);
}

html:not(.dark) .fi-input-wrp:not(:focus-within) {
    --tw-ring-color: var(--ds-border) !important;
}

/* Elementi di una lista (repeater): card bianche con ombra-filo. */
html:not(.dark) .fi-fo-repeater-item {
    background: var(--ds-surface) !important;
    box-shadow: 0 0 0 1px var(--ds-row-divider), var(--ds-shadow-rest) !important;
}

html:not(.dark) .fi-fo-repeater-item-header {
    background: var(--ds-surface-sunken);
    border-radius: 12px 12px 0 0;
}

/* Il viola con misura: badge "primary" tenui, link e selezione sì. */
html:not(.dark) .fi-badge.fi-color-primary {
    background: var(--jo-ui-accent-soft) !important;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button {
    background: rgb(124 92 203 / 6%);
}

/* Conteggio nella pill attiva (sotto-sezioni e filtri .jo-qf): vince sul
 * colore primario generico dei badge, altrimenti bianco su viola chiaro. */
html .jo-qf .fi-tabs-item.fi-active .fi-badge,
html .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-badge {
    background: var(--jo-ui-accent) !important;
    color: #fff !important;
}

/* Analytics: ultima voce del menu come voce singola. È un gruppo a sé (per
 * stare dopo Amministrazione: le voci senza gruppo Filament le mette in cima)
 * con la testata nascosta, così non si legge "Analytics" due volte. */
.fi-sidebar-group[data-group-label="Analytics"] > .fi-sidebar-group-button {
    display: none;
}