/* Standard UX/UI Joorna — regole comuni alle pagine ridisegnate.
 *
 * Valgono solo dove la pagina mette `jo-std` sul body (trait
 * App\Filament\Concerns\UsesJoornaStandard): Schede hotel, Connessioni e le
 * prossime sezioni. Stessi token della Dashboard Generale: bordo sottile,
 * raggio 14px, testi secondari dai token, tessere colorate per le icone.
 *
 * CSS a mano come gli altri file di public/css: deploy PHP-only, nei blade
 * valgono solo le classi già compilate da Filament.
 */

:root {
    /* Livello locale: tutto dai token --ds-* (joorna-tokens.css), che
     * cambiano da soli in dark. */
    --jo-ui-ink: var(--ds-text-primary);
    --jo-ui-muted: var(--ds-text-tertiary);
    --jo-ui-line: var(--ds-border);
    --jo-ui-line-2: var(--ds-row-divider);
    --jo-ui-surface: var(--ds-surface);
    --jo-ui-soft: var(--ds-surface-sunken);
    --jo-ui-accent: var(--ds-accent);
    --jo-ui-accent-soft: var(--ds-accent-soft);
    --jo-ui-radius: 14px;
    --jo-ui-ok: var(--ds-ok-fg);
    --jo-ui-ok-bg: var(--ds-ok-bg);
    --jo-ui-warn: var(--ds-warn-fg);
    --jo-ui-warn-bg: var(--ds-warn-bg);
    --jo-ui-danger: var(--ds-err-fg);
    --jo-ui-danger-bg: var(--ds-err-bg);
    --jo-ui-info: var(--ds-info-fg);
    --jo-ui-info-bg: var(--ds-info-bg);
}

/* Descrizione breve sotto il titolo: il posto dell'info point. */
.jo-page-desc {
    display: block;
    max-width: 48rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--jo-ui-muted);
}

/* ── Tabelle: su TUTTE le tabelle della piattaforma (standard permanente) ── */

.fi-ta-ctn {
    border-radius: var(--jo-ui-radius);
    box-shadow: var(--ds-shadow-rest);
    outline: 1px solid var(--jo-ui-line);
    --tw-ring-color: transparent;
}

.fi-ta-header-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--jo-ui-soft);
}

.fi-ta-header-cell-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--jo-ui-muted);
}

.fi-ta-text-item,
.fi-ta-text {
    font-size: 13.5px;
}

.fi-ta-text-item-label {
    line-height: 1.35;
}

/* Righe più basse: il padding verticale di Filament sta sul contenuto
 * della cella (py-4), non sul suo contenitore. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-icon,
.fi-ta-cell > .py-4 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.fi-ta-filters-above-content-ctn {
    padding-top: 14px;
    padding-bottom: 6px;
}

/* ── Sezioni dei form ─────────────────────────────────────── */

.jo-std .fi-section {
    border-radius: var(--jo-ui-radius);
}

.jo-std .fi-section-header-heading {
    font-size: 15px;
}

.jo-std .fi-section-header-description {
    font-size: 13px;
}

/* ── Filtri rapidi (standard, 28-set) ─────────────────────────
 * Pill compatte con conteggio sopra il contenuto: Tutti · Attivi · …
 * Valgono per le schede delle liste (getTabs, override
 * vendor/filament-panels/components/resources/tabs) e per le pagine custom
 * (<x-jo.quick-filters>). Solo per filtri dello STESSO insieme di dati: la
 * navigazione fra sezioni diverse resta a schede. */

.fi-tabs.jo-qf {
    gap: 6px;
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    --tw-ring-color: transparent;
}

.jo-qf .fi-tabs-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 999px;
    background: var(--jo-ui-surface);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

.jo-qf .fi-tabs-item:hover {
    background: var(--jo-ui-soft);
}

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

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

.jo-qf .fi-tabs-item.fi-active {
    border-color: color-mix(in srgb, var(--jo-ui-accent) 35%, transparent);
    background: var(--jo-ui-accent-soft);
}

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

.jo-qf .fi-badge {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--jo-ui-muted);
    --tw-ring-color: transparent;
}

.jo-qf .fi-tabs-item.fi-active .fi-badge {
    background: var(--jo-ui-accent);
    color: #fff;
}

/* ── KPI compatti (stesso disegno della Dashboard Generale) ── */

.jo-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .jo-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .jo-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.jo-kpi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
    box-shadow: var(--ds-shadow-rest);
}

.jo-kpi-top {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.jo-kpi-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
}

.jo-kpi-ic svg {
    width: 15px;
    height: 15px;
}

.jo-kpi-ic.t-ok { background: var(--jo-ui-ok-bg); color: var(--jo-ui-ok); }
.jo-kpi-ic.t-warn { background: var(--jo-ui-warn-bg); color: var(--jo-ui-warn); }
.jo-kpi-ic.t-danger { background: var(--jo-ui-danger-bg); color: var(--jo-ui-danger); }
.jo-kpi-ic.t-info { background: var(--jo-ui-info-bg); color: var(--jo-ui-info); }

.jo-kpi-lbl {
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--jo-ui-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jo-kpi-val {
    margin-top: 8px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--jo-ui-ink);
}

.jo-kpi-val.is-danger { color: var(--jo-ui-danger); }
.jo-kpi-val.is-warn { color: var(--jo-ui-warn); }

/* ── Card informative e fatti ─────────────────────────────── */

.jo-panel {
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
    box-shadow: var(--ds-shadow-rest);
    color: var(--jo-ui-ink);
    font-size: 14px;
}

.jo-panel h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.jo-panel-hint {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jo-panel-body {
    margin-top: 14px;
}

/* Tabelle dati semplici dentro una card (non tabelle Filament): una sola
 * versione per tutta la piattaforma (Chatbot, Preventivatore ▸ Numeri,
 * Analytics ▸ Email). .num = numero a destra; tr.is-none attenuata;
 * tr.is-on evidenziata; .is-warn / .is-ok colorano il valore. */
.jo-mtable-wrap { max-width: 100%; overflow-x: auto; }

.jo-mtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--jo-ui-ink);
}

.jo-mtable th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--jo-ui-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--jo-ui-muted);
    text-align: left;
    white-space: nowrap;
}

.jo-mtable td { padding: 8px 10px; border-bottom: 1px solid var(--jo-ui-line-2); }
.jo-mtable tr:last-child td { border-bottom: 0; }
.jo-mtable th:first-child,
.jo-mtable td:first-child { padding-left: 0; }
.jo-mtable th:last-child,
.jo-mtable td:last-child { padding-right: 0; }
.jo-mtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jo-mtable tr.is-none td { color: var(--jo-ui-muted); }
.jo-mtable tr.is-on td { background: var(--jo-ui-accent-soft); color: var(--jo-ui-accent); font-weight: 600; }
.jo-mtable .is-warn { color: var(--jo-ui-warn); }
.jo-mtable .is-ok { color: var(--jo-ui-ok); }

.jo-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1024px) {
    .jo-cols--1-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--jo-ui-line);
    border-radius: 12px;
    overflow: hidden;
}

.jo-facts > div {
    padding: 10px 14px;
    border-right: 1px solid var(--jo-ui-line);
    min-width: 0;
}

.jo-facts > div:last-child {
    border-right: 0;
}

.jo-facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-facts dd {
    margin: 3px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.jo-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: jo-step;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    color: var(--jo-ui-muted);
}

.jo-steps li {
    position: relative;
    padding-left: 30px;
}

.jo-steps li::before {
    counter-increment: jo-step;
    content: counter(jo-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jo-steps strong {
    color: var(--jo-ui-ink);
}

.jo-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--jo-ui-soft);
    border: 1px solid var(--jo-ui-line);
    overflow-wrap: anywhere;
}

/* ── Filtri nell'header delle colonne (ColumnFilters) ─────── */

.jo-colh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.jo-colf {
    display: inline-flex;
}

.jo-colf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    color: var(--jo-ui-muted);
    opacity: 0.55;
    cursor: pointer;
}

.fi-ta-header-cell:hover .jo-colf-btn,
.jo-colf-btn:focus-visible {
    opacity: 1;
}

.jo-colf-btn:hover {
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
    opacity: 1;
}

.jo-colf-btn.is-active {
    opacity: 1;
    color: var(--jo-ui-accent);
    background: var(--jo-ui-accent-soft);
}

.jo-colf-btn svg {
    width: 13px;
    height: 13px;
}

.jo-colf-panel {
    position: fixed;
    z-index: 60;
    width: 264px;
    max-height: 340px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 12px;
    background: var(--jo-ui-surface);
    box-shadow: var(--ds-shadow-raised);
    color: var(--jo-ui-ink);
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.jo-colf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-colf-reset {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--jo-ui-accent);
}

.jo-colf-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jo-colf-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    cursor: pointer;
}

.jo-colf-option:hover {
    background: var(--jo-ui-soft);
}

.jo-colf-option input {
    accent-color: var(--jo-ui-accent);
}

.jo-colf-input {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 8px;
    background: var(--jo-ui-surface);
    color: var(--jo-ui-ink);
    font-size: 13px;
}

.jo-colf-input:focus {
    outline: 2px solid var(--jo-ui-accent-soft);
    border-color: var(--jo-ui-accent);
}

.jo-colf-dates {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jo-colf-dates label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

/* ── Colonne riordinabili e ridimensionabili (table-columns.js) ── */

.jo-col-th {
    position: relative;
    cursor: grab;
}

.jo-col-th.jo-col-dragging {
    opacity: 0.5;
}

.jo-col-th.jo-col-over {
    box-shadow: inset 2px 0 0 var(--jo-ui-accent);
}

.jo-col-grip {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    right: 0;
    width: 7px;
    cursor: col-resize;
    border-right: 2px solid transparent;
}

.jo-col-th:hover .jo-col-grip {
    border-right-color: var(--ds-border-strong, #C9CDD8);
}

.jo-col-grip:hover,
.jo-col-resizing .jo-col-grip {
    border-right-color: var(--jo-primary-500, #8536ff);
}

.jo-col-resizing,
.jo-col-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

.jo-cols-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--jo-ui-muted);
}

.jo-cols-reset[hidden] {
    display: none;
}

.jo-cols-reset:hover {
    background: var(--jo-ui-soft);
    color: var(--jo-ui-accent);
}

.jo-cols-reset svg {
    width: 18px;
    height: 18px;
}

/* ── Barra tabella: Lista/Card e legenda (HasListCardLayout) ── */

.jo-hl-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jo-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 10px;
    background: var(--jo-ui-surface);
}

.jo-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    /* 28 + 3+3 di padding + 1+1 di bordo = 36: alto come ricerca e pulsanti. */
    height: 28px;
    border-radius: 7px;
    color: var(--jo-ui-muted);
}

.jo-seg button:hover {
    color: var(--jo-ui-ink);
}

.jo-seg button[aria-pressed='true'] {
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
}

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

.jo-legend {
    padding: 10px 12px;
    font-size: 13px;
}

.jo-legend-title {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.jo-legend-note {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid var(--jo-ui-line-2);
    color: var(--jo-ui-muted);
    font-size: 12px;
}

/* ── Moduli a icone ───────────────────────────────────────── */

.jo-mods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.jo-mod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
    font-size: 11px;
    font-weight: 600;
}

.jo-mod svg {
    width: 14px;
    height: 14px;
}

.jo-dash {
    font-size: 13px;
    color: var(--jo-ui-muted);
}

/* Tutti i filtri sono nelle intestazioni: il pulsante imbuto della barra no. */
.fi-ta .jo-filters-trigger-off,
.fi-dropdown:has(> .fi-dropdown-trigger .jo-filters-trigger-off) {
    display: none !important;
}

/* ── Card dei cataloghi (Servizi struttura, Catalogo CTA) ── */

.jo-cat-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
}

.jo-cat-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-cat-group-title span {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    font-weight: 600;
}

.jo-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 10px;
}

.jo-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 12px;
    background: var(--jo-ui-surface);
    color: var(--jo-ui-ink);
    text-align: left;
    transition: border-color 0.15s;
}

.jo-cat-card:hover {
    border-color: var(--jo-ui-accent);
}

.jo-cat-card-name {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-cat-card-meta {
    font-size: 12px;
    color: var(--jo-ui-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-cat-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--jo-ui-muted);
}

/* Il pulsante CTA com'è, con i suoi colori (inline). */
.jo-cta-btn {
    display: inline-block;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 0 0 1px var(--ds-row-divider);
}

/* ── Modelli ▸ Marketing e automazioni: eventi in card ───── */

.jo-ev-card {
    gap: 8px;
}

.jo-ev-card-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.jo-ev-icon {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
}

.jo-ev-icon svg {
    width: 17px;
    height: 17px;
}

.jo-ev-icon--success { background: var(--jo-ui-ok-bg); color: var(--jo-ui-ok); }
.jo-ev-icon--warning { background: var(--jo-ui-warn-bg); color: var(--jo-ui-warn); }
.jo-ev-icon--danger,
.jo-ev-icon--pink { background: var(--jo-ui-danger-bg); color: var(--jo-ui-danger); }
.jo-ev-icon--primary,
.jo-ev-icon--info { background: var(--jo-ui-info-bg); color: var(--jo-ui-info); }

.jo-ev-card-desc {
    flex: 1;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--jo-ui-muted);
}

/* ── Modelli: card con anteprima (Grafica voucher, Email) ── */

.jo-tpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.jo-tpl-card {
    gap: 8px;
}

.jo-tpl-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--jo-ui-soft);
}

.jo-tpl-thumb[href] {
    cursor: pointer;
}

.jo-tpl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Anteprima dal vivo (nessun PNG): l'email a 600px, rimpicciolita per la card. */
.jo-tpl-thumb-frame {
    position: absolute;
    top: 0;
    left: 50%;
    width: 600px;
    height: 560px;
    margin-left: -300px;
    border: 0;
    transform: scale(.38);
    transform-origin: top center;
    pointer-events: none;
    background: #ffffff; /* l'email vera è bianca */
}

.jo-tpl-meta {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-tpl-thumb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    color: var(--jo-ui-muted);
}

.jo-tpl-thumb-empty svg {
    width: 26px;
    height: 26px;
    opacity: 0.6;
}

.jo-tpl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
}

.jo-tpl-actions {
    width: 100%;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--jo-ui-line-2);
}

/* ══ Standard tabelle, globale (tutte le tabelle) ══════════════ */

/* Dogma: stato con icona = solo icona (il testo è nel tooltip). */
/* "Azzera filtri": sempre nello stesso punto, spento se non c'è niente da togliere. */
.jo-filters-reset {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--jo-ui-accent);
}

.jo-filters-reset:hover:not(:disabled) {
    background: var(--jo-ui-soft);
}

.jo-filters-reset:disabled {
    color: var(--jo-ui-muted);
    opacity: 0.45;
    cursor: default;
}

.jo-filters-reset > svg {
    width: 18px;
    height: 18px;
}

.jo-filters-reset-x {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: inline-flex;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--jo-ui-surface);
}

.jo-filters-reset-x svg {
    width: 11px;
    height: 11px;
}

/* ── Vista Card generica (public/js/table-columns.js) ── */

.jo-ta-cards .fi-ta-content {
    overflow: visible;
}

.jo-ta-cards table.fi-ta-table,
.jo-ta-cards table.fi-ta-table > tbody {
    display: block;
    width: 100%;
}

/* Niente intestazioni in Card: filtri di colonna e ordinamento stanno
   solo nella Lista (i filtri attivi restano applicati, "Azzera filtri"
   resta nella barra). */
.jo-ta-cards table.fi-ta-table > thead {
    display: none;
}

.jo-ta-cards table.fi-ta-table > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 10px;
    padding: 14px;
}

.jo-ta-cards table.fi-ta-table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--jo-ui-line);
    /* Il divisore delle righe di Filament (divide-y) toglieva il bordo di sotto
       dalla seconda card in poi: card "tagliate" (owner 9-ott-2026). */
    border-width: 1px !important;
    border-radius: 12px;
    background: var(--jo-ui-surface);
}

.jo-ta-cards table.fi-ta-table > tbody > tr:hover {
    border-color: var(--jo-ui-accent);
}

/* Righe di gruppo: tutta la larghezza, come titolo di sezione. */
.jo-ta-cards table.fi-ta-table > tbody > tr:has(> td[colspan]) {
    grid-column: 1 / -1;
    padding: 4px 2px;
    border: 0;
    background: none;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 0 !important;
    border: 0;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td > * {
    min-width: 0;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-col-wrp > *,
.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-text {
    padding: 2px 0 !important;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]::before {
    content: attr(data-jo-label);
    flex: 0 0 38%;
    overflow: hidden;
    font-size: 12px;
    color: var(--jo-ui-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La prima colonna è il titolo della card: senza etichetta, in evidenza. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]:first-of-type::before,
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell + td[data-jo-label]::before {
    display: none;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]:first-of-type,
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell + td[data-jo-label] {
    margin-bottom: 4px;
    font-weight: 600;
}

/* L'icona della sezione accanto al titolo (owner 9-ott-2026: card meno
   asettiche): tessera lilla tenue, icona in viola pastello (--jo-card-icon,
   e --jo-card-tile dalla barra della tabella, TableStandard::cardIconCss,
   solo dove la pagina ha un'icona). Solo CSS. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]:first-of-type,
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell + td[data-jo-label] {
    align-items: center;
    gap: 10px;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]:first-of-type::after,
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell + td[data-jo-label]::after {
    /* Senza icona (--jo-card-tile non impostata) la tessera è larga zero. */
    content: '';
    order: -1;
    flex: 0 0 var(--jo-card-tile, 0px);
    height: var(--jo-card-tile, 0px);
    border-radius: 8px;
    background: var(--ds-accent-soft, #F3EEFC) var(--jo-card-icon, none) center / 17px no-repeat;
}

/* Testata della card lilla tenue (owner 9-ott-2026: "card ancora troppo
   bianche"): icona e titolo su fondo lilla chiarissimo fino ai bordi della
   card, un filetto sotto; il resto resta chiaro. Solo la vista Card. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td[data-jo-label]:first-of-type,
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell + td[data-jo-label] {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin: -10px -12px 6px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ds-card-head-bd, #E4DBF6);
    border-radius: 11px 11px 0 0;
    background: var(--ds-card-head-bg, #F5F1FC);
}

/* Owner 8-ott-2026: niente testo che esce dalla card. Le celle restano
   larghe quanto la card (la larghezza delle colonne della Lista non vale qui),
   i testi lunghi vanno a capo e le righe secondarie (email sotto il nome)
   finiscono con i puntini. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td {
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden;
}
.jo-ta-cards table.fi-ta-table > tbody > tr > td > * { flex: 1 1 0; }
.jo-ta-cards table.fi-ta-table > tbody > tr > td * { min-width: 0 !important; max-width: 100%; }
.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-text-item,
.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-text-item-label,
.jo-ta-cards table.fi-ta-table > tbody > tr > td .truncate:not(p) { white-space: normal; overflow-wrap: anywhere; }
.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-text > div > p,
.jo-ta-cards table.fi-ta-table > tbody > tr > td .fi-ta-text p.text-sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card compatte: le colonne di contorno (.jo-card-hide sulla colonna)
   restano solo nella Lista; la card tiene nome, stato, dato principale e
   le metriche. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td.jo-card-hide {
    display: none;
}

.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-selection-cell {
    display: none;
}

/* Azioni in fondo alla card. Larghe quanto la card: il width 1% della
   cella Azioni in tabella (data-table.css) qui la riduceva a 2px e le icone
   uscivano dalla card a sinistra. */
.jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell,
.jo-ta-cards table.fi-ta-table > tbody > tr > td:has(> .fi-ta-actions) {
    width: auto;
    order: 99;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 6px !important;
    border-top: 1px solid var(--jo-ui-line-2);
}

/* Legenda automatica delle icone di stato (public/js/table-columns.js). */
.jo-auto-legend {
    position: relative;
    display: inline-flex;
}

.jo-legend--auto {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 15rem;
    padding: 10px 12px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 12px;
    background: var(--jo-ui-surface);
    box-shadow: var(--ds-shadow-raised);
}

.jo-legend--auto[hidden] {
    display: none;
}

.jo-legend [data-jo-legend-auto] .jo-legend-title {
    margin-top: 6px;
}

.jo-legend-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.jo-legend-icon svg {
    width: 16px;
    height: 16px;
}

/* ── Sistema ▸ Changelog ───────────────────────────────────── */

.jo-cl-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    font-size: 13.5px;
    color: var(--jo-ui-muted);
}

.jo-cl-summary strong {
    color: var(--jo-ui-ink);
    font-weight: 600;
}

.jo-cl-kpi {
    font-size: 16px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-cl-kpi small {
    font-size: 12px;
    font-weight: 400;
    color: var(--jo-ui-muted);
}

.jo-cl {
    overflow: hidden;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
}

.jo-cl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--jo-ui-line);
}

.jo-cl-search {
    display: flex;
    flex: 1 1 16rem;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 8px;
    color: var(--jo-ui-muted);
}

.jo-cl-search svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.jo-cl-search input {
    flex: 1;
    min-width: 0;
    padding: 7px 0;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    color: var(--jo-ui-ink);
    box-shadow: none !important;
}

.jo-cl-toolbar select {
    flex: 0 1 12rem;
    padding: 7px 30px 7px 10px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 8px;
    background-color: transparent;
    font-size: 13.5px;
    color: var(--jo-ui-ink);
}

.jo-cl-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-cl-release + .jo-cl-release {
    border-top: 1px solid var(--jo-ui-line);
}

.jo-cl-release > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.jo-cl-release > summary::-webkit-details-marker {
    display: none;
}

.jo-cl-release > summary:hover {
    background: var(--jo-ui-soft);
}

.jo-cl-release-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-cl-release-period {
    font-size: 12px;
    font-weight: 600;
    color: var(--jo-ui-accent);
}

.jo-cl-release-headline {
    flex: 1 1 18rem;
    font-size: 13px;
    color: var(--jo-ui-muted);
}

.jo-cl-release-count {
    padding: 0 8px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-cl-chevron {
    align-self: center;
    width: 18px;
    height: 18px;
    color: var(--jo-ui-muted);
    transition: transform 0.15s;
}

.jo-cl-release[open] .jo-cl-chevron {
    transform: rotate(180deg);
}

.jo-cl-items {
    margin: 0;
    padding: 0 16px 8px;
    list-style: none;
}

.jo-cl-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--jo-ui-line-2);
}

.jo-cl-item-body {
    flex: 1;
    min-width: 0;
}

.jo-cl-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.jo-cl-item-title {
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-cl-area {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--jo-ui-soft);
    font-size: 11.5px;
    color: var(--jo-ui-muted);
}

.jo-cl-date {
    margin-left: auto;
    font-size: 12px;
    color: var(--jo-ui-muted);
    white-space: nowrap;
}

.jo-cl-item-desc {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jo-ui-muted);
}

.jo-cl-details {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jo-cl-details summary {
    cursor: pointer;
    color: var(--jo-ui-accent);
    font-weight: 600;
}

.jo-cl-details ul {
    margin: 4px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.jo-cl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 40px 16px;
    color: var(--jo-ui-muted);
    text-align: center;
}

.jo-cl-empty svg {
    width: 28px;
    height: 28px;
}

.jo-cl-empty strong {
    color: var(--jo-ui-ink);
}

.jo-cl-note {
    margin: 0;
    font-size: 12px;
    text-align: center;
    color: var(--jo-ui-muted);
}

/* Modulo esterno incorporato (Sistema ▸ Ticket IT). */
.jo-embed {
    overflow: hidden;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--ds-surface, #fff);
}

.jo-embed iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 16rem);
    min-height: 620px;
    border: 0;
}

/* ── Gruppi hotel: card ─────────────────────────────────────── */

.jo-grp-grid {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.jo-grp-card {
    gap: 10px;
}

.jo-grp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.jo-grp-members {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.jo-grp-count {
    margin-right: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-grp-manage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--jo-ui-accent);
}

.jo-grp-manage svg {
    width: 14px;
    height: 14px;
}

/* ── Libreria immagini: griglia ─────────────────────────────── */

.jo-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

.jo-media-card {
    gap: 6px;
    padding: 8px 8px 10px;
}

.jo-media-card > :not(.jo-media-thumb) {
    margin-inline: 4px;
}

.jo-media-card.is-off .jo-media-thumb img {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.jo-media-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--jo-ui-soft);
    cursor: zoom-in;
}

.jo-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pill .jo-qf sul fondo della pagina, mai dentro la striscia bianca delle
   tab di Filament (il bg-white che design-system.css porta al colore delle
   card): es. i cataloghi della Libreria immagini. */
html .fi-tabs.jo-qf {
    background: none !important;
    box-shadow: none !important;
}

.jo-media-tabs {
    margin-inline: 0;
}

/* ── Preventivatore (pilota Joorna): liste Richieste e Preventivi ── */

.jo-q-row > td {
    vertical-align: top;
}

.jo-q-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--jo-ui-ink);
}

.jo-q-strong {
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-q-muted {
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jo-q-faint {
    font-size: 11.5px;
    color: var(--jo-ui-muted);
    opacity: 0.85;
}

.jo-q-clamp {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-q-guest {
    min-width: 9.5rem;
}

.jo-q-proposal .jo-q-clamp {
    max-width: 12.5rem;
}

.jo-q-assignee,
.jo-q-source {
    align-items: center;
}

.jo-q-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--jo-ui-accent-soft);
    font-size: 11px;
    font-weight: 700;
    color: var(--jo-ui-accent);
}

.jo-q-guest-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
}

.jo-q-flag {
    font-size: 15px;
    line-height: 1;
}

.jo-q-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* Colonna Invio: un fatto per riga, icona + testo. */
.jo-q-delivery-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jo-q-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--jo-ui-muted);
    white-space: nowrap;
}

.jo-q-fact svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.jo-q-fact--on {
    color: var(--jo-ui-ink);
}

.jo-q-fact--on svg {
    color: var(--jo-ui-accent);
}

.jo-q-fact--ok svg {
    color: var(--jo-ui-ok);
}

.jo-q-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 24px;
    height: 24px;
    padding: 0 3px;
    border-radius: 7px;
    color: var(--jo-ui-muted);
    vertical-align: middle;
}

button.jo-q-ico:hover {
    background: var(--jo-ui-soft);
    color: var(--jo-ui-accent);
}

.jo-q-ico svg {
    width: 16px;
    height: 16px;
}

.jo-q-ico small {
    font-size: 11px;
    font-weight: 600;
}

.jo-q-ico--ok {
    color: var(--jo-ui-ok);
}

.jo-q-ico--warn {
    color: var(--jo-ui-warn);
}

.jo-q-ico--wa:hover {
    color: var(--ds-ok-fg);
}

.jo-q-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-left: 2px;
    padding: 0 6px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.jo-q-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.jo-q-tag {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--jo-ui-accent-soft);
    font-size: 11px;
    font-weight: 500;
    color: var(--jo-ui-accent);
}

.jo-q-dates {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.jo-q-arrow {
    width: 14px;
    height: 14px;
    color: var(--jo-ui-muted);
}

.jo-q-amount-cell {
    align-items: flex-end;
    text-align: right;
}

.jo-q-amount {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jo-ui-ink);
    white-space: nowrap;
}

.jo-q-ref {
    font-size: 12px;
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.jo-q-expiry {
    font-weight: 600;
    white-space: nowrap;
}

.jo-q-expiry--warning {
    color: var(--jo-ui-warn);
}

.jo-q-expiry--danger {
    color: var(--jo-ui-danger);
}

.jo-q-expiry--ok {
    color: var(--jo-ui-ok);
}

.jo-q-expiry--muted {
    font-weight: 400;
    color: var(--jo-ui-muted);
}

/* Celle ricche: il padding lo dà la cella, non il contenitore Filament. */
.jo-q-row .fi-ta-col-wrp > a,
.jo-q-row .fi-ta-col-wrp > div {
    padding: 0 !important;
}

/* Pilota Preventivatore: intestazioni più strette (le celle ricche hanno già il loro padding). */
.jo-quote-pilot .jo-q-row ~ tr,
.jo-quote-pilot .fi-ta-header-cell {
    padding-inline: 8px !important;
}

.jo-quote-pilot .fi-ta-header-cell:first-of-type {
    padding-inline-start: 14px !important;
}

/* ── Preventivi (pilota): righe espandibili sulle proposte ── */

/* Cella tecnica all'inizio della riga: tutta cliccabile, separata dai dati. */
.jo-quote-pilot th.jo-q-expand-th,
.jo-quote-pilot td.jo-q-expand-td {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
}

/* Il chevron sta all'altezza del nome del cliente, non a metà riga. */
.jo-quote-pilot td.jo-q-expand-td {
    vertical-align: top;
}

.jo-quote-pilot td.jo-q-expand-td .fi-ta-col-wrp,
.jo-quote-pilot td.jo-q-expand-td .fi-ta-col-wrp > a {
    display: block;
    height: 100%;
}

.jo-q-expand-cell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 100%;
}

.jo-q-expand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    min-height: 64px;
    padding-top: 10px;
    color: var(--jo-ui-muted);
    cursor: pointer;
}

.jo-q-expand:hover {
    background: var(--jo-ui-soft);
    color: var(--jo-ui-accent);
}

.jo-q-expand-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 999px;
    background: var(--jo-ui-surface);
    transition: transform 0.15s, border-color 0.15s;
}

.jo-q-expand-ring svg {
    width: 16px;
    height: 16px;
}

.jo-q-expand:hover .jo-q-expand-ring {
    border-color: var(--jo-ui-accent);
}

.jo-q-expand[aria-expanded="true"] {
    color: var(--jo-ui-accent);
}

.jo-q-expand[aria-expanded="true"] .jo-q-expand-ring {
    transform: rotate(90deg);
    border-color: var(--jo-ui-accent);
    background: var(--jo-ui-accent-soft);
}

.jo-q-expand-n {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

tr.jo-row-open > td {
    border-bottom-color: transparent;
}

tr.jo-subrow > td {
    padding: 0 0 8px !important;
    background: var(--jo-ui-soft);
}

.jo-q-sub {
    display: flex;
    flex-direction: column;
    padding: 4px 16px 0 26px;
}

.jo-q-sub-row {
    display: grid;
    grid-template-columns: 16px minmax(7.5rem, 0.8fr) minmax(9rem, 1.4fr) minmax(11rem, 1.3fr) minmax(8rem, 1fr) minmax(6rem, 0.7fr) minmax(6.5rem, auto);
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--jo-ui-ink);
}

.jo-q-sub-row + .jo-q-sub-row {
    border-top: 1px dashed var(--jo-ui-line);
    border-radius: 0;
}

.jo-q-sub-row.is-best {
    background: var(--jo-ui-surface);
    box-shadow: inset 3px 0 0 var(--jo-ui-accent);
}

.jo-q-sub-branch {
    font-family: ui-monospace, monospace;
    color: var(--jo-ui-muted);
}

.jo-q-sub-n {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.jo-q-best {
    display: inline-flex;
    color: var(--jo-ui-accent);
}

.jo-q-best svg {
    width: 13px;
    height: 13px;
}

.jo-q-sub-room,
.jo-q-sub-board {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-q-sub-dates,
.jo-q-sub-party,
.jo-q-sub-board {
    color: var(--jo-ui-muted);
}

.jo-q-sub-price {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

/* ── Preventivatore (pilota): card Cliente, comune a Richiesta e Preventivo ── */

.jo-cc {
    display: grid;
    grid-template-columns: minmax(15rem, 1.25fr) minmax(14rem, 1.2fr) minmax(10rem, 0.9fr) minmax(11rem, 0.9fr);
    overflow: hidden;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
}

.jo-cc-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    font-size: 13px;
}

.jo-cc-block + .jo-cc-block {
    border-left: 1px solid var(--jo-ui-line-2);
}

.jo-cc-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.jo-cc-avatar {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--jo-ui-accent-soft);
    font-weight: 700;
    color: var(--jo-ui-accent);
}

.jo-cc-name-wrap {
    min-width: 0;
}

.jo-cc-name {
    display: block;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jo-ui-ink);
}

.jo-cc-name:hover {
    color: var(--jo-ui-accent);
}

.jo-cc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jo-cc-contacts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jo-cc-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--jo-ui-ink);
}

.jo-cc-contact span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-cc-contact svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: var(--jo-ui-muted);
}

.jo-cc-contact:hover {
    color: var(--jo-ui-accent);
}

.jo-cc-quick {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.jo-cc-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

.jo-cc-facts dt,
.jo-cc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-cc-facts dd {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 1px 0 0;
    color: var(--jo-ui-ink);
}

.jo-cc-facts small {
    color: var(--jo-ui-muted);
}

.jo-cc-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--jo-ui-muted);
}

.jo-cc-dot--ok {
    background: var(--jo-ui-ok);
}

.jo-cc-tags {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: 5px;
}

.jo-cc-tags .jo-cc-label {
    width: 100%;
}

.jo-cc-side > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.jo-cc-note {
    flex-direction: row !important;
    gap: 6px !important;
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jo-cc-note svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.jo-cc-history {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -8px;
}

.jo-cc-hist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 999px;
    background: var(--jo-ui-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jo-ui-ink);
}

.jo-cc-hist svg {
    width: 15px;
    height: 15px;
    color: var(--jo-ui-muted);
}

.jo-cc-hist small {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    font-size: 11px;
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.jo-cc-hist:hover,
.jo-cc-hist.is-current {
    border-color: var(--jo-ui-accent);
    color: var(--jo-ui-accent);
}

.jo-cc-hist.is-current svg {
    color: var(--jo-ui-accent);
}

@media (max-width: 1100px) {
    .jo-cc {
        grid-template-columns: 1fr 1fr;
    }

    .jo-cc-block:nth-child(3) {
        border-left: 0;
    }

    .jo-cc-block:nth-child(n + 3) {
        border-top: 1px solid var(--jo-ui-line-2);
    }
}

@media (max-width: 640px) {
    .jo-cc {
        grid-template-columns: 1fr;
    }

    .jo-cc-block + .jo-cc-block {
        border-left: 0;
        border-top: 1px solid var(--jo-ui-line-2);
    }
}

/* ── Dettaglio Richiesta (pilota) ── */

.jo-rq-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 18px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--jo-ui-danger-bg);
    font-size: 13px;
    color: var(--jo-ui-danger);
}

.jo-rq-alert svg {
    width: 16px;
    height: 16px;
}

.jo-tone-warn {
    color: var(--jo-ui-warn) !important;
}

.jo-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    list-style: none;
    font-size: 12.5px;
}

.jo-timeline li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 10px;
    border-left: 2px solid var(--jo-ui-line);
}

.jo-timeline small {
    color: var(--jo-ui-muted);
}

.jo-timeline p {
    margin: 2px 0 0;
    color: var(--jo-ui-muted);
}

.jo-link {
    color: var(--jo-ui-accent);
    text-decoration: underline;
}

.jo-notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.jo-note {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 10px;
}

.jo-note p {
    margin: 0 0 4px;
    white-space: pre-line;
}

.jo-note small {
    color: var(--jo-ui-muted);
}

/* ── Dettaglio di una riga del Preventivatore: le sezioni come accordion
   (owner 5-ott-2026), card .jo-fstep-plain una sotto l'altra ── */

.jo-rq2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jo-rq2-acc > .fi-section-content-ctn > .fi-section-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jo-rq2-acc .jo-rq-alert {
    margin: 0;
}

.jo-rq2-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 12px 20px;
    margin: 0;
}

.jo-rq2-facts dt,
.jo-rq2-notes dt {
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-rq2-facts dd {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0 0;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-rq2-notes p {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-line;
    color: var(--jo-ui-ink);
}

.jo-rq2-quote {
    display: block;
    border: 1px solid var(--jo-ui-line);
    border-radius: 10px;
}

.jo-rq2-quote:hover {
    border-color: var(--jo-ui-accent);
}

.jo-rq2-quote-head {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
}

.jo-rq2-empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--jo-ui-line);
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--jo-ui-muted);
}

.jo-rq2-noteform {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.jo-rq2-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--jo-ui-line);
    border-radius: 10px;
    background: var(--jo-ui-surface);
    font-size: 13.5px;
    color: var(--jo-ui-ink);
}

@media (max-width: 767px) {
    .jo-rq2-quote-head {
        grid-template-columns: auto 1fr auto;
    }

    .jo-rq2-quote-head > .jo-q-muted {
        display: none;
    }
}

/* ── Dettaglio Preventivo (pilota): workspace semplificato ── */

.jo-qh {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Richiesta associata: testata fissa del preventivo (owner 5-ott-2026),
   sempre in vista mentre si compone. Solo lettura: chiusa è una riga, la
   freccia apre qui tutti i dettagli della richiesta. */
.jo-qh-req {
    position: sticky;
    top: calc(var(--jo-topbar-h, 64px) + 8px);
    /* Sopra il velo della pagina (9), sotto la topbar (20): a pari livello
       copriva il menu della ricerca in alto (owner 12-ott-2026). */
    z-index: 15;
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--ds-accent);
    border-radius: 12px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
}

.jo-qh-req-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 11px;
    text-align: left;
}

.jo-qh-req-head:hover {
    background: var(--ds-surface-hover);
}

.jo-qh-req-ic {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ds-accent-soft);
    color: var(--ds-accent);
}

.jo-qh-req-ic svg {
    width: 18px;
    height: 18px;
}

.jo-qh-req-who {
    flex: 1;
    min-width: 0;
}

.jo-qh-req-kicker {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-accent);
}

.jo-qh-req-line {
    display: block;
    overflow: hidden;
    font-size: 14px;
    color: var(--ds-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-qh-req-line span {
    color: var(--ds-text-secondary);
}

.jo-qh-req-line span::before {
    content: "·";
    margin: 0 6px;
    color: var(--ds-text-tertiary);
}

.jo-qh-req-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-accent);
}

.jo-qh-req-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .15s ease;
}

.jo-qh-req.is-open .jo-qh-req-toggle svg {
    transform: rotate(180deg);
}

/* Telefono (owner 12-ott-2026): la riga chiusa è per chi e per cosa —
   niente tessera dell'icona né testo accanto alla freccia, lo stato si
   accorcia coi puntini invece di schiacciare il nome. */
@media (max-width: 640px) {
    .jo-qh-req-head { gap: 8px; padding: 10px 12px; }
    .jo-qh-req-head > .jo-qh-req-ic { display: none; }
    .jo-qh-req-toggle > span { display: none; }
    .jo-qh-req-head > .fi-badge { flex: 0 1 auto; min-width: 0; max-width: 40%; }
}

.jo-qh-req-body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 16px 12px;
}

.jo-qh-req-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--ds-row-divider);
}

.jo-qh-req-facts dt {
    font-size: 11.5px;
    color: var(--ds-text-tertiary);
}

.jo-qh-req-facts dd {
    margin: 1px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-text-primary);
    overflow-wrap: anywhere;
}

.jo-qh-req-notes {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ds-surface-sunken);
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.jo-qh-req-notes span {
    margin-right: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-text-tertiary);
}

.jo-qh-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.jo-qh-id {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jo-qh-id h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jo-ui-ink);
}

.jo-qh-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 0;
}

.jo-qh-facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-qh-facts dd {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 1px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-qh-facts dd small {
    font-size: 12px;
    font-weight: 400;
    color: var(--jo-ui-muted);
}

.jo-qh-total dd {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.jo-tone-danger {
    color: var(--jo-ui-danger) !important;
}

.jo-qh-actions {
    margin-left: auto;
}

/* Cliente in una riga. */
.jo-cs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 10px 14px;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
    font-size: 13px;
}

.jo-cs .jo-cc-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.jo-cs-who {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jo-cs-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--jo-ui-ink);
}

.jo-cs-name:hover {
    color: var(--jo-ui-accent);
}

.jo-cs-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.jo-cs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.jo-cs-end {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.jo-cs-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--jo-ui-line);
}

/* Soggiorno in un blocco. */
.jo-qs-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--jo-ui-line);
    border-radius: var(--jo-ui-radius);
    background: var(--jo-ui-surface);
}

.jo-qs-facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-qs-facts dd {
    display: flex;
    flex-direction: column;
    margin: 2px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-qs-facts dd small {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--jo-ui-muted);
}

.jo-quote-pilot [data-jo-proposals] > .flex.gap-x-3 {
    display: none;
}

/* ── Composizione guidata del preventivo (pilota Joorna) ── */

/* Stepper compatto, sempre visibile in cima allo step. */
.jo-qwiz {
    overflow: visible !important;
}

.jo-qwiz > ol {
    position: sticky;
    top: var(--jo-topbar-h, 64px);
    z-index: 5;
    border-radius: var(--jo-ui-radius) var(--jo-ui-radius) 0 0;
    background: var(--jo-ui-surface);
}

.jo-qwiz > ol button {
    padding-block: 10px !important;
}

.jo-qwiz .fi-fo-wizard-header-step-description {
    font-size: 11.5px;
}

/* Tre step compatti: icona piccola, etichetta e stato reale dello step. */
.jo-qwiz > ol button {
    gap: 10px !important;
    padding-inline: 16px !important;
}

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

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

.jo-qwiz .fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-label {
    font-weight: 700;
}

.jo-qwiz .fi-fo-wizard-header-step.fi-active {
    box-shadow: inset 0 -2px 0 var(--jo-ui-accent);
}

/* La card della proposta è la testata della soluzione aperta (non si richiude). */
.jo-quote-pilot [data-jo-proposals] > ul > div > li.fi-fo-repeater-item > .fi-fo-repeater-item-header {
    align-items: flex-start;
    padding: 12px 14px;
}

.jo-quote-pilot [data-jo-proposals] > ul > div > li.fi-fo-repeater-item > .fi-fo-repeater-item-header > h4 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.jo-pc-main {
    flex: 1;
}

.jo-pc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 400;
}

.jo-pc-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.jo-pc-n {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jo-ui-muted);
}

.jo-pc-best,
.jo-pc-ok,
.jo-pc-todo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 600;
}

.jo-pc-best {
    color: var(--jo-ui-accent);
}

.jo-pc-ok {
    color: var(--jo-ui-ok);
}

.jo-pc-todo {
    color: var(--jo-ui-warn);
}

.jo-pc-best svg,
.jo-pc-ok svg,
.jo-pc-todo svg {
    width: 14px;
    height: 14px;
}

.jo-pc-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.jo-pc-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.jo-pc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jo-pc-line {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jo-ui-muted);
}

.jo-pc-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.jo-pc-price strong {
    font-size: 17px;
    font-weight: 700;
    color: var(--jo-ui-ink);
}

.jo-pc-price small {
    font-size: 11px;
    color: var(--jo-ui-muted);
}

/* Telefono: stepper su una riga compatta (scorre se serve), non una lista verticale. */
@media (max-width: 767px) {
    .jo-qwiz > ol {
        display: flex !important;
        overflow-x: auto;
        top: 56px;
    }

    .jo-qwiz > ol > li {
        flex: 0 0 auto;
        border: 0 !important;
    }

    .jo-qwiz > ol > li > button {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .jo-qwiz > ol > li > button > div:first-child,
    .jo-qwiz > ol > li > button > span:first-child {
        width: 28px !important;
        height: 28px !important;
    }

    .jo-qwiz .fi-fo-wizard-header-step-label {
        font-size: 12.5px;
        white-space: nowrap;
    }

    .jo-qwiz > ol > li > div[aria-hidden="true"] {
        display: none;
    }
}

/* ── Preventivo (pilota Joorna): percorso Dati · Proposte · Pagina · Anteprima ── */

/* Testata: "Preventivo #OF/2026/12", titolo sotto, fatti in secondo piano. */
.jo-qh-id h1 {
    font-size: 22px;
}

.jo-qh-kind {
    font-weight: 500;
    color: var(--jo-ui-muted);
}

.jo-qh-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--jo-ui-muted);
}

.jo-qh-facts dd {
    font-size: 13.5px;
}

.jo-qh-total dd {
    font-size: 16px;
}

/* Stepper leggero: numeri, niente frecce, lo step corrente sottolineato. */
.jo-qwiz > ol {
    border-bottom: 1px solid var(--jo-ui-divider, var(--jo-ui-line-2)) !important;
}

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

.jo-qwiz .fi-fo-wizard-header-step-icon-ctn {
    width: 26px !important;
    height: 26px !important;
    border-width: 1.5px !important;
}

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

.jo-qwiz > ol button {
    padding-block: 9px !important;
}

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

.jo-qwiz .fi-fo-wizard-header-step-description {
    font-size: 11.5px !important;
}

/* Fasce: titolo piccolo, valori in riga, separate da un filo — non card. */
.jo-qb + .jo-qb,
.jo-qb.fi-section,
.jo-qb-static + .fi-section {
    margin-top: 0;
}

.jo-qb-static {
    padding: 14px 0;
    border-top: 1px solid var(--jo-ui-line-2);
}

.jo-qwiz .fi-fo-wizard-step > .grid > :first-child > .jo-qb-static,
.jo-qwiz .fi-fo-wizard-step .jo-qb-static:first-child {
    padding-top: 2px;
    border-top: 0;
}

.jo-qb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 8px;
}

.jo-qb-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--jo-ui-ink);
}

.jo-qb-head .jo-q-muted,
.jo-qb-empty {
    margin: 0;
    font-size: 12.5px;
}

.jo-qb .jo-qs-facts {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.fi-section.jo-qb {
    border-top: 1px solid var(--jo-ui-line-2);
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-section.jo-qb > .fi-section-header {
    padding: 14px 0 8px !important;
}

.fi-section.jo-qb .fi-section-header-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.fi-section.jo-qb .fi-section-header-description {
    font-size: 12.5px !important;
}

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

.fi-section.jo-qb > .fi-section-content-ctn > .fi-section-content {
    padding: 0 0 14px !important;
}

.fi-section.jo-qb.fi-collapsed > .fi-section-header {
    padding-bottom: 14px !important;
}

/* Destinatario: avatar, fatti in riga, piccole azioni. */
.jo-qr {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jo-qr .jo-cc-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

.jo-qr-facts {
    flex: 1;
    min-width: 0;
}

.jo-qr-email dd {
    overflow: hidden;
    text-overflow: ellipsis;
}

.jo-qr-facts a {
    color: inherit;
}

.jo-qr-facts a:hover {
    color: var(--jo-ui-accent);
}

.jo-qr-tags {
    flex-wrap: wrap;
    gap: 3px !important;
}

.jo-qr-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Proposte: niente card intorno, introduzione breve, AI come link. */
.fi-section.jo-qprops {
    background: transparent !important;
    box-shadow: none !important;
}

.jo-qprops > .fi-section-header {
    padding: 0 0 12px !important;
}

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

.jo-qprops > .fi-section-content-ctn > .fi-section-content {
    padding: 0 !important;
}

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

/* Selettore delle soluzioni: una alla volta. */
.jo-psel[data-jo-sel="0"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(1)),
.jo-psel[data-jo-sel="1"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(2)),
.jo-psel[data-jo-sel="2"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(3)),
.jo-psel[data-jo-sel="3"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(4)),
.jo-psel[data-jo-sel="4"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(5)),
.jo-psel[data-jo-sel="5"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(6)),
.jo-psel[data-jo-sel="6"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(7)),
.jo-psel[data-jo-sel="7"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(8)),
.jo-psel[data-jo-sel="8"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(9)),
.jo-psel[data-jo-sel="9"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(10)),
.jo-psel[data-jo-sel="10"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(11)),
.jo-psel[data-jo-sel="11"] [data-jo-proposals] > ul > div > li.fi-fo-repeater-item:not(:nth-child(12)) {
    display: none;
}

/* Completezza della proposta: discreta. */
.jo-pc-todo {
    font-weight: 500 !important;
}

/* ── Step 4: anteprima come pagina d'offerta ── */
.jo-qp4 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Barra di review sopra l'anteprima: stato a sinistra, invio a destra. */
.jo-qp4-bar-top {
    position: sticky;
    top: var(--jo-topbar-h, 64px);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--jo-ui-surface);
    box-shadow: var(--jo-ui-edge, 0 0 0 1px var(--jo-ui-line));
    font-size: 13px;
}

.jo-qp4-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.jo-qp4-state ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--jo-ui-warn);
}

.jo-qp4-state li.is-soft {
    color: var(--jo-ui-muted);
}

.jo-qp4-go {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jo-qp4-offer {
    cursor: pointer;
}

.jo-qp4-offer.is-sel {
    box-shadow: 0 0 0 2px var(--ds-text-primary), var(--ds-shadow-raised);
}

.jo-qp4-frame {
    --jo-brand: var(--jo-primary-600, #7C5CCB);
    overflow: hidden;
    max-width: 68rem;
    width: 100%;
    margin-inline: auto;
    border-radius: 14px;
    background: #f6f5f2;
    box-shadow: 0 0 0 1px rgb(22 22 42 / 8%), 0 12px 32px rgb(22 22 42 / 10%);
    color: #1f1f2e;
}

.jo-qp4-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: #ececf0;
    font-size: 11px;
    color: #6b6b80;
}

.jo-qp4-bar i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d4d4dc;
}

.jo-qp4-bar span {
    margin-left: 8px;
}

.jo-qp4-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 26px;
}

.jo-qp4-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    justify-content: space-between;
    min-height: 340px;
    padding: 26px 36px 32px;
    /* Senza foto: un fondo neutro, mai il viola del brand. */
    background: linear-gradient(160deg, #3a3b42, #1d1e23);
    background-position: center;
    background-size: cover;
    color: #fff;
    transition: background-image 0.25s;
}

.jo-qp4-hero-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 44rem;
}

.jo-qp4-logo {
    max-width: 130px;
    max-height: 40px;
    margin-bottom: 14px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgb(255 255 255 / 92%);
    object-fit: contain;
}

.jo-qp4-hotel {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.jo-qp4-for {
    margin: 0;
    font-size: 13px;
    opacity: 0.85;
}

.jo-qp4-title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 1px 12px rgb(0 0 0 / 25%);
    letter-spacing: -0.01em;
}

.jo-qp4-letter {
    margin: 0 36px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff /* pagina del cliente: resta bianca anche in dark */;
}

.jo-qp4-letter h3,
.jo-qp4-more h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--jo-brand);
}

.jo-qp4-letter p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #3a3a4d;
}

.jo-qp4-offer {
    overflow: hidden;
    margin: 0 20px;
    border-radius: 14px;
    background: #fff /* pagina del cliente: resta bianca anche in dark */;
    box-shadow: 0 1px 2px rgb(22 22 42 / 6%);
}

.jo-qp4-offer.is-best {
    box-shadow: 0 0 0 2px var(--jo-brand);
}

.jo-qp4-offers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Soluzione: foto della camera a sinistra, dettagli a destra. */
.jo-qp4-offer {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}

.jo-qp4-media {
    position: relative;
    min-height: 240px;
    background: #e9e8e4;
}

.jo-qp4-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jo-qp4-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--jo-brand);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.jo-qp4-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px 16px;
}

.jo-qp4-n {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a9a;
}

.jo-qp4-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #4a4a5c;
}

.jo-qp4-facts li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jo-qp4-facts svg {
    width: 14px;
    height: 14px;
    color: #9a9aaa;
}

.jo-qp4-empty {
    margin: 0 36px;
    padding: 24px;
    border: 1px dashed #d4d4dc;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: #6b6b80;
}

.jo-qp4-more {
    margin: 0 36px;
}

.jo-qp4-more div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jo-qp4-more span {
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff /* pagina del cliente: resta bianca anche in dark */;
    font-size: 12px;
}

.jo-qp4-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 36px;
    padding-top: 12px;
    border-top: 1px solid #e4e4ea;
    font-size: 12px;
    color: #6b6b80;
}

.jo-qp4-foot strong {
    color: #1f1f2e;
}

.jo-qp4-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jo-ui-accent);
}

.jo-qp4-open svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 900px) {
    .jo-qp4-offer {
        grid-template-columns: 1fr;
    }

    .jo-qp4-media {
        min-height: 190px;
    }

    .jo-qp4-hero {
        min-height: 260px;
        padding: 20px;
    }

    .jo-qp4-title {
        font-size: 26px;
    }

    .jo-qp4-letter,
    .jo-qp4-offer,
    .jo-qp4-empty,
    .jo-qp4-more,
    .jo-qp4-foot {
        margin-inline: 16px !important;
    }
}

@media (max-width: 767px) {
    .jo-qr {
        align-items: flex-start;
    }

    .jo-qr .jo-cc-avatar {
        display: none;
    }
}

/* Le parti della pagina d'anteprima non si comprimono: scorre la pagina. */
.jo-qp4-page > * {
    flex-shrink: 0;
}

/* Fasce e Proposte: nessuna cornice da card (vince sul refinement globale delle sezioni). */
html .jo-qwiz .fi-section.jo-qb:not(.fi-aside):not(.jo-x),
html .jo-qwiz .fi-section.jo-qprops:not(.fi-aside):not(.jo-x) {
    background: transparent !important;
    box-shadow: none !important;
}

.jo-qr-facts dd {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.jo-qr-tags .jo-q-tag {
    flex: none;
}

/* ── Form di contatto: costruttore a step (stesso linguaggio del Preventivatore) ── */

/* Temi come card con mini anteprima. */
.jf-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 10px;
}

.jf-theme {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--jo-ui-line);
    text-align: left;
    transition: box-shadow 0.15s;
}

.jf-theme:hover {
    box-shadow: 0 0 0 1px var(--jo-ui-accent);
}

.jf-theme.is-on {
    box-shadow: 0 0 0 2px var(--jo-ui-accent);
}

.jf-theme-name {
    padding: 0 4px 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jo-ui-ink);
}

.jf-theme-mock {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 70px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #f1f0ec;
}

.jf-theme-mock i {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: var(--ds-surface, #fff);
    box-shadow: 0 0 0 1px #dedde6;
}

.jf-theme-mock .t {
    width: 55%;
    height: 6px;
    background: #2a2a3a;
    box-shadow: none;
}

.jf-theme-mock .b {
    width: 40%;
    height: 9px;
    margin-top: auto;
    background: var(--jo-ui-accent);
    box-shadow: none;
}

.jf-th-card {
    background: #eceaf3;
}

.jf-th-card i:not(.t):not(.b) {
    border-radius: 6px;
}

.jf-th-card .b {
    border-radius: 6px;
}

.jf-th-elegant {
    background: #faf8f3;
}

.jf-th-elegant .t {
    height: 8px;
    background: #6b5a3e;
}

.jf-th-elegant i:not(.t):not(.b) {
    background: transparent;
    box-shadow: inset 0 -1px 0 #c9bfa9;
    border-radius: 0;
}

.jf-th-elegant .b {
    background: #6b5a3e;
    border-radius: 0;
}

.jf-th-minimal {
    background: var(--ds-surface, #fff);
    box-shadow: inset 0 0 0 1px #ececf2;
}

.jf-th-minimal i {
    border-radius: 0 !important;
}

.jf-th-dark {
    background: #1f2029;
}

.jf-th-dark .t {
    background: #f4f4f5;
}

.jf-th-dark i:not(.t):not(.b) {
    background: #2e2f3b;
    box-shadow: none;
}

.jf-th-classic {
    background: #f4f4f5;
}

.jf-th-classic .t {
    background: #52525b;
}

.jf-th-classic .b {
    background: #3f3f46;
}

/* Sezioni avanzate richiuse dentro una fascia (Personalizza, Test A/B): sottili. */
html .jo-qwiz .fi-section.jf-more:not(.jo-x) {
    background: var(--jo-ui-soft) !important;
    box-shadow: none !important;
}

.jf-more .fi-section-header-heading {
    font-size: 13px !important;
}

/* Lista dei campi: una riga ciascuno — nome, tipo, obbligatorio. */
.jf-wiz .fi-fo-repeater-item {
    box-shadow: 0 0 0 1px var(--jo-ui-line-2) !important;
}

.jf-wiz .fi-fo-repeater-item-header {
    padding-block: 8px !important;
}

.fi-fo-repeater-item-header > :has(> .jf-field) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nome · tipo · obbligatorio in colonne fisse: gli stati in fila. */
.jf-field {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 15rem) 7rem 6.5rem;
    align-items: center;
    gap: 12px;
    font-weight: 400;
}

.jf-field-name {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--jo-ui-ink);
}

.jf-field-type {
    font-size: 12.5px;
    color: var(--jo-ui-muted);
}

.jf-field-req {
    justify-self: start;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--jo-ui-soft);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.jf-field-req.is-on {
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
}

/* Privacy e consensi. */
/* Privacy e marketing affiancati: due righe in meno. */
.jf-consents {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .jf-consents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jf-consents li {
    display: flex;
    gap: 10px;
    font-size: 13px;
}

.jf-consents li > svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--jo-ui-muted);
}

.jf-consents strong {
    color: var(--jo-ui-ink);
}

.jf-consents p {
    margin: 2px 0 0;
    color: var(--jo-ui-muted);
}

/* Pubblicazione: codice con "Copia", istruzioni brevi. */
.jf-code {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.jf-code pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: 10px;
    background: #1f2029;
    font-size: 12.5px;
    line-height: 1.5;
    color: #e4e4ec;
}

.jf-steps {
    margin: 12px 0 0;
    padding-left: 18px;
    list-style: decimal;
    font-size: 13px;
    color: var(--jo-ui-muted);
}

.jf-steps li + li {
    margin-top: 3px;
}

.jf-open {
    margin-top: 10px;
}

.jf-empty {
    margin: 0;
    font-size: 13px;
}

@media (max-width: 767px) {
    .jf-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .jf-field-type {
        display: none;
    }

    .jf-code {
        flex-direction: column;
    }
}

/* La prima fascia di uno step non ha il filo sopra. */
.jo-qwiz .fi-fo-wizard-step > div > div:first-child > .fi-section.jo-qb,
.jo-qwiz .fi-fo-wizard-step > div > div:first-child > .jo-qb-static {
    border-top: 0;
}

@media (min-width: 1280px) {
    .jf-themes {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ── Guscio degli step (Preventivatore e Form di contatto) ──
 * Lo stepper è una barra; ogni blocco di uno step è una card bianca sullo
 * sfondo pagina, con titolo chiaro: blocchi ben separati, niente card
 * dentro card, niente "pagina piena di campi". */
html .jo-qwiz.fi-fo-wizard:not(.jo-x) {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.jo-qwiz > ol {
    border-bottom: 0 !important;
    border-radius: 14px !important;
    background: var(--jo-ui-surface) !important;
    box-shadow: var(--jo-ui-edge, 0 0 0 1px var(--jo-ui-line));
}

.jo-qwiz > ol > li {
    border: 0 !important;
}

.jo-qwiz .fi-fo-wizard-step {
    padding: 16px 0 0 !important;
}

.jo-qwiz .fi-fo-wizard-step > .fi-fo-component-ctn {
    gap: 14px !important;
}

html .jo-qwiz .fi-section.jo-qb:not(.fi-aside):not(.jo-x),
html .jo-qwiz .jo-qb-static:not(.jo-x) {
    border-top: 0 !important;
    border-radius: 12px !important;
    background: var(--jo-ui-surface) !important;
    box-shadow: var(--jo-ui-edge, 0 0 0 1px var(--jo-ui-line)) !important;
}

.jo-qwiz .jo-qb-static {
    padding: 16px 20px 18px !important;
}

.jo-qwiz .jo-qb-head h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
}

.jo-qwiz .jo-qb-head {
    margin-bottom: 12px;
}

/* I pulsanti Indietro / Continua fuori dalle card, allineati ai blocchi. */
.jo-qwiz > .fi-fo-wizard-footer,
.jo-qwiz > div:last-child:not(.fi-fo-wizard-step) {
    padding: 16px 0 0 !important;
}

/* Anteprima: etichetta discreta sulle foto non della camera proposta (solo per l'operatore). */
.jo-qp4-hero,
.jo-qp4-media {
    position: relative;
}

/* Sezioni della proposta: piatte, separate da un filo, titolo piccolo. */
html .jo-qwiz .fi-section.jo-psec:not(.jo-x) {
    border-top: 1px solid var(--jo-ui-line-2);
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.jo-qwiz .fi-section.jo-psec:first-child {
    border-top: 0;
}

.jo-qwiz .fi-section.jo-psec > .fi-section-header {
    padding: 14px 0 8px !important;
}

.jo-qwiz .fi-section.jo-psec .fi-section-header-heading {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--jo-ui-ink);
}

.jo-qwiz .fi-section.jo-psec .fi-section-header-description {
    font-size: 12px !important;
}

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

.jo-qwiz .fi-section.jo-psec > .fi-section-content-ctn > .fi-section-content {
    padding: 0 0 14px !important;
}

/* Contenuto della proposta aperta: margini interni coerenti con le card dello step Dati. */
.jo-quote-pilot [data-jo-proposals] > ul > div > li.fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 0 20px 4px !important;
}

/* ── Anteprima come pagina commerciale (gerarchia: foto → messaggio →
 *    soggiorno → soluzioni → prezzi e servizi → validità → CTA) ── */
.jo-qp4-hero {
    min-height: 380px;
}

.jo-qp4-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.jo-qp4-hero .jo-qp4-logo,
.jo-qp4-hero .jo-qp4-hotel {
    margin-bottom: 0;
}

.jo-qp4-for {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Il messaggio si appoggia sulla foto: è la prima cosa che si legge. */
.jo-qp4-letter {
    position: relative;
    z-index: 1;
    margin-top: -46px !important;
    padding: 20px 24px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgb(22 22 42 / 12%);
}

.jo-qp4-letter p {
    max-width: 52rem;
    font-size: 14px;
}

/* Confronto: una colonna per soluzione, foto piccola, prezzo in evidenza. */

/* La soluzione: foto a sinistra, dettagli ordinati a destra. */
.jo-qp4-offer {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
}

.jo-qp4-media {
    min-height: 100%;
}

.jo-qp4-body {
    gap: 14px;
    padding: 20px 22px;
}

.jo-qp4-body h3 {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.jo-qp4-room {
    margin: 4px 0 0;
    font-size: 13px;
    color: #4a4a5c;
}

.jo-qp4-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.jo-qp4-chips span {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f2ee;
    font-size: 11.5px;
    color: #4a4a5c;
}

.jo-qp4-body dl.jo-qp4-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding: 12px 0;
    border-block: 1px solid #efeee9;
}

.jo-qp4-body dl.jo-qp4-facts dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a9a;
}

.jo-qp4-body dl.jo-qp4-facts dd {
    margin: 1px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f1f2e;
}

.jo-qp4-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 10px 16px;
}

.jo-qp4-services span,
.jo-qp4-cond strong {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a9a;
}

.jo-qp4-services ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #4a4a5c;
}

.jo-qp4-services li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.jo-qp4-services li.is-in {
    color: #2f6b3d;
}

.jo-qp4-services svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.jo-qp4-cond p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b6b80;
}

.jo-qp4-cond p + p {
    margin-top: 4px;
}

.jo-qp4-choose {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    background: var(--jo-brand);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.jo-qp4-choose.is-big {
    padding: 13px 30px;
    font-size: 15px;
}

/* Chiusura: validità, CTA, domande e contatti. */

.jo-qp4-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 8px !important;
    color: #1f1f2e !important;
}

.jo-qp4-contact span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jo-qp4-contact svg {
    width: 14px;
    height: 14px;
    color: #8a8a9a;
}

@media (max-width: 900px) {
    .jo-qp4-offer {
        grid-template-columns: 1fr;
    }

    .jo-qp4-media {
        min-height: 200px;
    }
}

/* Anteprima: i blocchi di contenuto come nella pagina vera (testo + immagine alternati). */
.jo-qp4-block {
    display: grid;
    align-items: center;
    gap: 18px;
    margin: 0 36px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff /* pagina del cliente: resta bianca anche in dark */;
}

.jo-qp4-block.has-img {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
}

.jo-qp4-block.has-img.flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
}

.jo-qp4-block.flip img {
    order: 2;
}

.jo-qp4-block img {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
}

.jo-qp4-block h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.jo-qp4-block p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4a5c;
}

.jo-qp4-more span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.jo-qp4-more svg {
    width: 14px;
    height: 14px;
    color: #8a8a9a;
}

@media (max-width: 900px) {
    .jo-qp4-block,
    .jo-qp4-block.has-img,
    .jo-qp4-block.has-img.flip {
        grid-template-columns: 1fr;
        margin-inline: 16px;
    }

    .jo-qp4-block.flip img {
        order: 0;
    }
}

/* ── Richiesta → Preventivi: riga espandibile (freccia) e apertura (clic) ── */
.jo-rq2-quote + .jo-rq2-quote {
    margin-top: 0;
}

.jo-rq2-quote .jo-rq2-quote-head {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.jo-rq2-chev {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    border-right: 1px solid var(--jo-ui-line-2);
    color: var(--jo-ui-muted);
}

.jo-rq2-chev:hover {
    background: var(--jo-ui-soft);
    color: var(--jo-ui-ink);
}

.jo-rq2-chev svg {
    width: 18px;
    height: 18px;
    transition: transform 0.15s;
}

.jo-rq2-quote.is-open .jo-rq2-chev svg {
    transform: rotate(90deg);
}

.jo-rq2-quote-link {
    display: grid;
    flex: 1;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
}

.jo-rq2-quote-link:hover .jo-rq2-open {
    color: var(--jo-ui-accent);
}

.jo-rq2-open {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--jo-ui-muted);
}

.jo-rq2-open svg {
    width: 14px;
    height: 14px;
}

.jo-rq2-sum {
    padding: 14px;
    border-top: 1px solid var(--jo-ui-line-2);
    background: var(--jo-ui-soft);
    border-radius: 0 0 10px 10px;
}

@media (max-width: 767px) {
    .jo-rq2-quote-link {
        grid-template-columns: 1fr auto;
    }

    .jo-rq2-quote-link > .jo-q-muted,
    .jo-rq2-open {
        display: none;
    }
}

/* ── Proposta aperta: le sezioni diventano pannelli veri (fondo, padding,
 *    titolo), non più fili di separazione. Dentro, camere e servizi sono
 *    card bianche. ── */
html body .jo-qwiz .fi-section.jo-psec:not(.jo-x) {
    border-top: 0 !important;
    border-radius: 12px !important;
    background: var(--jo-ui-panel, #f6f6f9) !important;
    box-shadow: none !important;
}

html body .jo-qwiz .fi-section.jo-psec > .fi-section-header {
    padding: 14px 16px 6px !important;
}

html body .jo-qwiz .fi-section.jo-psec > .fi-section-content-ctn > .fi-section-content {
    padding: 4px 16px 16px !important;
}

.jo-quote-pilot [data-jo-proposals] > ul > div > li.fi-fo-repeater-item > .fi-fo-repeater-item-content {
    padding: 12px 16px 16px !important;
}

/* "Cosa includono tariffa e trattamento" dentro la camera: pannello tenue. */
html body .jo-qwiz .jo-psec .fi-fo-repeater-item .fi-section {
    background: var(--jo-ui-panel, #f6f6f9) !important;
    box-shadow: none !important;
}

/* Form di contatto: i campi e "Personalizza" con lo stesso linguaggio. */
html body .jo-qwiz .fi-section.jf-more:not(.jo-x) {
    background: var(--jo-ui-panel, #f6f6f9) !important;
}

/* Richiesta → Preventivi: il riepilogo espanso su pannello tenue. */
.jo-rq2-sum {
    background: var(--jo-ui-panel, #f6f6f9);
}

/* ── Lead (mockup): Kanban della pipeline ── */

.jo-lb {
    padding: 14px;
}

.jo-lb-cols {
    display: grid;
    grid-auto-columns: minmax(15rem, 1fr);
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.jo-lb-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 14rem;
    padding: 10px;
    border-radius: 12px;
    background: var(--jo-ui-panel, var(--jo-ui-soft));
    transition: box-shadow 0.15s;
}

.jo-lb-col.is-over {
    box-shadow: inset 0 0 0 2px var(--jo-ui-accent);
}

.jo-lb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 4px;
    font-size: 13px;
    color: var(--jo-ui-ink);
}

.jo-lb-bar {
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: var(--jo-ui-muted);
}

.jo-lb-bar--info { background: var(--jo-ui-info); }
.jo-lb-bar--warning { background: var(--jo-ui-warn); }
.jo-lb-bar--primary { background: var(--jo-ui-accent); }
.jo-lb-bar--success { background: var(--jo-ui-ok); }

.jo-lb-count {
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--jo-ui-surface);
    font-size: 11.5px;
    color: var(--jo-ui-muted);
}

.jo-lb-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jo-lb-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 12px;
    border-radius: 10px;
    background: var(--jo-ui-surface);
    box-shadow: 0 0 0 1px var(--ds-row-divider), var(--ds-shadow-rest);
    cursor: grab;
    font-size: 12.5px;
    color: var(--jo-ui-ink);
}

.jo-lb-card:hover {
    box-shadow: 0 0 0 1px var(--jo-ui-accent);
}

.jo-lb-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jo-lb-card-top .jo-cc-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.jo-lb-name {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-lb-badges,
.jo-lb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.jo-lb-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--jo-ui-muted);
}

.jo-lb-contact span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-lb-contact svg {
    flex: none;
    width: 13px;
    height: 13px;
}

.jo-lb-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--jo-ui-line-2);
    font-size: 11.5px;
    color: var(--jo-ui-muted);
}

.jo-lb-empty {
    margin: 0;
    padding: 14px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.jo-lb-hint {
    margin: 8px 2px 0;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

/* Ospiti: consensi sotto l'email, solo i canali con il consenso, nel
   colore del canale come in Inbox (email blu, WhatsApp verde). */
.jo-gc-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 3px;
}

.jo-gc-ico {
    display: inline-flex;
    align-items: center;
    color: var(--ds-text-disabled);
}

.jo-gc-ico.is-on {
    color: var(--ds-ok-dot);
}

.jo-gc-ico .jo-ch-ic.is-email { color: var(--ds-brand-email, #0284C7); }
.jo-gc-ico .jo-ch-ic.is-whatsapp { color: var(--ds-brand-whatsapp, #25D366); }
.jo-gc-ico .jo-ch-ic, .jo-gc-ico .jo-ch-ic svg { width: 15px; height: 15px; }
.jo-gc-ico.is-bounced { color: var(--ds-err-dot); }

/* ── KPI di pagina: un solo disegno (28-set) ───────────────────
 * Gli StatsOverviewWidget in testata (header widget) prendono lo stesso
 * aspetto dei .jo-kpi: bordo sottile, raggio 14px, icona in una tessera
 * tinta, etichetta piccola, valore leggibile, altezza uniforme. Così i KPI
 * sono uguali in tutta la piattaforma, che vengano da un widget Filament o
 * da un blade (.jo-kpis). Le dimensioni di base restano in compact-stats.css. */

.fi-page-header-widgets .fi-wi-stats-overview-stat {
    min-height: 76px;
    padding: 12px;
    border-radius: var(--jo-ui-radius);
    box-shadow: var(--ds-shadow-rest);
    --tw-ring-color: var(--jo-ui-line);
}

.fi-page-header-widgets .fi-wi-stats-overview-stat > .grid {
    gap: 8px;
}

.fi-page-header-widgets .fi-wi-stats-overview-stat-icon {
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    padding: 5.5px;
    border-radius: 8px;
    background: var(--jo-ui-accent-soft);
    color: var(--jo-ui-accent);
}

.fi-page-header-widgets .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font-size: 12px;
    color: var(--jo-ui-muted);
}

.fi-page-header-widgets .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--jo-ui-ink);
}

.fi-page-header-widgets .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    font-size: 12px;
}

/* Nota sotto il valore dei KPI (.jo-kpi, widget single-stat). */
.jo-kpi-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--jo-ui-muted);
}

/* Widget single-stat affiancati: la card riempie la cella della griglia. */
.jo-single-stat.jo-kpi {
    height: 100%;
}

/* KPI di testata su mobile: due per riga (una card alta per riga sprecava lo schermo). */
@media (max-width: 639px) {
    .fi-page-header-widgets .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Form di contatto, passo Aspetto: le scelte stanno nella colonna sinistra
   (l'anteprima a destra), quindi seguono la sua larghezza come una card
   stretta: 6 colonne, campi a metà o a un terzo. */
.jf-lp-main {
    container: jf-main / inline-size;
}

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

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

/* Nuova richiesta ▸ Richiedente: contatti già salvati e contatto nuovo (owner 5-ott-2026). */
.jo-rc {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jo-rc--picked,
.jo-rc--new {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface-sunken);
}

.jo-rc--new {
    border-color: var(--ds-step-current-bd);
    background: var(--ds-accent-soft);
}

.jo-rc-ic svg {
    width: 20px;
    height: 20px;
    color: var(--ds-accent);
}

.jo-rc p {
    flex: 1;
    margin: 0;
    font-size: 13px;
    color: var(--ds-text-secondary);
}

.jo-rc p span {
    display: block;
    font-size: 12px;
    color: var(--ds-text-tertiary);
}

.jo-rc-link {
    font-size: 13px;
    color: var(--ds-accent);
}

/* "Nome e cognome" del Richiedente: elenco dei contatti salvati (owner 5-ott-2026). */
.jo-rqc {
    position: relative;
}

.jo-rqc-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
}

.jo-rqc-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    text-align: left;
}

.jo-rqc-item.is-active,
.jo-rqc-item:hover {
    background: var(--ds-accent-soft);
}

.jo-rqc-name {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ds-text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-rqc-kind {
    align-self: center;
    font-size: 11.5px;
    color: var(--ds-text-tertiary);
}

.jo-rqc-kind.is-cliente {
    color: var(--ds-lime-fg);
}

.jo-rqc-kind.is-lead {
    color: var(--ds-accent);
}

.jo-rqc-line {
    grid-column: 1 / -1;
    overflow: hidden;
    font-size: 12px;
    color: var(--ds-text-tertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-rqc-empty,
.jo-rqc-foot {
    margin: 0;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--ds-text-tertiary);
}

.jo-rqc-foot {
    border-top: 1px solid var(--ds-row-divider);
}

/* ── Accordion scritti a mano (<details class="jo-acc">), owner 5-ott-2026:
   stesso disegno degli accordion della piattaforma (card, titolo 600,
   descrizione di una riga, freccia a destra; aperta = bordo e testata lilla
   tenue con un filetto). ── */
details.jo-acc {
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-rest);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

details.jo-acc:not([open]):hover {
    border-color: var(--ds-border-strong);
    box-shadow: var(--ds-shadow-raised);
}

details.jo-acc[open] {
    border-color: var(--ds-step-current-bd);
}

details.jo-acc > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 9px 14px;
    cursor: pointer;
    list-style: none;
}

details.jo-acc > summary::-webkit-details-marker {
    display: none;
}

details.jo-acc > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 4px 4px auto;
    border-right: 1.75px solid var(--ds-text-tertiary);
    border-bottom: 1.75px solid var(--ds-text-tertiary);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

details.jo-acc[open] > summary {
    border-bottom: 1px solid var(--ds-step-current-bd);
    background: var(--ds-section-open-head);
}

details.jo-acc[open] > summary::after {
    margin-bottom: -4px;
    transform: rotate(-135deg);
}

.jo-acc-title {
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text-primary);
}

.jo-acc-title small {
    display: block;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ds-text-tertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

details.jo-acc > :not(summary) {
    margin: 0;
    padding: 12px 14px 14px;
}

/* Changelog: le release restano righe della lista, con la stessa testata. */
.jo-cl-release > summary {
    align-items: center;
}

.jo-cl-release[open] > summary {
    border-bottom: 1px solid var(--ds-step-current-bd);
    background: var(--ds-section-open-head);
}

.jo-cl-release-title {
    font-size: 14px !important;
}
details.jo-acc > ol { padding-left: 32px; }

/* Form di contatto ▸ Dopo l'invio: a chi arriva l'avviso, modificabile in riga (owner 7-ott-2026). */
.jf-recipient { font-size: 13px; color: var(--ds-text-secondary, #3F3F46); }
.jf-recipient-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jf-recipient-row strong { color: var(--ds-text-primary, #18181B); font-weight: 600; word-break: break-all; }
.jf-recipient-ico { width: 16px; height: 16px; color: var(--ds-text-tertiary, #5B5B6B); }
.jf-recipient-label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; color: var(--ds-text-secondary, #3F3F46); }
.jf-recipient-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jf-recipient-input { flex: 1 1 240px; max-width: 360px; height: 34px; padding: 0 10px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 8px; background: var(--ds-field-bg, #FEFEFF); color: var(--ds-text-primary, #18181B); font-size: 13.5px; }
.jf-recipient-input:focus { outline: none; border-color: var(--ds-accent, #7C5CCB); box-shadow: var(--ds-field-focus-halo, 0 0 0 3px rgb(124 92 203 / 18%)); }
.jf-recipient-note { margin: 6px 0 0; font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }
.jf-recipient-error { margin: 4px 0 0; font-size: 12px; color: var(--ds-err-fg, #B42318); }
/* Privacy: informativa di JOORNA al posto di quella dell'hotel. */
.jf-policy-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--ds-warn-bd, #F5D9A8); border-radius: 8px; background: var(--ds-warn-bg, #FFF8EB); font-size: 13px; color: var(--ds-warn-fg, #8A5A00); }
.jf-policy-warn svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }