/* Schede a tessere (owner 3-nov-2026, disegno D; App\Filament\Support\Tiles).
   Le tessere sono Section con .jo-sc-tile su una griglia a 12 colonne
   (.jo-sc-grid): niente accordion, tutti i dati in vista. In lettura i campi
   sono righe nome · valore (.jo-sc-row), la matita apre la tessera in
   modifica sul posto (.is-editing). Colori solo dai token. */

.jo-sc-grid {
    gap: 16px !important;
    align-items: stretch;
}

/* Nelle schede di Filament la griglia vera è dentro .jo-sc-grid (form: figlio,
   infolist: nipote): stessa distanza fra le tessere ovunque (prima 24 o 16px). */
html body .jo-sc-grid > .grid,
html body .jo-sc-grid > * > .grid {
    gap: 16px !important;
}

/* Tre tessere affiancate e alte uguali dove la scheda è larga, una sotto l'altra con
   l'anteprima aperta o su schermi stretti (owner 5-nov-2026, come richiesta e preventivo):
   solo nelle schede che lo chiedono (Tiles::grid(side: true), .jo-sc-trio), dopo aver
   messo l'interno delle card in colonna. In modifica la tessera resta dov'è e com'è: diventa
   modificabile solo il campo (owner 5-nov-2026, «matita = modifica sul posto»). */
.jo-sc-grid.jo-sc-trio { container: jo-sc / inline-size; }
@container jo-sc (min-width: 960px) {
    .jo-sc-trio > .grid > div:has(> .fi-section.jo-sc-tile),
    .jo-sc-trio > * > .grid > div:has(> .fi-section.jo-sc-tile) {
        grid-column: span 4 / span 4 !important;
    }
    /* Due card sole (es. il segmento: Configurazione · Risultati): metà ciascuna, niente buco a destra. */
    /* La prima di due o la seconda di due: un :has() dentro un altro :has() il CSS non lo accetta. */
    .jo-sc-trio > .grid > div:is(:nth-child(1 of :has(> .fi-section.jo-sc-tile)):nth-last-child(2 of :has(> .fi-section.jo-sc-tile)), :nth-child(2 of :has(> .fi-section.jo-sc-tile)):nth-last-child(1 of :has(> .fi-section.jo-sc-tile))),
    .jo-sc-trio > * > .grid > div:is(:nth-child(1 of :has(> .fi-section.jo-sc-tile)):nth-last-child(2 of :has(> .fi-section.jo-sc-tile)), :nth-child(2 of :has(> .fi-section.jo-sc-tile)):nth-last-child(1 of :has(> .fi-section.jo-sc-tile))) {
        grid-column: span 6 / span 6 !important;
    }
    /* Nelle card affiancate le righe di richieste e preventivi: date e ospiti su una riga, sotto stato, importo e freccia. */
    .jo-sc-trio .jo-cq-link { flex-wrap: wrap; row-gap: 4px; }
    .jo-sc-trio .jo-cq-link > .jo-ls-main { flex: 1 1 100%; min-width: 0; }
    .jo-sc-trio .jo-cq-link > .jo-cq-amount { min-width: 0; margin-left: auto; }
}

html body .fi-section.jo-sc-tile {
    height: 100%;
    margin: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
    box-shadow: none;
    opacity: 1;
    filter: none;
}

html body .fi-section.jo-sc-tile.is-editing {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 1px var(--ds-accent);
}

html body .fi-section.jo-sc-tile > .fi-section-header {
    min-height: 0;
    padding: 16px 18px 0;
    border: 0;
    background: transparent;
    cursor: default;
}

html body .fi-section.jo-sc-tile > .fi-section-header .fi-section-header-heading {
    color: var(--ds-text-primary);
    font-size: 15px;
    font-weight: 600;
}

html body .fi-section.jo-sc-tile > .fi-section-header .fi-section-header-description {
    color: var(--ds-text-secondary);
    font-size: 12.5px;
}

/* La nota della tessera («dal gestionale», «da dove arriva») accanto al
   titolo, non su una riga sua: la tessera resta bassa (owner 4-nov-2026,
   niente spazi bianchi). Sul telefono va sotto. */
@media (min-width: 1024px) {
    html body .fi-section.jo-sc-tile > .fi-section-header .grid:has(> .fi-section-header-description) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 10px;
    }
}

html body .fi-section.jo-sc-tile > .fi-section-content-ctn {
    border: 0;
}

html body .fi-section.jo-sc-tile > .fi-section-content-ctn > .fi-section-content {
    padding: 12px 18px 18px;
}

/* Righe nome · valore: una sotto l'altra, divise da una linea sottile. */
html body .jo-sc-tile:not(.is-editing) .fi-fo-component-ctn {
    row-gap: 0 !important;
}

/* Le stesse righe in lettura (.jo-sc-row) e in modifica sul posto (.jo-sc-edit-row, Tiles::field). */
html body .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) {
    padding: 8px 0;
    border-top: 1px solid var(--ds-row-divider);
}

/* Solo la prima riga visibile: le righe dentro un gruppo messo per primo tengono
   la loro linea, e i segnaposto .hidden dei campi nascosti non contano. */
html body .jo-sc-tile .fi-fo-component-ctn > :nth-child(1 of :not(.hidden)) > .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row),
html body .jo-sc-tile .fi-fo-component-ctn > .fi-fo-field-wrp:nth-child(1 of :not(.hidden)):is(:has(.jo-sc-row), .jo-sc-edit-row) {
    padding-top: 0;
    border-top: 0;
}

/* Righe nome · valore (owner 4-nov-2026, «fondamentale», tutte le interfacce):
   il valore non sta più a filo destro, tutti i valori partono dalla stessa
   colonna e si leggono da sinistra; il nome lungo va a capo nella sua colonna.
   --jo-row-label è la larghezza della colonna del nome, una sola per scheda. */
html body .jo-sc-tile {
    --jo-row-label: 40%;
}

html body .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) > .grid {
    display: grid;
    grid-template-columns: minmax(0, var(--jo-row-label)) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
}

/* L'etichetta in linea di Filament dà al valore due colonne su tre: qui una sola. */
html body .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) > .grid > * {
    grid-column: auto;
}

/* Il nome lungo va a capo nella sua colonna, come nei Consensi: i puntini di
   form-standard.css servono ai campi affiancati di un modulo, non alle righe. */
html body .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) .fi-fo-field-wrp-label span {
    color: var(--ds-text-secondary);
    font-size: 13.5px;
    font-weight: 400;
    white-space: normal;
    overflow: visible;
}

html body .jo-sc-tile .jo-sc-row {
    min-width: 0;
    color: var(--ds-text-primary);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Parti della tessera: sotto la linea tratteggiata, col titolo piccolo. */
html body .fi-section.jo-sc-part {
    margin-top: 12px;
    padding-top: 12px;
    border: 0;
    border-top: 1px dashed var(--ds-divider-dashed);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body .fi-section.jo-sc-part > .fi-section-header {
    padding: 0 0 6px;
    border: 0;
    background: transparent;
}

/* Il titolo di una parte: viola JOORNA, con la sua icona (owner 4-nov-2026:
   le parti si distinguono subito; eccezione voluta alla regola «viola solo
   per interazione»). Più forte delle sezioni di form-standard.css. */
html body .fi-section.jo-sc-part .fi-section-header-heading {
    color: var(--ds-accent-fg);
    font-size: 13.5px;
    font-weight: 600;
}

html body .fi-section.jo-sc-part > .fi-section-content-ctn,
html body .fi-section.jo-sc-part > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
    border: 0;
}

/* Avviso «Da sapere»: sempre ambra, il fatto in grassetto, il link a destra. */
.jo-sc-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    border: 1px solid var(--ds-warn-bd);
    border-radius: 12px;
    background: var(--ds-warn-bg);
    color: var(--ds-text-primary);
    font-size: 13.5px;
}

.jo-sc-notice-ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ds-warn-fg);
}

.jo-sc-notice-h {
    color: var(--ds-warn-fg);
    font-size: 14px;
    font-weight: 600;
}

.jo-sc-notice-t b {
    font-weight: 600;
}

.jo-sc-notice-link {
    margin-left: auto;
    color: var(--ds-text-link);
    font-weight: 500;
}

/* Le stesse righe nelle pagine di sola lettura (infolist: TextEntry con inlineLabel e la classe jo-sc-row). */
html body .jo-sc-tile .fi-in-entry-wrp:has(.jo-sc-row) {
    padding: 8px 0;
    border-top: 1px solid var(--ds-row-divider);
}

html body .jo-sc-tile .fi-in-component-ctn > :nth-child(1 of :not(.hidden)) > .fi-in-entry-wrp:has(.jo-sc-row),
html body .jo-sc-tile .fi-in-component-ctn > .fi-in-entry-wrp:nth-child(1 of :not(.hidden)):has(.jo-sc-row) {
    padding-top: 0;
    border-top: 0;
}

html body .jo-sc-tile .fi-in-entry-wrp:has(.jo-sc-row) > .grid {
    display: grid;
    grid-template-columns: minmax(0, var(--jo-row-label)) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
}

html body .jo-sc-tile .fi-in-entry-wrp:has(.jo-sc-row) > .grid > * {
    grid-column: auto;
}

html body .jo-sc-tile .fi-in-entry-wrp:has(.jo-sc-row) .fi-in-entry-wrp-label span {
    color: var(--ds-text-secondary);
    font-size: 13.5px;
    font-weight: 400;
}

html body .jo-sc-tile:not(.is-editing) .fi-in-component-ctn {
    row-gap: 0 !important;
}

/* Le testate e le parti delle tessere non hanno la fascia degli accordion (regole più forti di form-standard.css). */
html body .fi-section.jo-sc-tile > .fi-section-header {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Più forte della sezione annidata a fondo tenue di joorna-refine.css: la parte resta sul fondo della tessera. */
html body .fi-section.jo-sc-tile .fi-section.jo-sc-part:not(.fi-section-not-contained) {
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px dashed var(--ds-divider-dashed) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header {
    padding: 0 0 6px !important;
    border: 0 !important;
    background: transparent !important;
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header .fi-section-header-heading {
    color: var(--ds-accent-fg) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-content-ctn,
html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* In lettura ogni riga prende tutta la tessera. In modifica, dal tablet in su,
   i campi tengono la larghezza dichiarata (FormGrid: larga quanto il dato),
   non più una tendina larga quanto la tessera; sul telefono tutta la riga. */
html body .jo-sc-tile:not(.is-editing) .fi-fo-component-ctn > * {
    grid-column: 1 / -1 !important;
}

/* Una parte in modifica dentro una card in lettura (Tiles::part con edit, la
   card non ha .is-editing): fra i campi lo spazio di un modulo. La larghezza
   resta a tutta riga: un campo senza la sua larghezza erediterebbe quella
   della card e romperebbe la griglia. Le righe che si modificano sul posto
   (.jo-sc-edit-row, qui sotto) restano attaccate come in lettura. */
html body .jo-sc-tile .jo-sc-part.is-editing .fi-fo-component-ctn {
    row-gap: 1.5rem !important;
}

/* Modifica sul posto (owner 4-nov-2026, «la schermata rimane identica ma si
   converte in modificabile»; Tiles::field): con la matita ogni riga resta
   dov'è, il nome nella sua colonna e al posto del valore il suo campo, alto
   quanto la riga. Elenchi ed editor (altri telefoni, editor a blocchi) non
   sono righe: stanno sotto, separati dalla stessa linea. */
html body .fi-section:is(.jo-sc-tile, .jo-sc-part).is-editing .fi-fo-component-ctn:has(> * > .jo-sc-edit-row, > .jo-sc-edit-row) {
    row-gap: 0 !important;
}

html body .jo-sc-tile .fi-fo-component-ctn:has(> * > .jo-sc-edit-row, > .jo-sc-edit-row) > div:not(.hidden):not(:has(> .jo-sc-edit-row)):not(.jo-sc-edit-row):has(.fi-fo-field-wrp) {
    padding: 8px 0;
    border-top: 1px solid var(--ds-row-divider);
}

html body .jo-sc-tile .fi-fo-component-ctn:has(> * > .jo-sc-edit-row, > .jo-sc-edit-row) > div:nth-child(1 of :not(.hidden)) {
    padding-top: 0;
    border-top: 0;
}

/* Di diverso dalla riga in lettura: il campo di 38px (form-standard.css) + 1px sopra
   e sotto + il filetto = 41px, come la riga in lettura; nome centrato sul campo. */
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row {
    padding: 1px 0;
}

html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row > .grid {
    align-items: center;
    row-gap: 4px;
}

/* Consensi: in modifica la riga «Consenso marketing» è il suo interruttore, sopra l'elenco. */
html body .jo-sc-part.is-editing .jo-gs-consent[data-consent="marketing"] {
    display: none;
}

/* Un campo alto (testo lungo, tag, scelta multipla): il nome in alto, sulla prima riga del campo. */
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row:has(textarea, .fi-fo-tags-input, .choices[data-type="select-multiple"]) > .grid {
    align-items: start;
}

html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row:has(textarea, .fi-fo-tags-input, .choices[data-type="select-multiple"]) > .grid > :first-child {
    padding-top: 8px;
}

/* Il dato lungo (un'email) coi puntini finché non ci si clicca dentro. */
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row input:not(:focus) {
    text-overflow: ellipsis;
}

/* Il campo riempie la colonna del valore, anche quello largo quanto il suo dato (FormGrid). */
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row,
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-edit-row .fi-input-wrp {
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 767px) {
    html body .jo-sc-tile.is-editing .fi-fo-component-ctn > *,
    html body .jo-sc-tile .jo-sc-part.is-editing .fi-fo-component-ctn > * {
        grid-column: 1 / -1 !important;
    }

    html body .jo-sc-tile .fi-fo-field-wrp[data-jo-span="exact"],
    html body .jo-sc-tile [data-jo-span="exact"] .fi-input-wrp {
        width: auto !important;
        max-width: none !important;
    }
}

/* Righe su colonne affiancate in una tessera a tutta riga (Tiles::columns):
   ogni colonna tiene la sua larghezza, sul telefono una sotto l'altra. */
html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn {
    column-gap: 32px !important;
    row-gap: 12px !important;
}

html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn > * {
    grid-column: var(--col-span-default) !important;
}

/* Le informazioni ben distinte (owner 3-nov-2026 sera): fra una colonna e
   l'altra la stessa linea tratteggiata delle parti; sul telefono, dove vanno
   una sotto l'altra, la linea sta sopra. */
html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn > * + * {
    padding-top: 12px;
    border-top: 1px dashed var(--ds-divider-dashed);
}

@media (min-width: 1024px) {
    html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn {
        column-gap: 24px !important;
    }

    html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn > * {
        grid-column: var(--col-span-lg, var(--col-span-default)) !important;
    }

    html body .jo-sc-tile .jo-sc-cols > .fi-fo-component-ctn > * + * {
        padding-top: 0;
        padding-left: 24px;
        border-top: 0;
        border-left: 1px dashed var(--ds-divider-dashed);
    }
}

/* La parte in cima a una colonna non ha la linea sopra: la colonna parte già lì. */
html body .jo-sc-tile .jo-sc-cols .fi-fo-component-ctn > :first-child > .fi-section.jo-sc-part {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* Percorso (scheda lead, Tiles::path): i passi in fila, quello di adesso in
   evidenza, sotto il prossimo passo col suo link a destra. */
.jo-sc-path {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    background: var(--ds-surface);
}

.jo-sc-path-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jo-sc-path-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.jo-sc-path-steps i {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 999px;
    border: 1.5px solid var(--ds-border-strong);
    background: var(--ds-surface);
}

.jo-sc-path-steps li.is-done i {
    border-color: var(--ds-lime-fg);
    background: var(--ds-lime);
}

.jo-sc-path-steps li.is-current {
    color: var(--ds-text-primary);
    font-weight: 600;
}

.jo-sc-path-steps li.is-current i {
    border-color: var(--ds-accent);
    background: var(--ds-accent);
    box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.jo-sc-path-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--ds-divider-dashed);
    font-size: 13.5px;
    color: var(--ds-text-secondary);
}

.jo-sc-path-next strong {
    color: var(--ds-text-primary);
    font-weight: 600;
}

.jo-sc-path-next a {
    margin-left: auto;
    color: var(--ds-accent);
    font-weight: 500;
}

/* Nelle tessere a tutta riga i consensi stanno su una riga sola e le preferenze su due colonne. */
html body .jo-sc-tile .jo-gs-consents {
    margin-top: 0;
}

html body .jo-sc-tile .jo-gs-consent {
    grid-template-columns: minmax(0, var(--jo-row-label)) minmax(0, 1fr);
    column-gap: 12px;
    padding: 8px 0;
    font-size: 13.5px;
}

/* Il nome della riga con lo stesso grigio delle altre righe della tessera. */
html body .jo-sc-tile .jo-gs-consent dt {
    color: var(--ds-text-secondary);
}

/* L'email nella colonna stretta di Come contattarlo: il nome sopra, l'indirizzo
   intero a tutta riga, in lettura e in modifica (owner 4-nov-2026 sera). */
html body .jo-sc-tile .fi-fo-field-wrp:has(.jo-sc-row--stack) > .grid,
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-stack > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 2px;
}

html body .jo-sc-tile .fi-fo-field-wrp:has(.jo-sc-row--stack) > .grid > *,
html body .jo-sc-tile .fi-fo-field-wrp.jo-sc-stack > .grid > * {
    grid-column: 1 / -1 !important;
}

html body .jo-sc-tile .jo-sc-row--stack {
    overflow-wrap: anywhere;
}

/* Il registro dei consensi: l'icona accanto al valore di «Consenso marketing» lo apre
   lì sotto, a tutta riga (owner 4-nov-2026 sera); prima era una parte sua. */
.jo-gs-log-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--ds-radius-control);
    background: transparent;
    color: var(--ds-text-tertiary);
    cursor: pointer;
}

.jo-gs-log-btn svg {
    width: 16px;
    height: 16px;
}

.jo-gs-log-btn:hover,
.jo-gs-log-btn.is-open {
    background: var(--ds-accent-soft);
    color: var(--ds-accent);
}

html body .jo-gs-consent > .jo-gs-log {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: var(--ds-radius-control);
    background: var(--ds-surface-2, var(--ds-off-bg));
}

/* Le righe dei pannelli dentro le tessere (preferenze e interessi) come le altre righe. */
html body .jo-sc-tile .jo-gp-row {
    grid-template-columns: minmax(0, var(--jo-row-label)) minmax(0, 1fr);
    column-gap: 12px;
}

/* La riga di contesto sotto un valore (es. la sorgente del contatto). */
html body .jo-sc-tile .jo-sc-row-note {
    display: block;
    margin-top: 2px;
    color: var(--ds-text-tertiary);
    font-size: 12px;
    font-weight: 400;
}

@media (min-width: 1024px) {
    /* Le preferenze una per riga, a tutta riga (owner 4-nov-2026 sera: a coppie,
       leggendo da sinistra a destra, «Dai soggiorni» si mescolava con
       «Interessi»): il nome largo come nelle colonne del Profilo sopra. */
    html body .jo-sc-tile .fi-section.jo-sc-part#preferenze {
        --jo-row-label: 13rem;
    }

    /* La riga lunga (le preferenze dichiarate) resta in fondo, come prima. */
    html body .jo-sc-tile .jo-gp-interests .jo-gp-rows {
        display: flex;
        flex-direction: column;
    }

    html body .jo-sc-tile .jo-gp-interests .jo-gp-rows > .jo-gp-row--wide {
        order: 1;
    }

    /* A tutta riga un soggiorno sta su una riga sola: date · camera · stato e notti · importo. */
    html body .jo-sc-tile .jo-ls-stay .jo-ls-detail {
        flex-basis: auto;
    }
}

/* Tabella dentro una tessera (owner 3-nov-2026): la barra della tabella
   (Cerca, Lista/Card, Colonne) sale sulla riga del titolo, niente fascia
   vuota sotto il titolo. Solo dove la tessera è larga abbastanza per tutti e
   due; le azioni sui selezionati compaiono accanto a Cerca, mai sul titolo. */
.fi-section.jo-sc-tile:has(.fi-ta-header-toolbar):not(:has(> .fi-section-header .fi-section-header-description)) {
    container-type: inline-size;
}

@container (min-width: 560px) {
    .jo-sc-tile > .fi-section-content-ctn .fi-ta-header-toolbar {
        margin-top: -52px;
        pointer-events: none;
    }

    .jo-sc-tile > .fi-section-content-ctn .fi-ta-header-toolbar > * {
        pointer-events: auto;
    }

    .jo-sc-tile > .fi-section-content-ctn .fi-ta-header-toolbar > :first-child {
        margin-inline-start: auto;
    }

    .jo-sc-tile > .fi-section-content-ctn .fi-ta-header-toolbar > :last-child {
        margin-inline-start: 0;
    }
}

/* Tessera o parte senza dati (owner 3-nov-2026: niente vuoti che non dicono
   niente): la stessa riga tratteggiata con la frase che lo dice, come nel
   segmento, nell'automazione e nel voucher (es. «Nessuna richiesta.»). */
html body .jo-sc-tile .jo-gp-empty {
    margin: 0;
    padding: 16px 14px;
    border: 1px dashed var(--ds-divider-dashed);
    border-radius: 10px;
    color: var(--ds-text-secondary);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

/* L'icona accanto al titolo della tessera (TileIcons, ui-standard.js): la
   tessera lilla tenue delle card (owner 9-ott-2026, «card meno asettiche»),
   un poco più piccola del titolo (owner 4-nov-2026, «schede meno piatte»). */
html body .fi-section.jo-sc-tile > .fi-section-header .jo-sc-tile-ic {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px 0;
    border-radius: 8px;
    background: var(--ds-accent-soft);
    color: var(--ds-auto-fg);
}

html body .fi-section.jo-sc-tile > .fi-section-header .jo-sc-tile-ic svg {
    width: 16px;
    height: 16px;
}

/* Sul telefono il titolo, la sua icona e la matita (o il «+») restano su una
   riga, la matita a destra: in tutte le schede (prima scritto area per area),
   anche nelle parti (il «+» di Preventivi). */
@media (max-width: 639px) {
    html body .fi-section.jo-sc-tile > .fi-section-header,
    html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    html body .fi-section.jo-sc-tile > .fi-section-header > :first-child,
    html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* La bandiera accanto al nome nel titolo della scheda ospite: più piccola del nome. */
.fi-header-heading .jo-flag {
    font-size: .72em;
    vertical-align: .12em;
}

/* Il Profilo su quattro colonne (Tiles::quarters): due per riga sul portatile,
   con la linea tratteggiata fra le due e sopra la seconda fila. */
@media (min-width: 1024px) and (max-width: 1279px) {
    html body .jo-sc-tile .jo-sc-cols--4 > .fi-fo-component-ctn > :nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    html body .jo-sc-tile .jo-sc-cols--4 > .fi-fo-component-ctn > :nth-child(n + 3) {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px dashed var(--ds-divider-dashed);
    }
}

/* Il titolo di una parte con la sua matita: la matita a destra, sulla stessa riga. */
html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Le note nella card Dettagli: il campo in alto, le note sotto, una sotto
   l'altra (owner 4-nov-2026 sera; prima si leggevano a destra del campo). */
html body .jo-sc-tile .jo-gp-card > form.jo-lp-note ~ .jo-gs-notes,
html body .jo-sc-tile .jo-gs-panel--part > form.jo-lp-note ~ .jo-gp-list,
html body .jo-sc-tile .jo-gp-card > form.jo-lp-note ~ .jo-gp-empty,
html body .jo-sc-tile .jo-gs-panel--part > form.jo-lp-note ~ .jo-gp-empty {
    margin-top: 12px;
}

/* Nelle colonne del Profilo (Tiles::quarters) le righe dei pannelli come le
   altre righe della card; i dettagli dei consensi vanno sotto. */
html body .jo-sc-tile .jo-sc-cols--4 .jo-gp-row {
    padding: 8px 0;
}

html body .jo-sc-tile .jo-sc-cols--4 .jo-gs-consent dd > .jo-gp-muted {
    flex-basis: 100%;
    font-size: 12px;
}

/* Nelle colonne strette del Profilo il nome ha un po' più di posto. */
html body .jo-sc-tile .jo-sc-cols--4 {
    --jo-row-label: 46%;
}

/* La prima parte di una card non ha la linea sopra: la card parte già lì (nei
   form e nelle infolist la parte sta in una colonna della griglia, nelle schede in Blade è figlia diretta). */
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > .fi-fo-component-ctn > :nth-child(1 of :not(.hidden)) > .fi-section.jo-sc-part:not(.fi-section-not-contained),
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > dl > .fi-fo-component-ctn > :nth-child(1 of :not(.hidden)) > .fi-section.jo-sc-part:not(.fi-section-not-contained),
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > .fi-section.jo-sc-part:nth-child(1 of :not(.hidden)):not(.fi-section-not-contained) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* La nota di una parte («dal gestionale») accanto al suo titolo, come nelle card. */
html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header .grid:has(> .fi-section-header-description) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

/* Una card che ha solo la riga «Ancora niente» (i Risultati prima del primo
   invio): la riga sta subito sotto il titolo, senza la linea sopra. */
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > .fi-fo-component-ctn > :nth-child(1 of :not(.hidden)) > .fi-fo-field-wrp:has(.jo-ny),
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > dl > .fi-fo-component-ctn > :nth-child(1 of :not(.hidden)) .jo-ny-line,
html body .jo-sc-tile > .fi-section-content-ctn > .fi-section-content > .jo-ny-line:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* «Ancora niente: Richieste · Preventivi» (NothingYet): una riga evidente in
   fondo alla card, tratteggiata, che dice che è vuoto e, a destra, da dove si
   crea: «+ Nuova richiesta» in viola (owner 4-nov-2026 sera: era «troppo tenue»). */
html body .jo-sc-tile .fi-fo-field-wrp:has(.jo-ny),
html body .jo-sc-tile .jo-ny-line {
    margin-top: 14px;
}

.jo-ny {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    min-height: 44px;
    padding: 6px 8px 6px 14px;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius-control);
    color: var(--ds-text-secondary);
    font-size: 13px;
}

.jo-ny-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.jo-ny-h {
    font-weight: 500;
    color: var(--ds-text-primary);
}

.jo-ny-sep {
    color: var(--ds-text-tertiary);
}

.jo-ny-adds {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.jo-ny-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--ds-radius-control);
    background: transparent;
    color: var(--ds-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.jo-ny-new svg {
    width: 16px;
    height: 16px;
}

.jo-ny-new:hover {
    background: var(--ds-accent-soft);
}

/* Le parti dentro le card si distinguono subito (owner 4-nov-2026, scelta
   «icona e titolo viola»): la piccola icona lilla del loro concetto
   (TileIcons, ui-standard.js) accanto al titolo viola; la linea tratteggiata resta. */
html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header .jo-sc-part-ic {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: -2px 0;
    border-radius: 6px;
    background: var(--ds-accent-soft);
    color: var(--ds-accent-fg);
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header .jo-sc-part-ic svg {
    width: 13px;
    height: 13px;
}

html body .jo-sc-tile .fi-section.jo-sc-part > .fi-section-header > :first-child {
    gap: 8px;
}

/* Titolo della card solo con più parti (owner 4-nov-2026, ui-standard.js): con
   una parte sola la card non ha il suo titolo e la parte fa da titolo, col
   disegno e l'icona del titolo della card; con più parti il titolo della card
   sta vicino alle parti. */
html body .fi-section.jo-sc-tile.is-single > .fi-section-header {
    display: none;
}

html body .fi-section.jo-sc-tile.is-single > .fi-section-content-ctn > .fi-section-content {
    padding-top: 16px;
}

/* Solo le card con più parti: una card senza parti (la tabella dei Destinatari) tiene i
   12px, su cui la barra della tabella sale nella riga del titolo (-52px qui sopra). */
html body .fi-section.jo-sc-tile.is-multi > .fi-section-content-ctn > .fi-section-content {
    padding-top: 4px;
}

/* La parte che fa da titolo ha la misura del titolo della card (owner 5-nov-2026: card
   affiancate con titoli di due misure diverse). */
html body .jo-sc-tile .fi-section.jo-sc-part.is-lead > .fi-section-header .fi-section-header-heading {
    color: var(--ds-text-primary) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

html body .jo-sc-tile .fi-section.jo-sc-part.is-lead > .fi-section-header .jo-sc-part-ic {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

html body .jo-sc-tile .fi-section.jo-sc-part.is-lead > .fi-section-header .jo-sc-part-ic svg {
    width: 16px;
    height: 16px;
}

html body .jo-sc-tile .fi-section.jo-sc-part.is-lead > .fi-section-header > :first-child {
    gap: 12px;
}

/* Nome e cognome nel titolo della pagina (Tiles::inTitle, owner 4-nov-2026): nel modulo
   per il salvataggio, non nella parte; nel titolo i due campi accanto alla bandiera e alla
   categoria, l'errore sotto (filament.scheda.name-in-title). */
html body .jo-sc-tile .fi-fo-component-ctn > div:has(> .jo-sc-in-title) {
    display: none;
}

.jo-nit {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    max-width: 100%;
    vertical-align: top;
}

.jo-nit .jo-cin-error {
    flex-basis: 100%;
}

/* Card compatte (Tiles::grid con side o compact, .jo-sc-compact; owner 5-nov-2026, «le card non possono
   essere così massicce», come i Dettagli della richiesta): righe basse senza linee, il dato
   che manca non si mostra (.is-empty), i consensi in una riga di pallini col valore nel tooltip. */
html body .jo-sc-compact .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) {
    padding: 2px 0;
    border-top: 0;
}

html body .jo-sc-compact .jo-sc-tile .fi-fo-field-wrp:is(:has(.jo-sc-row), .jo-sc-edit-row) .fi-fo-field-wrp-label span,
html body .jo-sc-compact .jo-sc-tile .jo-sc-row {
    font-size: 13px;
    line-height: 20px;
}

html body .jo-sc-compact .jo-sc-tile .fi-fo-field-wrp:has(.jo-sc-row.is-empty),
html body .jo-sc-compact .jo-sc-tile .jo-gp-row.is-empty {
    display: none;
}

html body .jo-sc-compact .jo-sc-tile .jo-sc-row-note {
    margin-top: 0;
    line-height: 18px;
}

/* Le preferenze col nome largo quanto le altre righe; la riga lunga col nome sopra. */
html body .jo-sc-compact .jo-sc-tile .fi-section.jo-sc-part#preferenze {
    --jo-row-label: 40%;
}

html body .jo-sc-compact .jo-sc-tile .jo-gp-row {
    padding: 2px 0;
    border-top: 0;
    font-size: 13px;
    line-height: 20px;
}

html body .jo-sc-compact .jo-sc-tile .jo-gp-row > dt {
    padding-top: 0;
}

html body .jo-sc-compact .jo-sc-tile .jo-gp-row--wide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
}

html body .jo-sc-compact .jo-sc-tile .jo-gp-row > dd.jo-gp-row-list {
    gap: 2px;
}

/* Consensi: un pallino col nome (verde dato, rosso negato, grigio mancante). */
.jo-gs-consent-dot {
    display: none;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 24px;
    padding: 0;
    border: 0;
    font-size: 12.5px;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ds-off-dot);
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent.is-on .jo-gs-consent-dot {
    background: var(--ds-ok-dot);
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent.is-denied .jo-gs-consent-dot {
    background: var(--ds-err-dot);
}

/* Il valore e il dettaglio restano per chi legge con lo screen reader; in vista l'icona del registro. */
html body .jo-sc-compact .jo-sc-tile .jo-gs-consent dd > :not(.jo-gs-log-btn) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Il registro aperto va sotto, a tutta riga. */
html body .jo-sc-compact .jo-sc-tile .jo-gs-consent:has(.jo-gs-log-btn.is-open) {
    flex-basis: 100%;
    flex-wrap: wrap;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-consent > .jo-gs-log {
    flex-basis: 100%;
}

html body .jo-sc-compact .jo-sc-part.is-editing .jo-gs-consent[data-consent="marketing"] {
    display: none;
}

/* Attività nelle card affiancate: un soggiorno in due righe (date e importo, camera e stato; anche sul telefono),
   le camere e lo storico con le righe più basse. */
@container jo-sc (min-width: 960px) or (max-width: 639px) {
    html body .jo-sc-trio .jo-ls-stay > .jo-cq-link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0 8px;
    }

    html body .jo-sc-trio .jo-ls-stay > .jo-cq-link > .jo-ls-main {
        display: contents;
    }

    html body .jo-sc-trio .jo-ls-stay .jo-ls-main > strong { grid-area: 1 / 1; white-space: nowrap; }
    html body .jo-sc-trio .jo-ls-stay .jo-cq-amount { grid-area: 1 / 2; min-width: 0; margin: 0; }
    html body .jo-sc-trio .jo-ls-stay .jo-cq-go { grid-area: 1 / 3 / 3 / 4; }
    html body .jo-sc-trio .jo-ls-stay .jo-cq-party { grid-area: 2 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html body .jo-sc-trio .jo-ls-stay .jo-ls-detail { grid-area: 2 / 2; flex-basis: auto; text-align: right; }
    html body .jo-sc-trio .jo-ls-stay .jo-ls-group { grid-area: 3 / 1 / 4 / 3; }
}

html body .jo-sc-compact .jo-sc-tile .jo-cq-link {
    padding: 6px 8px;
}

html body .jo-sc-compact .jo-sc-tile .jo-ls-row {
    padding: 2px 0;
}

html body .jo-sc-compact .jo-sc-tile .jo-gs-timeline > li {
    padding: 5px 0;
}

/* Le note: la riga vuota tratteggiata più bassa sotto il campo. */
html body .jo-sc-compact .jo-sc-tile .jo-lp-note ~ .jo-gp-empty {
    padding: 8px 12px;
    font-size: 12px;
}

/* La camera preferita nelle Preferenze: il nome apre la camera. */
html body .jo-sc-tile .jo-gp-row a.jo-gp-room {
    color: var(--ds-text-link);
}

/* La parte che fa da titolo senza icona (il nome del cliente) sulla linea dei titoli con
   l'icona: nelle card affiancate i titoli stanno alla stessa altezza (owner 5-nov-2026, al pixel). */
html body .jo-sc-trio .jo-sc-tile .fi-section.jo-sc-part.is-lead > .fi-section-header:not(:has(.jo-sc-part-ic)) {
    padding-top: 6px !important;
}