/*
 * 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 > * {
        grid-column: var(--col-span-md, 1 / -1) !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 > * {
        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(> * .fi-section.jo-fstep) {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
}

:is(.fi-form, form) .fi-fo-component-ctn:has(> * .fi-section.jo-fstep) > * {
    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 > :last-child {
    margin-right: auto;
}

html :is(.fi-resource-create-record-page, .fi-resource-edit-record-page) .fi-form-actions.fi-sticky {
    border-top: 1px solid var(--ds-border, #E4E6EC);
    background: var(--ds-surface, #FFFFFF);
    box-shadow: 0 -4px 16px -8px rgba(20, 22, 40, .10);
}

/* ── 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;
    }
}

/* ── Anteprima della struttura sopra le card-passo (Scheda struttura) ──
 * resources/views/filament/group/structure-preview.blade.php: una riga
 * leggera che dice quale hotel si sta configurando. */
.jo-sp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--ds-border, #E4E6EC);
    border-radius: 10px;
    background: var(--ds-surface, #FFFFFF);
}

.jo-sp-img {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 96px;
    height: 64px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ds-surface-sunken, #EDEFF3);
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-sp-img img { width: 100%; height: 100%; object-fit: cover; }
.jo-sp-img svg { width: 20px; height: 20px; }
.jo-sp-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.jo-sp-name { font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-sp-meta { overflow: hidden; font-size: 12.5px; color: var(--ds-text-tertiary, #5B5B6B); white-space: nowrap; text-overflow: ellipsis; }
.jo-sp-facts { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 16px; font-size: 12.5px; color: var(--ds-text-secondary, #3F3F46); }
.jo-sp-fact { max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jo-sp-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--ds-text-link, #5F45A8); }
.jo-sp-link svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
    .jo-sp { flex-wrap: wrap; }
    .jo-sp-facts { justify-content: flex-start; width: 100%; }
}

/* ── 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. */
.fi-fo-component-ctn > :has(> .fi-fo-field-wrp [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. */

div: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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 :is(.fi-section.jo-fcard .fi-section.fi-section:not(.jo-fcard):not(.fi-aside):has(> header[x-on\:click]), .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 > :nth-child(n + 3) {
    grid-column: 1 / -1 !important;
}

.jo-asset-field > .fi-fo-component-ctn > :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:has(:is(.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))::after {
    opacity: 1;
}

:is(.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:has(:is(.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)) .fi-form-actions {
    z-index: 11;
}

body:has(:is(.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)) .fi-form-actions:not(.fi-sticky) {
    position: relative;
}

/* Una tendina aperta sta sopra il piede fisso (Annulla / Salva). */
html body .fi-section:is(.jo-fstep, [x-on\:collapse-section\.window]):has(.choices.is-open) {
    z-index: 12 !important;
}

/* 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:not(:has(.fi-section.jo-fstep:not(.jo-fstep-only, .fi-collapsed))):has(.fi-section.jo-fstep.jo-fstep-only)::after {
    opacity: 0;
}

body:not(:has(.fi-section.jo-fstep:not(.jo-fstep-only, .fi-collapsed))):has(.fi-section.jo-fstep.jo-fstep-only) :is(.fi-topbar, .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:has(:is(.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)) :is(.fi-topbar, .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;
    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 :is(.fi-section-header-heading, .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:has(.jo-wheel--tabs .fi-section[data-jo-wheel]:focus-within) .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): il piede resta con Scarica PDF e Invia al
   cliente; Salva bozza e Annulla compaiono solo dopo una modifica. */
body.jo-quote-pilot: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 :is(.fi-section-header-description, .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; }

/* Scelta a tessere (Segmenti ▸ "Da dove parti"): un'opzione per tessera,
   descrizione su due righe, scelta = lilla tenue. */
.jo-start-tiles.fi-fo-radio, .jo-start-tiles .fi-fo-radio {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px !important;
}
.jo-start-tiles > div, .jo-start-tiles .fi-fo-radio > div {
    padding: 10px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-field-bg, var(--ds-surface));
}
.jo-start-tiles > div:has(input:checked), .jo-start-tiles .fi-fo-radio > div:has(input:checked) {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
}
.jo-start-tiles p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12.5px;
}

/* 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; }
/* I tre blocchi della camera aperta: titolo con filetto, mai un riquadro (come .jo-wheel-sub). */
html body .jo-hroom-edit .fi-section.fi-section.fi-section.jo-hroom-block: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-hroom-edit .fi-section.fi-section.fi-section.jo-hroom-block:not(#jo-sub) > .fi-section-header { padding: 10px 0 6px !important; background: transparent !important; border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border)) !important; border-radius: 0 !important; }
/* "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; }
html body .jo-hroom-edit .fi-section.fi-section.fi-section.jo-hroom-block:not(#jo-sub) > .fi-section-header .fi-section-header-heading { font-size: 13px !important; }
html body .jo-hroom-edit .fi-section.fi-section.fi-section.jo-hroom-block:not(#jo-sub) > .fi-section-content-ctn,
html body .jo-hroom-edit .fi-section.fi-section.fi-section.jo-hroom-block:not(#jo-sub) > .fi-section-content-ctn > .fi-section-content { padding: 10px 0 0 !important; border: 0 !important; background: transparent !important; }
.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 e barra. */
.jo-sec-tab {
    scroll-margin-top: calc(var(--jo-topbar-h, 64px) + 56px);
}

/* 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; }