/*
 * Standard dei form JOORNA (creazione, modifica, impostazioni, step dei
 * builder). Card e griglia da App\Filament\Support\FormCards + FormGrid
 * (classe .jo-fcard sulle card). Caricato dopo design-system.css.
 *
 * pagina (fondo neutro) → card bianca con testata lilla bassa → campi su
 * più colonne, larghi quanto il dato; controlli tutti uguali (34px, radius
 * 8px, stessa tipografia, stessi stati). Viola pieno solo per CTA e stati
 * attivi.
 */

/* ── Card ───────────────────────────────────────────────── */

html .fi-section.jo-fcard {
    background: var(--ds-surface, #FFFFFF);
    overflow: visible;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html .fi-section.jo-fcard > .fi-section-header {
    min-height: 44px;
    padding: 9px 16px !important;
    gap: 10px;
    /* Testata neutra (standard: il lilla è solo un accento), filetto sotto. */
    background: transparent !important;
    border-bottom: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC)) !important;
    border-radius: 10px 10px 0 0 !important;
}

html .fi-section.jo-fcard.fi-collapsed > .fi-section-header {
    border-bottom-color: transparent !important;
    border-radius: var(--ds-radius-card, 12px) !important;
}

html .fi-section.jo-fcard > .fi-section-header.cursor-pointer:hover {
    background: var(--ds-row-hover, #F6F2FD) !important;
}

html .fi-section.jo-fcard > .fi-section-header .fi-section-header-heading {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text-primary, #18181B) !important;
}

html .fi-section.jo-fcard > .fi-section-header .fi-section-header-description {
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.4;
}

html .fi-section.jo-fcard > .fi-section-header .fi-icon-btn {
    color: var(--ds-accent-fg, #6A4BB5);
}

html .fi-section.jo-fcard > .fi-section-content-ctn {
    border-top: 0 !important;
}

html .fi-section.jo-fcard > .fi-section-content-ctn > .fi-section-content {
    padding: 14px 16px 16px !important;
}

/* La griglia JOORNA segue la larghezza della card, non della finestra: in
   una card stretta (modale, tablet, colonna centrale di un form a ancore) 6
   colonne con gli span "md" di FormGrid, sotto i 380px una colonna. Solo la
   griglia diretta delle card .jo-fcard-dense: le griglie scritte a mano
   dentro restano come sono. */
html .fi-section.jo-fcard-dense > .fi-section-content-ctn > .fi-section-content {
    container: jo-fcard / inline-size;
}

@container jo-fcard (max-width: 720px) {
    .fi-section-content > .fi-fo-component-ctn {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .fi-section-content > .fi-fo-component-ctn > div {
        grid-column: var(--col-span-md, 1 / -1) !important;
    }
}

/* Card molto strette: un terzo torna a metà, per restare leggibile. */
@container jo-fcard (max-width: 520px) {
    .fi-section-content > .fi-fo-component-ctn > [style*="--col-span-md: span 2"] {
        grid-column: span 3 / span 3 !important;
    }
}

@container jo-fcard (max-width: 380px) {
    .fi-section-content > .fi-fo-component-ctn {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .fi-section-content > .fi-fo-component-ctn > div {
        grid-column: 1 / -1 !important;
    }
}

/* Dentro le liste (proposte, azioni, servizi…) lo stesso passo stretto. */
html .fi-section.jo-fcard .fi-fo-repeater-item .fi-fo-component-ctn {
    gap: 12px 14px;
}

/* Preventivo: le schede "Proposta 1 | 2" ci sono solo con due proposte;
   con una sola non lasciano una fascia vuota sopra la proposta. */
html .jo-psel > .fi-fo-component-ctn {
    row-gap: 0;
}

/* Campi vicini ma leggibili: 12px fra le righe, 14px fra le colonne. */
html .fi-section.jo-fcard > .fi-section-content-ctn > .fi-section-content > .fi-fo-component-ctn,
html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-content-ctn > .fi-section-content > .fi-fo-component-ctn {
    gap: 12px 14px;
}

/* Card in fila: lo stesso passo dei campi, non quello di pagina. */
.fi-fo-component-ctn:has(> * > .fi-section.jo-fcard) {
    row-gap: 14px;
}

/* ── Campi: label piccola, subito sopra il controllo ───── */

.fi-fo-field-wrp > .grid {
    row-gap: 4px;
}

.fi-fo-field-wrp-label > span {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

/* Campi affiancati: etichetta su una riga (puntini, testo intero al
   passaggio da ui-standard.js), così i controlli della stessa riga partono
   alla stessa altezza. Non le etichette accanto a una casella/interruttore. */
@media (min-width: 768px) {
    .fi-fo-field-wrp-label:not(:has(input, button)) {
        min-width: 0;
        max-width: 100%;
    }

    .fi-fo-field-wrp-label:not(:has(input, button)) > span {
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

html:not(.dark) .fi-fo-field-wrp-label > span {
    color: var(--ds-text-secondary, #3F3F46);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    font-size: 12px;
    line-height: 1.4;
}

.fi-fo-field-wrp-error-message {
    font-size: 12px;
}

/* ── Controlli: stessa altezza, radius, tipografia, stati ── */

.fi-input-wrp,
.fi-fo-textarea,
.fi-fo-tags-input,
.fi-fo-select .choices__inner {
    border-radius: var(--ds-radius-control, 8px) !important;
}

.fi-input-wrp {
    min-height: 34px;
}

.fi-input,
.fi-select-input,
.fi-fo-date-time-picker-display-text-input {
    font-size: 13.5px;
    line-height: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.fi-fo-select .choices__inner {
    min-height: 34px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13.5px;
}

/* Select a voce singola alta come gli altri campi (34px): il valore era un
   inline-block sulla linea di base e allungava il controllo a 39-40px. */
.fi-fo-select .choices__inner:has(> .choices__list--single) {
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.fi-fo-select .choices__list--single {
    display: block;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 20px;
}

/* Interruttori sulla linea dei controlli accanto: centrati sui 34px del
   campo vicino, non attaccati in alto. */
.fi-fo-field-wrp .grid:has(> .fi-fo-toggle) {
    min-height: 34px;
    align-content: center;
}

/* Select con una voce lunga: una riga con i puntini, non due righe. */
.fi-fo-select .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--ds-accent, #7C5CCB) !important;
}

/* ── Card annidate (es. "Più dettagli"): riga discreta ── */

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) {
    box-shadow: none !important;
    border: 1px solid var(--ds-row-divider, #EEF0F4) !important;
    border-radius: var(--ds-radius-control, 8px) !important;
    background: var(--ds-surface-sunken, #F8F9FB);
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-header {
    padding: 8px 12px;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-content-ctn > .fi-section-content {
    padding: 10px 12px 12px;
}

/* Terzo livello (un blocco dentro un blocco della card): niente terzo
   riquadro, solo il titolo del gruppo e i campi, separati da un filetto. */
html .fi-section.jo-fcard .fi-section:not(.jo-fcard) .fi-section:not(.jo-fcard) {
    border: 0 !important;
    border-top: 1px solid var(--ds-row-divider, #EEF0F4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) .fi-section:not(.jo-fcard) > .fi-section-header {
    padding: 10px 0 4px;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) .fi-section:not(.jo-fcard) > .fi-section-content-ctn > .fi-section-content {
    padding: 6px 0 4px;
}

/* ── Card-passo dei form di creazione e modifica (.jo-fstep) ──
 * FormCards::isStep + public/js/form-steps.js: numerate 01, 02… lungo una
 * linea sottilissima, una aperta alla volta. Righe chiuse sottili (numero →
 * titolo → riepilogo → stato → chevron), il colore è solo un accento:
 * aperta = bordo lilla leggero "○ In compilazione"; completa = verde
 * tenue "✓ Completato"; altrimenti neutra "● Da compilare". Token
 * --ds-step-* in joorna-tokens.css (chiaro e dark). */

/* Passo stretto fra le card, anche quando stanno in gruppi diversi. */
.fi-form > .fi-fo-component-ctn:has(.fi-section.jo-fstep),
.fi-form > .fi-fo-component-ctn:has(.fi-section.jo-fstep) .fi-fo-component-ctn:has(> * > .fi-section.jo-fstep) {
    row-gap: 8px;
}

/* Le card-passo stanno sempre una sotto l'altra, 01, 02, 03…: una griglia
   di layout che le affiancava (contenuto + colonna laterale) diventa una
   colonna sola, anche nei gruppi annidati e nei form scritti a mano
   (es. Scheda ospite, form.jo-gs-form). */
:is(.fi-form, form) .fi-fo-component-ctn:has(> div .fi-section.jo-fstep) {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
}

:is(.fi-form, form) .fi-fo-component-ctn:has(> div .fi-section.jo-fstep) > div {
    grid-column: 1 / -1 !important;
}

/* Una numerazione per form (anche attraverso i gruppi di layout e nei form
   scritti a mano, es. Scheda lead: senza un azzeramento in comune ogni
   passo annidato ripartiva da 01). */
form:has(.fi-section.jo-fstep),
.fi-form > .fi-fo-component-ctn,
.jo-fsteps {
    counter-reset: jo-fstep;
}

html .fi-section.jo-fstep {
    position: relative;
    overflow: visible;
    counter-increment: jo-fstep;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Riga sottile: niente fascia colorata, solo un filetto sotto quando è aperta. */
html .fi-section.jo-fstep > .fi-section-header {
    position: relative;
    min-height: 46px;
    padding: 8px 14px 8px 52px !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

html .fi-section.jo-fstep:not(.fi-collapsed) > .fi-section-header {
    border-bottom: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC)) !important;
}

/* Il numero: piccolo cerchio outline, tipografia regolare. */
html .fi-section.jo-fstep > .fi-section-header::before {
    content: counter(jo-fstep, decimal-leading-zero);
    position: absolute;
    left: 15px;
    top: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ds-step-todo-ring, #CDD1DA);
    background: var(--ds-surface, #FFFFFF);
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 3px var(--ds-surface, #FFFFFF);
}

/* La linea che collega i numeri, fino al cerchio della card dopo. */
html .fi-section.jo-fstep::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 28px;
    top: 37px;
    bottom: -19px;
    width: 1px;
    background: var(--ds-border, #E4E6EC);
    pointer-events: none;
}

/* Card aperta: la linea riprende solo sotto, nello spazio fra le card. */
html .fi-section.jo-fstep:not(.fi-collapsed)::after {
    top: auto;
    height: 19px;
}

/* Dopo l'ultima card la linea si ferma (form-steps.js la segna). */
.fi-section.jo-fstep.jo-fstep-last::after {
    display: none;
}

/* Card di una tab di modifica (FormCards::isPlainStep, es. Scheda hotel):
   impostazioni contestuali all'area, non passi: accordion e riepilogo,
   senza numero, linea né stato. */
html .fi-section.jo-fstep.jo-fstep-plain > .fi-section-header {
    padding-left: 14px !important;
}

html .fi-section.jo-fstep.jo-fstep-plain > .fi-section-header::before,
html .fi-section.jo-fstep.jo-fstep-plain::after {
    display: none !important;
}

/* Impostazioni a sé stanti, non un percorso: niente badge di stato e
   niente fondo "completato"; restano accordion e riepilogo da chiusa. */
html .fi-section.jo-fstep.jo-fstep-plain .jo-fstep-badge {
    display: none !important;
}

html .fi-section.jo-fstep.jo-fstep-plain[data-jo-state] {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
}

html .fi-section.jo-fstep.jo-fstep-plain[data-jo-state="current"] {
    border-color: var(--ds-step-current-bd, #DCD1F4) !important;
}

/* Il numero fa già da segno: niente icona della card accanto. */
html .fi-section.jo-fstep > .fi-section-header .fi-section-header-icon {
    display: none;
}

/* Titolo e stato sulla stessa riga. */
html .fi-section.jo-fstep .fi-section-header-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

html .fi-section.jo-fstep .fi-section-header-description {
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ds-text-tertiary, #5B5B6B);
}

/* Stato: testo piccolo con un segno, senza pillola piena. */
.jo-fstep-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--ds-radius-pill, 999px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.jo-fstep-badge[hidden] {
    display: none;
}

/* Da compilare: pallino neutro. */
.jo-fstep-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-off-dot, #8A8A99);
    opacity: .7;
}

/* In compilazione: cerchio vuoto lilla. */
.jo-fstep-badge[data-state="current"] {
    border-color: var(--ds-step-current-bd, #DCD1F4);
    color: var(--ds-accent-fg, #6A4BB5);
}

.jo-fstep-badge[data-state="current"]::before {
    width: 7px;
    height: 7px;
    background: transparent;
    border: 1.5px solid currentColor;
    opacity: 1;
}

/* Completato: spunta verde tenue. */
.jo-fstep-badge[data-state="done"] {
    border-color: var(--ds-step-done-bd, #D3EBDD);
    color: var(--ds-step-done-fg, #2E7A50);
}

.jo-fstep-badge[data-state="done"]::before {
    content: "✓";
    width: auto;
    height: auto;
    border: 0;
    background: none;
    opacity: 1;
    font-size: 11px;
    font-weight: 700;
}

/* Riepilogo: solo da chiusa, al posto della descrizione, una riga. */
.jo-fstep-summary {
    display: none;
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--ds-text-secondary, #3F3F46);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html .fi-section.jo-fstep.fi-collapsed.jo-fstep-has-summary .jo-fstep-summary {
    display: block;
}

html .fi-section.jo-fstep.fi-collapsed.jo-fstep-has-summary .fi-section-header-description {
    display: none;
}

/* Stati della card: il colore solo su bordo e numero. */
html .fi-section.jo-fstep[data-jo-state="todo"],
html .fi-section.jo-fstep[data-jo-state="info"] {
    background: var(--ds-surface, #FFFFFF) !important;
}

html .fi-section.jo-fstep[data-jo-state="current"] {
    background: var(--ds-surface, #FFFFFF) !important;
    border-color: var(--ds-step-current-bd, #DCD1F4) !important;
}

html .fi-section.jo-fstep[data-jo-state="current"] > .fi-section-header::before {
    border-color: var(--ds-accent, #7C5CCB);
    color: var(--ds-accent-fg, #6A4BB5);
}

html .fi-section.jo-fstep[data-jo-state="done"] {
    background: var(--ds-step-done-bg, #F7FBF8) !important;
    border-color: var(--ds-step-done-bd, #D3EBDD) !important;
}

html .fi-section.jo-fstep[data-jo-state="done"] > .fi-section-header::before {
    border-color: var(--ds-step-done-ring, #9FD3B5);
    color: var(--ds-step-done-fg, #2E7A50);
}

/* Sezioni interne di una card-passo: piccole sezioni, mai una card nella
   card — titolo discreto e filetto, niente riquadro grigio. */
html .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-section-not-contained) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard):not(:first-child) {
    border-top: 1px solid var(--ds-row-divider, #EEF0F4) !important;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-header {
    padding: 10px 0 2px !important;
    background: transparent !important;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-header .fi-section-header-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary, #3F3F46);
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-content-ctn > .fi-section-content {
    padding: 8px 0 10px !important;
}

@media (max-width: 640px) {
    html .fi-section.jo-fstep > .fi-section-header {
        padding-left: 46px !important;
    }

    html .fi-section.jo-fstep > .fi-section-header::before {
        left: 11px;
        width: 24px;
        height: 24px;
    }

    html .fi-section.jo-fstep::after {
        left: 23px;
    }

    html .fi-section.jo-fstep:not(.jo-fstep-plain) > .fi-section-content-ctn > .fi-section-content {
        padding-left: 14px;
    }
}

/* ── Azioni del form: piede fisso, Annulla a sinistra, CTA a destra ── */

:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-form-actions .fi-ac {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-form-actions .fi-ac > button:last-child,
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-form-actions .fi-ac > a:last-child,
:is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-form-actions .fi-ac > div:last-child {
    margin-right: auto;
}

/* Piede fisso largo come le card del contenuto (owner 21-ott-2026): Filament
   lo allarga di 16px per lato (-mx-4) e sbordava dalla colonna. Sul telefono
   resta a tutta larghezza (mobile.css). */
@media (min-width: 768px) {
    html .fi-form-actions.fi-sticky {
        margin-inline: 0;
    }
}

/* ── Impostazioni decise dal gruppo o da Joorna (components/jo/group-managed)
 * Nota compatta: chi decide, cosa (testo semplice, dettagli nel tooltip),
 * dove si cambia. */
.jo-gm {
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-surface-sunken, #F1F2F5);
    font-size: 13px;
}

.jo-gm-block {
    padding: 10px 12px;
}

.jo-gm-block + .jo-gm-block {
    border-top: 1px solid var(--ds-row-divider, #E6E8ED);
}

.jo-gm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-gm-head b {
    color: var(--ds-text-primary, #18181B);
    font-weight: 600;
}

.jo-gm-lock {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-gm-link {
    margin-left: auto;
    color: var(--ds-text-link, #5F45A8);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.jo-gm-link:hover {
    text-decoration: underline;
}

.jo-gm-items {
    margin: 4px 0 0 22px;
    line-height: 1.6;
    padding: 0;
    list-style: none;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 12.5px;
}

.jo-gm-items li {
    display: inline;
    cursor: help;
}

.jo-gm-items li:not(:last-child)::after {
    content: ", ";
}

.jo-gm-value {
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-gm-note {
    margin: 4px 0 0 22px;
    overflow: hidden;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── Wizard (es. "Crea con AI" dei modelli email): passi in colonna ──
 * Come le card-passo: 1, 2, 3, 4 uno sotto l'altro lungo una linea
 * sottile, a sinistra del contenuto del passo; mai la fila orizzontale di
 * Filament. Passo attivo lilla, fatti con la spunta. Su schermi stretti i
 * passi restano in colonna sopra il contenuto. */
.fi-fo-wizard:has(> .fi-fo-wizard-header) {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
}

.fi-fo-wizard > .fi-fo-wizard-header {
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: 1 / span 40;
    display: flex !important;
    flex-direction: column;
    padding: 6px 0;
    overflow: visible !important;
    border: 1px solid var(--ds-border, #D4D8E0);
    border-radius: var(--ds-radius-card, 12px);
    background: var(--ds-surface-sunken, #EDEFF3);
}

.fi-fo-wizard > :not(.fi-fo-wizard-header) {
    grid-column: 2;
    min-width: 0;
}

.fi-fo-wizard > .fi-fo-wizard-header > li {
    border: 0 !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step-separator {
    display: none !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step-button {
    width: 100%;
    gap: 10px !important;
    padding: 8px 14px !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step-icon-ctn {
    width: 28px !important;
    height: 28px !important;
}

/* Passi non ancora fatti: cerchio chiaro (quelli fatti restano pieni con la spunta). */
.fi-fo-wizard .fi-fo-wizard-header-step-icon-ctn:not([class*="bg-primary"]) {
    background: var(--ds-surface, #F6F7F9);
}

.fi-fo-wizard .fi-fo-wizard-header-step-indicator {
    font-size: 12px !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step-icon {
    width: 15px !important;
    height: 15px !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step-label {
    font-size: 13px !important;
}

.fi-fo-wizard .fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-button {
    background: var(--ds-accent-soft, #F3EEFC);
}

/* La linea che unisce i passi, dal cerchio di uno al successivo. */
.fi-fo-wizard > .fi-fo-wizard-header > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    bottom: -6px;
    left: 27.5px;
    width: 1px;
    background: var(--ds-border, #D4D8E0);
    pointer-events: none;
}

@media (max-width: 640px) {
    .fi-fo-wizard:has(> .fi-fo-wizard-header) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }

    .fi-fo-wizard > .fi-fo-wizard-header {
        position: static;
        grid-row: auto;
    }

    .fi-fo-wizard > :not(.fi-fo-wizard-header) {
        grid-column: 1;
    }
}

/* ── Biglietto da visita della Scheda hotel, gruppo e struttura ──────────
 * (owner 8-ott-2026, resources/views/filament/group/structure-preview.blade.php):
 * il disegno della scheda contatto (.jo-qh-req + .jo-ctc, a 390px una riga);
 * qui copertina, logo e la tenuta in alto: il riquadro sta in un campo del
 * form, quindi a restare fermo è la sua cella nella griglia del form. */
/* Catena di figli diretti (markup del field-wrapper di Filament): con il
   discendente Chrome scandiva il sottoalbero di ogni div della pagina. */
.fi-fo-component-ctn > div:has(> .fi-fo-field-wrp > .grid > .grid > .fi-fo-placeholder > [data-jo-hotel-card]) {
    position: sticky;
    top: calc(var(--jo-topbar-h, 64px) + 8px);
    z-index: 15; /* sotto la topbar (20) e il menu della ricerca, come .jo-qh-req */
}

.jo-hcard { position: static; margin-bottom: 0; }
.jo-hcard .jo-ctc-head { align-items: center; }

.jo-hcard-cover {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 72px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent, #7C5CCB);
}

.jo-hcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.jo-hcard-cover svg { width: 20px; height: 20px; }
.jo-hcard-logo { width: 20px; height: 20px; flex-shrink: 0; border-radius: 4px; object-fit: contain; }
.jo-hcard-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--ds-text-link, #5F45A8); }
.jo-hcard-link svg { width: 13px; height: 13px; }
.jo-hcard-fact { white-space: nowrap; }

@media (max-width: 640px) {
    .jo-hcard .jo-hcard-cover,
    .jo-hcard:not(.is-open) .jo-hcard-fact { display: none; }
}

/* ── Standard rapido dei form (owner 1-ott-2026): meno rumore ───────────
 * Sezioni interne di una card: niente icone decorative, descrizione breve
 * (al massimo due righe), testi d'aiuto piccoli. Dentro uno step nessun
 * altro numero: la numerazione è solo dei passi principali. */
html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-header .fi-section-header-icon {
    display: none;
}

html .fi-section.jo-fcard .fi-section:not(.jo-fcard) > .fi-section-header .fi-section-header-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.fi-fo-field-wrp-helper-text {
    font-size: 12px !important;
    line-height: 1.4;
    color: var(--ds-text-tertiary, #5B5B6B) !important;
}

html .fi-section.jo-fstep .fi-section.jo-fstep > .fi-section-header::before,
html .fi-section.jo-fstep .fi-section.jo-fstep::after {
    display: none !important;
}

html .fi-section.jo-fstep .fi-section.jo-fstep > .fi-section-header {
    padding-left: 14px !important;
}

/* ── Infopoint "i" (hint.blade.php di field-wrapper / entry-wrapper) ──
   Minimal: un piccolo "i" outline subito accanto all'etichetta, tenue,
   che si accende al passaggio; tooltip compatto scuro a contrasto. */

/* La riga dell'etichetta del field-wrapper (flex items-center gap-x-3). */
.gap-x-3:has(> .jo-info-hint:not(.jo-info-hint--with)):not(.justify-end) {
    justify-content: flex-start;
    column-gap: 4px;
}

.jo-info-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* Icona da 18px (era 14, owner 12-ott-2026: "piccolissima"); il margine
   negativo tiene la riga dell'etichetta alta come prima. */
.jo-info {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: -4px 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ds-text-placeholder, #6B6B7B);
    cursor: help;
    transition: color .15s, background-color .15s;
}

.jo-info-icon {
    width: 18px;
    height: 18px;
}

.jo-info:hover,
.jo-info[aria-expanded="true"] {
    color: var(--ds-accent, #7C5CCB);
    background: var(--ds-accent-soft, #F3EEFC);
}

.jo-info:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

.tippy-box[data-theme~='jo-info'] {
    background: var(--ds-tooltip-bg);
    color: var(--ds-tooltip-fg);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    border-radius: 8px;
    box-shadow: 0 6px 20px -6px rgb(15 17 23 / .35);
}

.tippy-box[data-theme~='jo-info'] > .tippy-content {
    padding: 7px 10px;
}

.tippy-box[data-theme~='jo-info'] > .tippy-arrow {
    color: var(--ds-tooltip-bg);
}

/* ── Accordion dentro le card e fuori dallo standard dei form (owner
 * 5-ott-2026: "rendiamoli così in tutta la piattaforma") ──
 * Ogni sezione chiudibile che non è una card-passo (sezioni espandibili
 * dentro una card: segmenti, chatbot della struttura, filtri avanzati; e le
 * sezioni chiudibili delle pagine scritte a mano) ha lo stesso disegno degli
 * accordion delle schede e del dettaglio del Preventivatore, solo più
 * compatto: card con bordo e ombra di riposo, testata con l'icona in una
 * tessera lilla tenue (se la sezione ne ha una), titolo 600, descrizione di
 * una riga, freccia a destra; al passaggio si solleva; aperta = bordo lilla,
 * testata lilla tenue e un filetto sotto. Mai numeri. */
html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]),
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) {
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-rest) !important;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]).fi-collapsed:hover,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]).fi-collapsed:hover {
    border-color: var(--ds-border-strong) !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]):not(.fi-collapsed),
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]):not(.fi-collapsed) {
    border-color: var(--ds-step-current-bd) !important;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]) > .fi-section-header,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) > .fi-section-header {
    min-height: 50px;
    padding: 10px 14px !important;
    background: transparent !important;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]):not(.fi-collapsed) > .fi-section-header,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]):not(.fi-collapsed) > .fi-section-header {
    border-bottom: 1px solid var(--ds-step-current-bd);
    background: var(--ds-section-open-head) !important;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]) > .fi-section-content-ctn > .fi-section-content,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) > .fi-section-content-ctn > .fi-section-content {
    padding: 12px 14px 14px !important;
}

/* Niente icona negli accordion (owner 5-ott-2026): vedi la regola unica in fondo. */

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]) > .fi-section-header .fi-section-header-heading,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) > .fi-section-header .fi-section-header-heading {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--ds-text-primary);
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]) > .fi-section-header .fi-section-header-description,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) > .fi-section-header .fi-section-header-description {
    margin-top: 1px;
    overflow: hidden;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: var(--ds-text-tertiary) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html body .fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]) > .fi-section-header :is(.fi-icon-btn, button[x-on\:click]) svg,
html body .fi-section.fi-section.fi-section:not(.jo-fcard):not(.fi-aside):not(.fi-modal .fi-section):has(> header[x-on\:click]) > .fi-section-header :is(.fi-icon-btn, button[x-on\:click]) svg {
    width: 18px;
    height: 18px;
    color: var(--ds-text-tertiary);
}

/* Fra due sezioni espandibili un passo stretto, non un filetto. */
html .fi-section.jo-fcard .fi-section:not(.jo-fcard):has(> header[x-on\:click]) + .fi-section,
html .fi-section.jo-fcard .fi-section:not(.jo-fcard):has(> header[x-on\:click]):not(:first-child) {
    margin-top: 0;
}

/* Controlli: un filo più chiari della card (si distinguono dal fondo),
 * bordo sottile, placeholder tenue, focus lilla con un alone discreto. */
html .fi-input-wrp,
html .fi-fo-select .choices__inner,
html .fi-fo-tags-input {
    background-color: var(--ds-field-bg, #FCFCFD) !important;
}

html .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--ds-field-focus-halo, rgba(124, 92, 203, .14)) !important;
}

html .fi-input::placeholder,
html .fi-fo-textarea textarea::placeholder,
html .fi-fo-select .choices__placeholder {
    color: var(--ds-text-placeholder, #6B6B7B) !important;
    opacity: .85;
}

/* Sezione vuota: empty state compatto, la CTA subito sotto il testo. */
html .fi-section.jo-fcard .fi-ta-empty-state {
    padding: 20px 16px !important;
}

html .fi-section.jo-fcard .fi-ta-empty-state .fi-ta-empty-state-content {
    gap: 6px;
}

html .fi-section.jo-fcard .fi-ta-empty-state-icon-ctn {
    padding: 8px;
}

/* Immagine già caricata (logo, banner) in un form: una miniatura, non la
   foto a tutta card. Clic = si apre a grandezza reale. */
.jo-asset-thumb {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 64px;
    border: 1px solid var(--ds-border, #D4D8E0);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-surface-sunken, #EDEFF3);
    transition: border-color .15s;
}

.jo-asset-thumb:hover {
    border-color: var(--ds-accent, #7C5CCB);
}

.jo-asset-thumb img {
    display: block;
    width: 100%;
    height: 100%;
}

.jo-asset-thumb--banner {
    width: 160px;
}

.jo-asset-thumb--banner img {
    object-fit: cover;
}

.jo-asset-thumb--logo {
    min-width: 64px;
    max-width: 160px;
    padding: 6px;
}

.jo-asset-thumb--logo img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.jo-asset-thumb--empty {
    width: 160px;
    padding: 0 10px;
    border-style: dashed;
    font-size: 12px;
    text-align: center;
    color: var(--ds-text-placeholder, #6B6B7B);
}

.jo-asset-thumb--empty:hover {
    border-color: var(--ds-border, #D4D8E0);
}

/* Immagine attuale | Carica nuovo, affiancati e alti uguali (64px);
   l'interruttore "Rimuovi" sotto, su tutta la riga. */
.jo-asset-field > .fi-fo-component-ctn {
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 12px 12px !important;
    align-items: start;
}

.jo-asset-field > .fi-fo-component-ctn > div:nth-child(n + 3) {
    grid-column: 1 / -1 !important;
}

.jo-asset-field > .fi-fo-component-ctn > div:nth-child(-n + 2) {
    grid-column: auto !important;
}

@media (max-width: 480px) {
    .jo-asset-field > .fi-fo-component-ctn {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Hotel nuovo (Registra hotel): niente anteprima attuale, il caricamento prende tutta la colonna. */
.jo-asset-field > .fi-fo-component-ctn:not(:has(.jo-asset-thumb)) {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* ── Caricamenti (tutta la piattaforma): riquadro compatto alto 64px,
   come la miniatura dell'immagine caricata (imagePreviewHeight 64,
   AppServiceProvider). ── */
.fi-fo-file-upload .filepond--root {
    margin-bottom: 0;
    font-size: 13px;
}

.fi-fo-file-upload .filepond--drop-label {
    min-height: 64px;
}

.fi-fo-file-upload .filepond--drop-label label {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Ripetitore in riga (.jo-repeater-inline, es. recapiti secondari):
   ogni elemento è una riga sola (campi · elimina), "+ Aggiungi" sulla riga
   dell'etichetta invece che centrato sotto. ── */
.fi-fo-field-wrp:has(.jo-repeater-inline) {
    position: relative;
}

.jo-repeater-inline > div:last-child:not(:has(ul)) {
    position: absolute;
    top: -1px;
    right: 0;
}

.jo-repeater-inline > div:last-child:not(:has(ul)) .fi-link {
    font-size: 12.5px;
}

.jo-repeater-inline .fi-fo-repeater-item {
    display: flex;
    align-items: center;
    border-radius: var(--ds-radius-control, 8px) !important;
    box-shadow: none !important;
    border: 1px solid var(--ds-border, #D4D8E0);
    background: var(--ds-surface, #F6F7F9) !important;
}

.jo-repeater-inline .fi-fo-repeater-item > * {
    border-top-width: 0 !important;
}

.jo-repeater-inline .fi-fo-repeater-item-header {
    order: 2;
    flex: none;
    padding: 0 8px 0 0 !important;
}

.jo-repeater-inline .fi-fo-repeater-item-content {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px !important;
}

.jo-repeater-inline .fi-fo-repeater-item-content .fi-fo-component-ctn {
    gap: 8px !important;
    align-items: center;
}

/* ── Dati in sola lettura su una riga (.jo-inline-facts): "Indirizzo IT ·
   Sorgente TeamSystem · ID …" in fondo alla card, non campi alti. ── */
.jo-inline-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-row-divider, #EEF0F4);
    font-size: 12.5px;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-inline-facts-k,
.jo-inline-facts-note {
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-inline-facts-k {
    margin-right: 2px;
}

/* Editor di testo: parte basso (7rem, cresce scrivendo); .jo-rich-short
   per i campi da una o due righe (descrizioni). */
.fi-fo-rich-editor trix-editor {
    min-height: 7rem !important;
}

.fi-fo-rich-editor trix-editor.jo-rich-short {
    min-height: 4.5rem !important;
}

/* Liste ripetibili: elementi vicini (6px), non 16px. */
.fi-fo-repeater > ul > .grid {
    gap: 6px !important;
}

.fi-fo-repeater {
    row-gap: 8px !important;
}

/* Fieldset dentro una card: un gruppo di campi, non un riquadro grigio
   nella card — titolo discreto e filetto, come i blocchi interni. */
html .fi-section.jo-fcard .fi-fieldset {
    margin-top: 2px;
    padding: 30px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ds-row-divider, #EEF0F4) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html .fi-section.jo-fcard .fi-fieldset > legend {
    margin-inline-start: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-text-secondary, #3F3F46);
    transform: translateY(1.35rem);
}

/* ── Sezione in compilazione (tutta la piattaforma, owner 2-ott-2026): vale
   per le card-passo dei form di creazione e per OGNI sezione espandibile
   (accordion) di qualsiasi form — impostazioni, schede, filtri dei
   segmenti, chatbot della struttura… Mentre il cursore è in un campo della
   sezione aperta, lei resta in rilievo e il resto della pagina si oscura
   (un velo fisso sotto la sezione): si capisce subito cosa si sta
   compilando. Salva/Annulla restano in chiaro; topbar e sidebar, che stanno
   sopra il velo, si scuriscono dello stesso tono. I modali hanno il loro
   sfondo: lì il velo non serve. Sezione espandibile = quella con
   x-on:collapse-section (Filament la mette solo alle collapsible).
   Dal 2-ott (owner) il velo scatta appena la sezione è APERTA, non solo
   quando si scrive: ci si concentra su quella. Le card del carosello delle
   modifiche animate ([data-jo-wheel]) sono sempre aperte: lì scatta quando
   si compila. Contano solo le sezioni aperte e visibili: una sezione interna
   rimasta aperta dentro un passo chiuso o in un tab nascosto non scurisce
   niente; chiuso l'accordion, il velo sparisce. ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9;
    background: var(--ds-focus-veil, rgb(15 17 23 / .12));
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s cubic-bezier(.16, 1, .3, 1);
}

/* body.jo-focus-open / .jo-focus-only / .jo-focus-wheel le mette form-steps.js
   (stesse condizioni di prima, con querySelector): con body:has(...) Chrome
   riscandiva tutta la pagina a ogni ricalcolo dello stile, anche nelle
   pagine senza sezioni (28-ott-2026). */
body.jo-focus-open::after {
    opacity: 1;
}

/* Due selettori e non un :is(): con :is() come soggetto Chrome prova la
   regola su ogni elemento della pagina a ogni ricalcolo dello stile. */
.fi-section:is(.jo-fstep, [x-on\:collapse-section\.window]):not(.fi-collapsed, .fi-modal-window .fi-section, [data-jo-wheel], .fi-collapsed .fi-section, .fi-fo-tabs-tab:not(.fi-active) .fi-section),
.fi-section[data-jo-wheel]:focus-within {
    position: relative;
    z-index: 10;
    box-shadow: var(--ds-focus-raise, 0 14px 32px -18px rgb(15 17 23 / .22), 0 1px 4px -1px rgb(15 17 23 / .06)) !important;
}

body.jo-focus-open .fi-form-actions {
    z-index: 11;
}

body.jo-focus-open .fi-form-actions:not(.fi-sticky) {
    position: relative;
}

/* I menu della testata della pagina ("Altre azioni") stanno sopra la sezione
   aperta in rilievo (z-index 10) e sotto la topbar (20): prima l'elenco si
   apriva sotto la card (19-ott-2026). */
html body .fi-header .fi-dropdown-panel {
    z-index: 12 !important;
}

/* Una tendina o un calendario aperti stanno sopra il piede fisso (Annulla /
   Salva): prima il piede copriva l'ultima riga del calendario e un clic sui
   giorni in fondo al mese lo chiudeva senza scegliere. Il pannello del
   calendario aperto non ha display:none (x-float). */
html body .fi-section:is(.jo-fstep, [x-on\:collapse-section\.window]):has(.choices.is-open, .fi-fo-date-time-picker-panel:not([style*="display: none"])) {
    z-index: 12 !important;
}

/* Fuori da una card che fa da livello il calendario sta comunque sopra il piede. */
html body .fi-main .fi-fo-date-time-picker-panel {
    z-index: 20;
}

/* Form con una card sola (es. lead/chiavi-api-lead/create, widget-chat/create):
   niente velo né rilievo, non c'è altro da attenuare (audit ott-2026). Il piede
   fisso resta quello delle altre creazioni. */
body.jo-focus-only::after {
    opacity: 0;
}

body.jo-focus-only .fi-topbar,
body.jo-focus-only .fi-sidebar {
    filter: none;
}

.fi-section.jo-fstep.jo-fstep-only {
    box-shadow: var(--ds-shadow-rest) !important;
}

/* L'anteprima a destra (HasSidePreview) resta in chiaro sopra il velo: si
   guarda mentre si compila (owner 6-ott-2026). */
.jo-sp-side {
    z-index: 10;
}

@media (max-width: 1279px) {
    .jo-sp-side {
        position: relative;
    }
}

.fi-topbar,
.fi-sidebar {
    transition: filter .32s cubic-bezier(.16, 1, .3, 1);
}

body.jo-focus-open .fi-topbar,
body.jo-focus-open .fi-sidebar {
    filter: var(--ds-focus-veil-filter, brightness(.93));
}

@media (prefers-reduced-motion: reduce) {
    body::after,
    .fi-topbar,
    .fi-sidebar {
        transition: none;
    }
}

/* ── Accordion delle schede e delle impostazioni (owner 2-ott/5-ott-2026) ──
   Le card chiudibili delle schede (Scheda hotel, Scheda struttura…,
   .jo-fstep-plain) e delle pagine di impostazioni. Il 2-ott erano diventate
   troppo leggere ("troppo piatte", 5-ott): ora sono vere card — bordo
   pieno, ombra di riposo, testata ariosa senza icona, titolo 600 —; chiusa = una riga ben distinta che al
   passaggio si solleva; aperta = bordo lilla, ombra un filo più alta,
   testata appena lilla e un filetto sotto. I passi numerati dei form di
   creazione hanno lo stesso disegno col numero (ultimo blocco). Specificità alta:
   deve battere la regola delle card di design-system.css. */
html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) {
    border-radius: 12px !important;
    box-shadow: var(--ds-shadow-rest) !important;
    border: 1px solid var(--ds-border) !important;
    background: var(--ds-surface) !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]).fi-collapsed:hover {
    border-color: var(--ds-border-strong) !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]):not(.fi-collapsed) {
    border-color: var(--ds-step-current-bd) !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header {
    min-height: 60px;
    /* Senza descrizione il titolo sta al centro, non in alto con un vuoto sotto (22-ott-2026). */
    justify-content: center;
    padding: 12px 16px !important;
    background: transparent !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]):not(.fi-collapsed) > .fi-section-header {
    border-radius: 11px 11px 0 0;
    background: var(--ds-section-open-head) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header .fi-section-header-heading {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--ds-text-primary);
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header .fi-section-header-description {
    margin-top: 2px;
    overflow: hidden;
    font-size: 12.5px !important;
    color: var(--ds-text-tertiary) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header :is(.fi-icon-btn, button[x-on\:click]) svg {
    width: 18px;
    height: 18px;
    color: var(--ds-text-tertiary);
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]):not(.fi-collapsed) > .fi-section-content-ctn {
    border-top: 1px solid var(--ds-border) !important;
}
html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header .fi-section-header-heading,
html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header .fi-section-header-description { line-height: 1.35 !important; }
html body .fi-section.fi-section.fi-section.fi-section.jo-fcard.jo-fcard:is(.jo-fstep-plain, :not(.jo-fstep)[x-on\:collapse-section\.window]) > .fi-section-header > div { gap: 12px !important; }

/* Campi spenti (es. finché "Dichiaro queste informazioni" non è attiva):
 * interruttori e caselle si vedono davvero disattivati, non cliccabili per finta. */
html .fi-fo-field-wrp button[role="switch"]:disabled,
html .fi-fo-field-wrp input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* Rimando alla spunta "Dichiaro queste informazioni" (BookingGuestSettingsTab::undeclaredNotice). */
html .jo-undeclared-note { font-size: 12.5px; color: var(--ds-text-tertiary); }

/* Un campo nascosto (Hidden) non prende una cella della griglia: niente buchi nelle righe. */
html .fi-fo-component-ctn > div:has(> input[type="hidden"]:only-child) { display: none; }

/* Righe semplici di un ripetitore (.jo-rows-repeater, es. Email interne):
 * campi in riga come un normale form, senza riquadro per ogni voce; il
 * cestino accanto all'ultimo campo; "+ Aggiungi" discreto sotto. */
html .jo-rows-repeater .fi-fo-repeater-item {
    position: relative;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
html .jo-rows-repeater .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 34px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html .jo-rows-repeater .fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 0 40px 0 0 !important;
    border: 0 !important;
}
html .jo-rows-repeater ul { gap: 8px 16px !important; }

/* ══ Prova "form v2" (owner 2-ott-2026), solo dove il body ha .jo-form-v2
   (oggi Registra hotel e Scheda hotel). Le
   sue sezioni (Contatti e accesso, Dati fiscali, Indirizzo…) diventano card
   staccate e in rilievo, ognuna con il suo stato in testata; i campi si
   colorano mentre si compilano (public/js/form-sections-status.js). ══ */
/* Owner 8-ott-2026: l'accordion aperto delle schede hotel è uguale a tutti gli
   altri (fondo bianco, stessi margini): niente fondo più scuro qui. */

/* Le sezioni del passo: card fluttuanti. */
html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    box-shadow: 0 1px 2px rgba(20, 22, 40, .05), 0 10px 24px -14px rgba(20, 22, 40, .22) !important;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section::before { display: none !important; }

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section:focus-within {
    border-color: var(--ds-step-current-bd) !important;
    box-shadow: 0 0 0 3px var(--ds-field-focus-halo), 0 14px 30px -14px rgba(124, 92, 203, .35) !important;
}

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section > .fi-section-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ds-row-divider) !important;
    background: transparent !important;
}

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section > .fi-section-header .fi-section-header-heading {
    font-size: 14.5px !important;
    font-weight: 600 !important;
}

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section > .fi-section-content-ctn > .fi-section-content {
    padding: 14px 16px 16px !important;
}

/* Stato della card: filetto a sinistra colorato. */
html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section[data-jo-status="done"] {
    border-color: var(--ds-ok-bd) !important;
    box-shadow: inset 3px 0 0 var(--ds-ok-dot), 0 1px 2px rgba(20, 22, 40, .05), 0 10px 24px -14px rgba(20, 22, 40, .22) !important;
}

html body.jo-form-v2.jo-form-v2 .fi-section.jo-fstep.jo-fcard .fi-section-content .fi-section.fi-section.fi-section[data-jo-status="error"] {
    border-color: var(--ds-err-bd) !important;
    box-shadow: inset 3px 0 0 var(--ds-err-dot), 0 1px 2px rgba(20, 22, 40, .05), 0 10px 24px -14px rgba(161, 26, 26, .25) !important;
}

/* Etichetta di stato accanto al titolo della card. */
body.jo-form-v2 .jo-sec-status {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 1px 9px;
    border: 1px solid var(--ds-off-bd);
    border-radius: 999px;
    background: var(--ds-off-bg);
    color: var(--ds-off-fg);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
}

body.jo-form-v2 .jo-sec-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-off-dot);
}

body.jo-form-v2 .jo-sec-status[data-status="todo"] { border-color: var(--ds-warn-bd); background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
body.jo-form-v2 .jo-sec-status[data-status="todo"]::before { background: var(--ds-warn-dot); }
body.jo-form-v2 .jo-sec-status[data-status="done"] { border-color: var(--ds-ok-bd); background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
body.jo-form-v2 .jo-sec-status[data-status="done"]::before { background: var(--ds-ok-dot); }
body.jo-form-v2 .jo-sec-status[data-status="error"] { border-color: var(--ds-err-bd); background: var(--ds-err-bg); color: var(--ds-err-fg); }
body.jo-form-v2 .jo-sec-status[data-status="error"]::before { background: var(--ds-err-dot); }

/* Campi: rosso se sbagliato, verde se compilato bene (dopo averlo lasciato). */
html body.jo-form-v2 .fi-fo-field-wrp[data-jo-field="error"] .fi-input-wrp {
    --tw-ring-color: var(--ds-err-dot) !important;
    border-color: var(--ds-err-dot) !important;
    box-shadow: 0 0 0 3px rgba(217, 107, 107, .15) !important;
}

html body.jo-form-v2 .fi-fo-field-wrp[data-jo-field="ok"] .fi-input-wrp {
    --tw-ring-color: var(--ds-ok-bd) !important;
    border-color: var(--ds-ok-bd) !important;
}

html body.jo-form-v2 .fi-fo-field-wrp[data-jo-field="error"] .fi-fo-field-wrp-label span { color: var(--ds-err-fg); }

/* Gli obbligatori si riconoscono subito: asterisco più visibile. */
html body.jo-form-v2 .fi-fo-field-wrp-label sup { font-size: 13px; top: -.15em; }

html body.jo-form-v2 .fi-section-header-heading:has(.jo-sec-status) { display: flex; align-items: center; }

/* ══ Sezioni a tab dentro passi e accordion (owner 2-ott-2026, tutta la
   piattaforma, public/js/form-wheel.js; ha sostituito il carosello delle
   modifiche animate). Il più semplice possibile: tab di solo testo
   sottolineate, sotto i campi della sezione scelta senza un altro riquadro
   né la sua testata (la tab dice già il titolo); il pallino compare solo
   dove mancano obbligatori o c'è da correggere. ══ */
.jo-wheel-nav.jo-wheel-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    margin: 0 0 14px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--ds-row-divider);
}
.jo-wheel-nav.jo-wheel-tabs::-webkit-scrollbar { display: none; }

.jo-wheel-nav.jo-wheel-tabs button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 8px 0 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.jo-wheel-nav.jo-wheel-tabs button:hover { color: var(--ds-text-primary); }
.jo-wheel-nav.jo-wheel-tabs button:focus-visible { outline: 0; box-shadow: var(--ds-focus-ring); }
.jo-wheel-nav.jo-wheel-tabs button[aria-current="true"] {
    border-bottom-color: var(--ds-accent);
    color: var(--ds-accent-fg);
}
.jo-wheel-nav.jo-wheel-tabs button i { display: none; width: 6px; height: 6px; border-radius: 50%; }
.jo-wheel-nav.jo-wheel-tabs button[data-status="todo"] i { display: block; background: var(--ds-warn-dot); }
.jo-wheel-nav.jo-wheel-tabs button[data-status="error"] i { display: block; background: var(--ds-err-dot); }

/* Una sezione alla volta; i gruppi fra contenitore e sezioni non fanno da riquadro. */
.fi-fo-component-ctn.jo-wheel--tabs { display: block !important; }
.jo-wheel--tabs .jo-wheel-wrap { display: contents !important; }
.jo-wheel--tabs [data-jo-wheel="1"] { display: none !important; }

/* Niente card nella card: i campi stanno direttamente sotto le tab, la
   sezione è sempre aperta (anche se era un accordion chiuso). */
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.fi-section[data-jo-wheel]:not(#jo-tabs) {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Le tendine aperte escono dal riquadro, non vengono tagliate. */
    overflow: visible !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.fi-section[data-jo-wheel]:not(#jo-tabs)::before { display: none !important; }
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.fi-section[data-jo-wheel]:not(#jo-tabs) > .fi-section-header { display: none !important; }
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.fi-section[data-jo-wheel]:not(#jo-tabs) > .fi-section-content-ctn {
    position: static !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.fi-section[data-jo-wheel]:not(#jo-tabs) > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
    background: transparent !important;
}

/* Fuori da un passo (es. Scheda hotel, tab di una pagina) tab e campi
   stanno in una card sola. */
html body .fi-fo-tabs-tab.fi-active.fi-active:has(> .jo-wheel-tabs) {
    padding: 4px 16px 16px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
}

/* ══ Card-passo più morbide (owner 2-ott-2026: "non mi piacciono i numeri
   cerchiati e connessi"): niente linea fra i passi né cerchi outline. Il
   numero sta in una piccola tessera piena e tenue che prende il colore
   dello stato — neutra da compilare, lilla in compilazione, verde con la
   spunta a passo completato. Le card restano separate da un po' d'aria. ══ */
html .fi-section.jo-fstep::after { display: none !important; }

html .fi-section.jo-fstep:not(.jo-fstep-plain) > .fi-section-header::before {
    left: 14px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border: 0;
    border-radius: 8px;
    background: var(--ds-surface-sunken, #F3F4F8);
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}
html .fi-section.jo-fstep[data-jo-state="current"]:not(.jo-fstep-plain) > .fi-section-header::before {
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent-fg, #5F45A8);
}
html .fi-section.jo-fstep[data-jo-state="done"]:not(.jo-fstep-plain) > .fi-section-header::before {
    content: '✓';
    background: var(--ds-step-done-bd, #D3EBDD);
    color: var(--ds-step-done-fg, #2E7A50);
    font-size: 13px;
}
.fi-form > .fi-fo-component-ctn:has(.fi-section.jo-fstep),
:is(.fi-form, form) .fi-fo-component-ctn:has(> * .fi-section.jo-fstep) { row-gap: 10px !important; }

/* Card-passo aperta arrotondata a tutti gli angoli (owner 2-ott-2026): il
   fondo del contenuto e della testata segue il raggio della card, invece di
   uscire squadrato sotto. */
html body .fi-section.fi-section.jo-fstep:not(.fi-collapsed) > .fi-section-header { border-radius: 9px 9px 0 0 !important; }
html body .fi-section.fi-section.jo-fstep:not(.fi-collapsed) > .fi-section-content-ctn,
html body .fi-section.fi-section.jo-fstep:not(.fi-collapsed) > .fi-section-content-ctn > .fi-section-content { border-radius: 0 0 9px 9px !important; }
html body .fi-section.fi-section.jo-fstep.fi-collapsed > .fi-section-header { border-radius: 9px !important; }

/* Col fuoco in una sezione a tab di una pagina a tab il velo scatta: la
   card con le tab resta in chiaro tutta intera, non solo la sezione. */
body.jo-focus-wheel .fi-fo-tabs-tab.fi-active:has(> .jo-wheel-tabs) {
    position: relative;
    z-index: 10;
}

/* Wizard (es. "Crea con AI") come le card-passo (owner 2-ott-2026): niente
   linea fra i passi né cerchi, il numero in una tessera piena e tenue —
   neutra, lilla per il passo attivo, verde con la spunta per quelli fatti. */
.fi-fo-wizard > .fi-fo-wizard-header > li:not(:last-child)::after { display: none !important; }
.fi-fo-wizard .fi-fo-wizard-header-step .fi-fo-wizard-header-step-icon-ctn {
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--ds-surface-sunken, #F3F4F8) !important;
}
.fi-fo-wizard .fi-fo-wizard-header-step .fi-fo-wizard-header-step-indicator { color: var(--ds-text-tertiary, #5B5B6B) !important; font-weight: 600; }
.fi-fo-wizard .fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-icon-ctn { background: var(--ds-accent-soft, #F3EEFC) !important; }
.fi-fo-wizard .fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-indicator { color: var(--ds-accent-fg, #5F45A8) !important; }
.fi-fo-wizard .fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn { background: var(--ds-step-done-bd, #D3EBDD) !important; }
.fi-fo-wizard .fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon { color: var(--ds-step-done-fg, #2E7A50) !important; }
.fi-fo-wizard .fi-fo-wizard-header-step-button { border-radius: 8px; }
.fi-fo-wizard > .fi-fo-wizard-header { padding: 6px !important; gap: 2px; }

/* Ogni accordion arrotondato a tutti gli angoli, aperto o chiuso (owner
   2-ott-2026): testata e contenuto seguono il raggio del contenitore. */
html body .fi-section.fi-section[x-on\:collapse-section\.window]:not(.jo-fstep, [data-jo-wheel], .fi-collapsed) > .fi-section-content-ctn,
html body .fi-section.fi-section[x-on\:collapse-section\.window]:not(.jo-fstep, [data-jo-wheel], .fi-collapsed) > .fi-section-content-ctn > .fi-section-content { border-radius: 0 0 9px 9px !important; }
html body .fi-section.fi-section[x-on\:collapse-section\.window]:not(.jo-fstep, [data-jo-wheel], .fi-collapsed) > .fi-section-header { border-radius: 9px 9px 0 0 !important; }
html body .fi-section.fi-section[x-on\:collapse-section\.window].fi-collapsed:not(.jo-fstep, [data-jo-wheel]) > .fi-section-header { border-radius: 9px !important; }

/* Nelle sezioni a tab i titoli intermedi dei blocchi (blockHeading) sono un
   doppione delle tab: nascosti. */
.jo-wheel--tabs .fi-fo-field-wrp:has(.jo-block-heading),
.jo-wheel--tabs .jo-block-heading { display: none !important; }
.jo-wheel-nav.jo-wheel-tabs.is-overflow { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }

/* Card-passo iniziata ma con campi vuoti (owner 2-ott-2026: verde solo con
   tutti i campi compilati): badge e tessera ambra tenue con quanti mancano. */
.jo-fstep-badge[data-state="partial"] {
    border-color: var(--ds-warn-bd, #F9D9A6);
    background: var(--ds-warn-bg, #FEF3E2);
    color: var(--ds-warn-fg, #8A4B00);
}
.jo-fstep-badge[data-state="partial"]::before { background: var(--ds-warn-dot, #D9A048); opacity: 1; }
html .fi-section.jo-fstep[data-jo-state="partial"]:not(.jo-fstep-plain) > .fi-section-header::before {
    background: var(--ds-warn-bg, #FEF3E2);
    color: var(--ds-warn-fg, #8A4B00);
}

/* Una tabella dentro una sezione a tab: il titolo lo dice già la tab. */
.jo-wheel--tabs .fi-ta-header-heading,
.jo-wheel--tabs .fi-ta-header:not(:has(.fi-ta-actions > *)):has(.fi-ta-header-heading) { display: none !important; }

/* ── Annulla e Salva solo dopo una modifica (owner 2-ott-2026) ──
   Finché non si cambia niente il piede del form non c'è (si esce con
   "Indietro"); compare alla prima modifica (public/js/form-dirty.js).
   Solo nei form che modificano: in creazione (Registra hotel, Nuovo …)
   Annulla e la CTA ci sono sempre (owner 5-ott-2026). */
body:not(.jo-form-dirty) .fi-main:has(form[wire\:submit^="save"]) .fi-form-actions,
body:not(.jo-form-dirty) .fi-main [data-jo-dirty-scope] .fi-form-actions {
    display: none;
}

/* Preventivo (owner 5-ott-2026): in bozza il piede resta con Scarica PDF e
   Invia al cliente; Salva bozza e Annulla compaiono solo dopo una modifica.
   Un preventivo già partito segue la regola delle pagine di modifica: il
   piede solo dopo una modifica (revisione 19-ott-2026; Scarica PDF resta
   nei tre puntini della testata, l'invio nell'anteprima). */
body.jo-quote-pilot.jo-quote-draft:not(.jo-form-dirty) .fi-main .fi-form-actions:has(.jo-fa-dirty) {
    display: block;
}

body:not(.jo-form-dirty) .fi-form-actions .jo-fa-dirty {
    display: none !important;
}

/* ══ Passi dei form di creazione con lo stesso disegno degli accordion
   (owner 5-ott-2026: "omologare tutti gli accordion all'ultima versione,
   compresi quelli di creazione, che mantengono i numeri"). Vera card come
   le .jo-fstep-plain — bordo, ombra di riposo, radius 12, testata alta
   ~60px, titolo 14.5/600, descrizione su una riga, freccia 18px; chiusa si
   solleva al passaggio, aperta = bordo lilla, testata lilla e filetto —;
   al posto dell'icona c'è il numero, nella stessa tessera da 32px che
   prende il colore dello stato (neutra, lilla, ambra, verde con la ✓). ══ */
html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) {
    border-radius: 12px !important;
    border: 1px solid var(--ds-border) !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-rest) !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep).fi-collapsed:hover {
    border-color: var(--ds-border-strong) !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep):not(.fi-collapsed) {
    border-color: var(--ds-step-current-bd) !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header {
    min-height: 60px;
    justify-content: center;
    padding: 12px 16px 12px 62px !important;
    background: transparent !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep):not(.fi-collapsed) > .fi-section-header {
    border-radius: 11px 11px 0 0 !important;
    background: var(--ds-section-open-head) !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep).fi-collapsed > .fi-section-header { border-radius: 11px !important; }
html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep):not(.fi-collapsed) > .fi-section-content-ctn,
html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep):not(.fi-collapsed) > .fi-section-content-ctn > .fi-section-content { border-radius: 0 0 11px 11px !important; }

/* Il numero nella tessera da 32px, come l'icona degli altri accordion. */
html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header::before {
    left: 16px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 8px;
    font-size: 12px;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header .fi-section-header-heading {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--ds-text-primary);
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header .fi-section-header-description,
html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header .jo-fstep-summary {
    margin-top: 2px;
    overflow: hidden;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: var(--ds-text-tertiary) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header :is(.fi-icon-btn, button[x-on\:click]) svg {
    width: 18px;
    height: 18px;
    color: var(--ds-text-tertiary);
}

@media (max-width: 640px) {
    html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header { padding-left: 56px !important; }
    html body .fi-section.fi-section.fi-section.fi-section.jo-fstep.jo-fstep:not(.jo-fstep-plain):not(.jo-fstep .jo-fstep) > .fi-section-header::before { left: 12px; }
}

/* ══ Accordion tutti uguali, senza icone (owner 5-ott-2026: "alcuni hanno
   le icone e altri no, toglile e rendili uniformi"). Ogni sezione che si
   apre e si chiude — card delle schede e delle impostazioni, sezioni dentro
   le card, sezioni a sé, dettagli in sola lettura — mostra solo titolo,
   descrizione e freccia; i passi di creazione solo il numero. ══ */
html body .fi-section:is(.jo-fstep, [x-on\:collapse-section\.window], :has(> header[x-on\:click])) > .fi-section-header .fi-section-header-icon {
    display: none !important;
}

/* Sotto-blocchi di una sezione mostrata come tab (owner 7-ott-2026): niente
   riquadro dentro la tab, solo titolo con filetto; il blocco che ripete il
   titolo della tab perde la testata (form-wheel.js: .jo-wheel-sub). */
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-sub:not(#jo-sub) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-sub:not(#jo-sub) > .fi-section-header {
    padding: 4px 0 6px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border)) !important;
    border-radius: 0 !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-sub:not(#jo-sub) > .fi-section-header .fi-section-header-heading {
    font-size: 13px !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-sub:not(#jo-sub) > .fi-section-content-ctn,
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-sub:not(#jo-sub) > .fi-section-content-ctn > .fi-section-content {
    padding: 12px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-samehead:not(#jo-sub) > .fi-section-header { display: none !important; }
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-samehead:not(#jo-sub) > .fi-section-content-ctn,
html body .jo-wheel--tabs .fi-section.fi-section.fi-section.jo-wheel-sub.jo-wheel-samehead:not(#jo-sub) > .fi-section-content-ctn > .fi-section-content { padding-top: 0 !important; }

/* Riga "Imposta con AI" sotto il titolo di una sezione (owner 7-ott-2026):
   un'opzione leggera, non un riquadro; un filetto lilla a sinistra la lega
   al pulsante che l'ha aperta. */
.jo-ai-row {
    margin-bottom: 4px;
    padding: 2px 0 10px 12px;
    border-left: 2px solid var(--ds-accent-soft-2, var(--ds-accent-soft));
}
/* La barra delle tab dentro il contenitore (dopo una riga .jo-wheel-lead) prende tutta la riga. */
.jo-wheel-nav.is-inside { grid-column: 1 / -1; }

/* Nuovo segmento ▸ Da dove parti: Da zero, Da un tag, Proposte pronte su una
   riga (owner 7-ott-2026); sotto i 420px vanno in colonna. */
.jo-start-row > .grid {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: end;
    gap: 12px !important;
}
.jo-start-row > .grid > * { grid-column: auto !important; }
@container (max-width: 420px) {
    .jo-start-row > .grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Scheda hotel ▸ Camere a tessere e Libreria immagini a miniature (owner
 * 8-ott-2026): niente tabelle. livewire/hotel-rooms-inline.blade.php,
 * sheet-media.blade.php. */
.jo-hrooms-note { margin: 0 0 6px; font-size: 12.5px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-hrooms-photo {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 32px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--ds-surface-sunken, #EDEFF3);
    color: var(--ds-text-tertiary, #5B5B6B);
}
.jo-hrooms-photo img { width: 100%; height: 100%; object-fit: cover; }
.jo-hrooms-photo svg { width: 16px; height: 16px; }
.jo-hrooms-unit { font-size: 11.5px; font-weight: 400; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-hrooms-add { margin-top: 6px; }
/* Una camera = una riga anche sul telefono (foto · nome · prezzo · freccia):
   la regola delle righe dei preventivi (guest-profile.css) le mandava a capo. */
.jo-hrooms .jo-cq-link { flex-wrap: nowrap; }
.jo-hrooms .jo-cq-link .jo-ls-main { flex: 1 1 auto; flex-basis: auto; min-width: 0; }
/* La camera aperta nella sua riga (owner 8-ott-2026, HotelRoomsInline): la
   riga resta in rilievo con i campi sotto e Annulla · Salva in fondo. */
.jo-hroom-row { flex-wrap: wrap; }
.jo-hroom-row .jo-cq-go svg { transition: transform .15s ease; }
.jo-hroom-row.is-open .jo-cq-go svg { transform: rotate(180deg); }
.jo-hroom-row.is-open { margin: 6px -8px; padding: 0 8px 12px; border: 1px solid var(--ds-accent-soft-2, #EAE1FA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); box-shadow: var(--ds-focus-raise); }
.jo-hroom-row.is-open + .jo-hroom-row { border-top: 0; }
.jo-hroom-newhead { flex-basis: 100%; padding: 12px 0 2px; font-size: 13.5px; }
.jo-hroom-edit { flex-basis: 100%; min-width: 0; }
.jo-hroom-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* "Carica foto" alto quanto gli altri campi della riga. */
.jo-hroom-edit .filepond--root { margin-bottom: 0; }
.jo-hroom-edit .filepond--root:not(:has(.filepond--item)), .jo-hroom-edit .filepond--root:not(:has(.filepond--item)) .filepond--drop-label { min-height: 34px !important; height: 34px !important; }
.jo-hroom-edit .filepond--drop-label label { padding: 0 8px; font-size: 13px; }

.jo-hmedia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jo-hmedia-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.jo-hmedia-thumb {
    display: grid;
    place-items: center;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--ds-surface-sunken, #EDEFF3);
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary, #3F3F46);
}
.jo-hmedia-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jo-hmedia-open { font-size: 13px; }

/* Accordion delle pagine di dettaglio (infolist, .jo-in-section da
   FormCards::configureInfolist): l'icona della sezione, se ne ha una, resta
   in una tessera lilla tenue come nel dettaglio del Preventivatore. Prevale
   sulla regola che nasconde le icone degli accordion dei form. */
html body .fi-section.jo-in-section.jo-in-section > .fi-section-header .fi-section-header-icon {
    display: block !important;
    box-sizing: content-box;
    flex-shrink: 0;
    align-self: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 7px;
    border-radius: 8px;
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent, #7C5CCB) !important;
}

/* ── Barra delle sezioni in testa alla pagina (owner 9-ott-2026, section-tabs.js) ──
   Una pagina con 3+ accordion di primo livello: barra ferma sotto la topbar
   col nome di ogni accordion; un clic lo apre e ci scorre, gli accordion
   restano come sono. Stesso disegno delle tab dentro le card
   (.jo-wheel-tabs): testo, quello aperto in viola con la linea sotto. */
.jo-sec-tabs {
    position: sticky;
    top: var(--jo-topbar-h, 64px);
    z-index: 11; /* sopra il velo della sezione aperta */
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 4px;
    padding: 0 4px;
    background: var(--ds-bg-app, #EDEFF4);
    border-bottom: 1px solid var(--ds-border, #DFE2EA);
}

.jo-sec-tabs::-webkit-scrollbar {
    display: none;
}

.jo-sec-tabs > button {
    flex: none;
    padding: 12px 12px 10px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ds-text-tertiary, #5B5B6B);
    white-space: nowrap;
    background: none;
    cursor: pointer;
}

.jo-sec-tabs > button:hover {
    color: var(--ds-text-primary, #18181B);
}

.jo-sec-tabs > button.is-active {
    color: var(--ds-accent, #7C5CCB);
    border-bottom-color: var(--ds-accent, #7C5CCB);
    font-weight: 600;
}

.jo-sec-tabs > button:focus-visible {
    outline: 2px solid var(--ds-focus-ring, #7C5CCB);
    outline-offset: -2px;
    border-radius: 6px;
}

/* L'accordion raggiunto dalla barra non finisce sotto topbar, scheda
   dell'hotel ferma (--jo-hcard-h, più alta con «Dettagli» aperto) e barra
   (8px di stacco + 46px), con 12px di respiro (28-ott-2026). */
.jo-sec-tab {
    scroll-margin-top: calc(var(--jo-topbar-h, 64px) + var(--jo-hcard-h, 0px) + 66px);
}

/* Camera aperta nella Scheda hotel (owner 9-ott-2026): modulo compatto a
   sinistra, la camera come la vede l'ospite a destra (sotto, su schermi
   stretti); le foto come miniature con la copertina. */
.jo-hroom-split { display: grid; gap: 20px; padding-top: 12px; }
@container (min-width: 820px) {
    .jo-hroom-split { grid-template-columns: minmax(0, 1fr) 300px; }
}
.jo-hroom-edit { container-type: inline-size; }
.jo-hroom-pv { position: sticky; top: calc(var(--jo-topbar-h, 64px) + 12px); align-self: start; }
.jo-hroom-pv-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-hroom-pv-h svg { width: 15px; height: 15px; }
.jo-hroom-pv-card { overflow: hidden; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); box-shadow: var(--ds-shadow-rest); }
.jo-hroom-pv-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ds-surface-sunken, #F3F4F8); }
.jo-hroom-pv-cover.is-empty { display: grid; place-content: center; justify-items: center; gap: 4px; font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-hroom-pv-cover.is-empty svg { width: 24px; height: 24px; }
.jo-hroom-pv-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
.jo-hroom-pv-more img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.jo-hroom-pv-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.jo-hroom-pv-body b { font-size: 15px; color: var(--ds-text-primary, #18181B); }
.jo-hroom-pv-body small { font-size: 12.5px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-hroom-pv-body p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ds-text-secondary, #3F3F46); }
.jo-hroom-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ds-surface-sunken, #F3F4F8); }
.jo-hroom-photos .fi-fo-repeater-item { border-radius: 10px; }

/* Barra delle sezioni della Scheda hotel sul telefono (revisione ott-2026,
   section-tabs.js): le voci che non ci stanno sfumano a destra finché la barra
   non è scorsa fino in fondo, come le tab dentro le card (.jo-wheel-tabs). */
.jo-sec-tabs.is-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* Ripetitore "piatto" (.jo-flat-repeater, es. le email di un'automazione):
 * i campi stanno nel passo come campi normali, senza un riquadro da aprire
 * dentro l'accordion (owner 19-ott-2026). Con più voci, ognuna ha sopra il
 * suo nome ("Email 2 · …") e un filetto; con una sola niente testata. */
html .jo-flat-repeater .fi-fo-repeater-item {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
html .jo-flat-repeater .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    padding: 0 0 6px !important;
    border: 0 !important;
    background: transparent !important;
}
html .jo-flat-repeater .fi-fo-repeater-item > .fi-fo-repeater-item-header h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-text-tertiary, #5B5B6B);
}
html .jo-flat-repeater .fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 0 !important;
    border: 0 !important;
}
html .jo-flat-repeater .fi-fo-repeater-item + .fi-fo-repeater-item {
    border-top: 1px solid var(--ds-border, #DFE2EA) !important;
    padding-top: 12px;
}
html .jo-flat-repeater .fi-fo-repeater-item:only-child > .fi-fo-repeater-item-header {
    display: none;
}

/* Scelta a pulsanti affiancati (ToggleButtons grouped) in una card stretta o
 * sul telefono: resta nella card e scorre di lato, non esce dal bordo
 * (es. "Nella pagina | Popup | Bottone flottante" dei form di contatto). */
html .fi-fo-field-wrp .fi-btn-group.w-max {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
html .fi-fo-field-wrp .fi-btn-group.w-max > * {
    flex: none;
}

/* === Sezioni vuote, in tutta la piattaforma (owner 20-ott-2026) ===
   Un accordion senza niente dentro (sezione di Filament: card, passo,
   dettaglio; <details class="jo-acc"> scritto a mano) resta al suo posto
   come una riga tratteggiata e trasparente, col titolo e "Nessun …"
   attenuati, senza freccia: non si apre (classe .is-empty). Dove c'è già
   un'azione per aggiungere, il "+" (.jo-empty-add) prende il posto della
   freccia (.is-addable). Classi da App\Filament\Support\EmptySection, nei
   Blade a mano + <x-jo.empty-add>. Le sezioni mostrate come tab
   (form-wheel.js, [data-jo-wheel]) restano normali: si attenua la tab.
   Selettori lunghi per battere la specificità delle card .jo-fstep-plain. */
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]),
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty {
    border: 1px dashed var(--ds-border-strong, #C9CDD8) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]):hover,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty:hover {
    border-color: var(--ds-border-strong, #C9CDD8) !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary {
    background: transparent !important;
    border-bottom: 0 !important;
    cursor: default !important;
    pointer-events: none !important;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-section-header-heading,
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-section-header-description,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary .jo-acc-title,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary .jo-acc-title small {
    color: var(--ds-text-tertiary, #6B6B7B) !important;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-section-header-heading,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary .jo-acc-title {
    font-weight: 500 !important;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-section-header-icon {
    opacity: .6;
}

/* Niente freccia e niente contenuto: non c'è niente da aprire. */
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-section-collapse-button,
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .fi-icon-btn:not(.jo-empty-add),
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header::after,
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]):not(.is-addable) > .fi-section-content-ctn,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary::after,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty:not(.is-addable) > :not(summary) {
    display: none !important;
}

/* Le voci vuote dei menu: la consultazione del preventivo e le tab dentro
   un accordion (form-wheel.js copia .is-empty dalla sezione alla tab). */
.jo-qv-menu .fi-tabs-item.is-empty:not(.fi-active) .fi-tabs-item-label,
.jo-wheel-tabs button.is-empty:not([aria-selected="true"]) {
    color: var(--ds-text-tertiary, #8A8A99);
    font-weight: 400;
}

/* Sezione vuota dove si può aggiungere: il "+" al posto della freccia
   (Crea preventivo, Nuova richiesta, Aggiungi nota…); aperta, la sezione
   torna una card normale. */
html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty:not([data-jo-wheel]) > .fi-section-header .jo-empty-add,
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty > summary .jo-empty-add {
    pointer-events: auto;
}

.jo-empty-add,
.fi-icon-btn.jo-empty-add {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px dashed var(--ds-accent, #7145D9);
    border-radius: 8px;
    color: var(--ds-accent, #7145D9);
    background: transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jo-empty-add svg,
.fi-icon-btn.jo-empty-add .fi-icon-btn-icon {
    width: 16px;
    height: 16px;
    color: inherit;
}

.jo-empty-add:hover,
.jo-empty-add:focus-visible,
.fi-icon-btn.jo-empty-add:hover,
.fi-icon-btn.jo-empty-add:focus-visible {
    background: var(--ds-accent, #7145D9);
    color: #fff;
    border-style: solid;
}

html body .fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.fi-section.is-empty.is-empty.is-addable:not([data-jo-wheel]):not(.fi-collapsed),
html body details.jo-acc.jo-acc.jo-acc.is-empty.is-empty.is-addable[open] {
    border-style: solid !important;
    border-color: var(--ds-accent-soft-2, #E5DAFB) !important;
    background: var(--ds-surface, #FCFCFD) !important;
}

/* Elenco chiave → valore a righe (.jo-kv-rows, es. il mapping dei campi di un
 * PMS): una riga per voce con i due campi e il cestino a destra, le etichette
 * solo sulla prima riga, niente testata che ripete i valori (owner 21-ott-2026). */
html .jo-kv-rows .fi-fo-repeater-item {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
html .jo-kv-rows .fi-fo-repeater-item > .fi-fo-repeater-item-content {
    order: 1;
    flex: 1 1 auto;
    padding: 0 !important;
    border: 0 !important;
}
html .jo-kv-rows .fi-fo-repeater-item > .fi-fo-repeater-item-header {
    order: 2;
    padding: 0 0 2px !important;
    border: 0 !important;
    background: transparent !important;
}
html .jo-kv-rows .fi-fo-repeater-item > .fi-fo-repeater-item-header h4 {
    display: none;
}
html .jo-kv-rows .fi-fo-repeater-item + .fi-fo-repeater-item .fi-fo-field-wrp-label {
    display: none;
}
html .jo-kv-rows .fi-fo-repeater > ul,
html .jo-kv-rows ul {
    gap: 6px !important;
}

/* Comunicazioni alle strutture ▸ Chi riceve: dopo il nome, quanti moduli
   (l'elenco nel tooltip), tenue (owner 21-ott-2026). */
.jo-aud-mods {
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: help;
}

/* Dentro un accordion le voci di un menu o di un filtro si scelgono in viola,
 * come le tab delle sezioni (owner 21-ott-2026: il verde del menu orizzontale
 * vale solo fuori dagli accordion; es. Scheda ospite ▸ Interazioni). */
html body .fi-section-content-ctn .jo-qf .fi-tabs-item:hover:not(.fi-active),
html body .fi-section-content-ctn .fi-page-sub-navigation-tabs .fi-tabs-item:hover:not(.fi-active),
html body details.jo-acc .jo-qf .fi-tabs-item:hover:not(.fi-active) {
    background: var(--ds-accent-soft, #F1EAFD) !important;
}
html body .fi-section-content-ctn .jo-qf .fi-tabs-item.fi-active::after,
html body .fi-section-content-ctn .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active::after,
html body details.jo-acc .jo-qf .fi-tabs-item.fi-active::after {
    background: var(--ds-accent, #7145D9) !important;
}
html body .fi-section-content-ctn .jo-qf .fi-tabs-item.fi-active .fi-tabs-item-label,
html body .fi-section-content-ctn .jo-qf .fi-tabs-item.fi-active .fi-tabs-item-icon,
html body .fi-section-content-ctn .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
html body .fi-section-content-ctn .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-icon,
html body details.jo-acc .jo-qf .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--ds-accent-fg, #5B32C7) !important;
}
html body .fi-section-content-ctn .jo-qf .fi-tabs-item.fi-active .fi-badge,
html body .fi-section-content-ctn .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-badge,
html body details.jo-acc .jo-qf .fi-tabs-item.fi-active .fi-badge {
    background: var(--ds-accent-soft, #F1EAFD) !important;
    color: var(--ds-accent-fg, #5B32C7) !important;
}
.dark .fi-section-content-ctn .jo-qf .fi-tabs-item:hover:not(.fi-active),
.dark details.jo-acc .jo-qf .fi-tabs-item:hover:not(.fi-active) {
    background: color-mix(in srgb, var(--ds-accent, #7145D9) 14%, transparent) !important;
}

/* Pop-up aperto da dentro un accordion, una scheda o un blocco Livewire
   (owner 21-ott-2026: la nota dell'ospite finiva sotto la scheda contatto,
   la topbar e la sidebar). Il riquadro aperto crea un contesto di
   sovrapposizione: finché il pop-up è aperto chi lo contiene sale sopra
   topbar, sidebar e riepiloghi fissi, così il velo copre tutto lo schermo. */
/* La classe la mette ui-standard.js agli antenati del pop-up aperto
   (evento modal-opened di Filament). Prima era CSS puro,
   body *:has(.fi-modal.fi-modal-open): Chrome lo provava su ogni elemento a
   ogni ricalcolo dello stile, su tutte le pagine (28-ott-2026). */
.jo-modal-host {
    z-index: 45 !important;
}

/* Testata di un passo su schermi stretti (owner 21-ott-2026): il blocco del
   titolo si stringe invece di spingere fuori la freccia, e lo stato lungo
   ("In compilazione · 12 obbligatori…") finisce coi puntini. */
.fi-section.jo-fstep > .fi-section-header .grid.flex-1 { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.fi-section.jo-fstep > .fi-section-header .fi-section-header-heading { min-width: 0; }
.fi-section.jo-fstep .jo-fstep-badge { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── Campi da compilare in evidenza (owner 22-ott-2026, tutta la piattaforma) ──
 * Aperta una card, i campi ancora vuoti (gli stessi di "N campi vuoti",
 * form-steps.js → .jo-field-missing) hanno bordo e pallino arancio tenui;
 * compilati tornano normali. Il focus resta lilla. */
.jo-field-missing .fi-input-wrp:not(:focus-within),
.jo-field-missing .fi-fo-rich-editor:not(:focus-within),
.jo-field-missing .fi-fo-markdown-editor:not(:focus-within),
.jo-field-missing .fi-fo-file-upload .filepond--panel-root,
.jo-field-missing .fi-fo-tags-input:not(:focus-within) {
    box-shadow: 0 0 0 1px var(--ds-warn-dot, #D9A048) !important;
    border-color: var(--ds-warn-dot, #D9A048) !important;
}
.jo-field-missing .fi-fo-field-wrp-label > span::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: 6px;
    border-radius: 999px;
    background: var(--ds-warn-dot, #D9A048);
    vertical-align: middle;
}

/* ── Piede delle azioni: solo i pulsanti, mai una barra (owner 22-ott-2026) ──
 * Prima a volte c'era una barra bianca (il piede fisso di Filament quando il
 * modulo è più lungo dello schermo, la Scheda hotel, il compositore sul
 * telefono) e a volte no. Ora ovunque, fermo in basso o no, si vedono solo
 * Annulla e la CTA: niente fondo, bordo, ombra né riquadro. Vince sulle
 * regole di Filament, hotel-workspace.css, std-quotes.css e mobile.css. */
html body .fi-form-actions,
html body .fi-form-actions.fi-sticky,
html body .fi-resource-edit-record-page.fi-resource-hotels .fi-form-actions,
html body .jo-qcomp-main .fi-form-actions {
    margin-inline: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Senza barra i pulsanti stanno sopra il contenuto che scorre: in scuro il
 * grigio di Filament (bg-white/5) è quasi trasparente e il testo sotto si
 * leggeva attraverso «Annulla». Fondo pieno, stesso tono (in chiaro è già
 * pieno). Non gli «outlined», che in Filament non hanno fondo. */
html.dark body .fi-form-actions .fi-btn.fi-color-gray:not(.fi-btn-outlined) {
    background-color: var(--ds-surface-2);
}

html.dark body .fi-form-actions .fi-btn.fi-color-gray:not(.fi-btn-outlined):hover {
    background-color: var(--ds-surface-hover);
}