/*
 * App mobile (owner 7-ott-2026): stessa piattaforma, sul telefono come una
 * app. Sotto i 768px niente sidebar né hamburger: la barra in basso con al
 * massimo 5 tasti (App\Support\Mobile\MobileNav, vista
 * filament.layouts.mobile-tabbar); le tab aprono schermate-elenco (mai
 * tabelle, <x-jo.m-row>); l'Inbox è elenco → chat a tutto schermo
 * (public/js/mobile.js). Le liste delle altre sezioni si aprono in Card
 * (table-columns.js). Solo token del design system.
 */

:root {
    --jo-mtab-h: 62px;
    --jo-mtab-space: calc(var(--jo-mtab-h) + env(safe-area-inset-bottom, 0px));
}

.jo-mtab { display: none; }

@media (max-width: 767px) {
    /* ── Barra in basso ───────────────────────────────────── */
    .jo-mtab {
        position: fixed;
        inset: auto 0 0;
        /* Sopra il contenuto, sotto modali e menu a comparsa. */
        z-index: 25;
        display: grid;
        grid-template-columns: repeat(var(--jo-mtab-cols, 5), minmax(0, 1fr));
        height: var(--jo-mtab-space);
        padding: 6px 4px env(safe-area-inset-bottom, 0px);
        background: var(--ds-bg-sidebar, #F8F9FB);
        border-top: 1px solid var(--ds-border, #DFE2EA);
    }

    .jo-mtab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        min-width: 0;
        color: var(--ds-text-tertiary, #5B5B6B);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
    }

    .jo-mtab-ic {
        position: relative;
        display: grid;
        place-items: center;
        width: 56px;
        height: 30px;
        border-radius: 999px;
        color: var(--ds-nav-icon, #8A8A99);
        transition: background-color .12s ease;
    }

    .jo-mtab-ic svg { width: 22px; height: 22px; }

    .jo-mtab-lbl {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .jo-mtab-item.is-active { color: var(--ds-accent-fg, #5F45A8); font-weight: 600; }
    .jo-mtab-item.is-active .jo-mtab-ic {
        background: var(--ds-nav-active-bg, #F0EAFB);
        color: var(--ds-accent, #7C5CCB);
    }

    .jo-mtab-item:active .jo-mtab-ic { background: var(--ds-nav-hover, #EEF0F5); }
    .jo-mtab-item:focus-visible { outline: none; }
    .jo-mtab-item:focus-visible .jo-mtab-ic { box-shadow: 0 0 0 2px var(--ds-focus-ring, #7C5CCB); }

    .jo-mtab-badge {
        position: absolute;
        top: -2px;
        left: calc(50% + 7px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid var(--ds-bg-sidebar, #F8F9FB);
        border-radius: 999px;
        background: var(--ds-accent, #7C5CCB);
        color: var(--ds-on-accent, #fff);
        font-size: 10px;
        font-weight: 600;
        line-height: 14px;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    /* Tasto centrale AI: tessera lilla tenue con le scintille viola (.jo-ai-action),
     * piena quando l'assistente è aperto. */
    .jo-mtab-item--ai { border: 0; background: transparent; cursor: pointer; color: var(--ds-accent-fg, #5F45A8); }
    .jo-mtab-item--ai .jo-mtab-ic {
        width: 46px;
        height: 46px;
        margin-top: -16px;
        border: 1.5px solid var(--ds-accent, #7C5CCB);
        background: var(--ds-accent-soft, #F3EEFC);
        color: var(--ds-accent, #7C5CCB);
        box-shadow: 0 0 0 4px var(--ds-bg-sidebar, #F8F9FB);
    }

    body:has(.jo-ai-win:not([style*="display: none"])) .jo-mtab-item--ai .jo-mtab-ic {
        background: var(--ds-accent, #7C5CCB);
        color: var(--ds-on-accent, #fff);
    }

    /* Assistente AI a tutto schermo fra la topbar e la barra; niente pallino
     * flottante né pulsante in topbar: si apre dal tasto centrale. */
    body:has(.jo-mtab) .jo-ai-dot,
    body:has(.jo-mtab) .jo-ai-topbar-btn {
        display: none !important;
    }

    body:has(.jo-mtab) .jo-ai-win {
        position: fixed !important;
        inset: var(--jo-topbar-h, 64px) 0 var(--jo-mtab-space) 0 !important;
        z-index: 24;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        border-width: 1px 0 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Ridurre o allargare non ha senso a tutto schermo: resta solo Chiudi. */
    body:has(.jo-mtab) .jo-ai-head .jo-icon-btn:not(:last-child) { display: none; }
    body:has(.jo-mtab) .jo-ai-head { cursor: default; }

    /* ── Niente sidebar: tutto passa dalla barra (e da Altro) ─ */
    body:has(.jo-mtab) .fi-sidebar,
    body:has(.jo-mtab) .fi-sidebar-close-overlay,
    body:has(.jo-mtab) .fi-topbar-open-sidebar-btn,
    body:has(.jo-mtab) .fi-topbar-close-sidebar-btn {
        display: none !important;
    }

    /* Il contenuto finisce sopra la barra. */
    body:has(.jo-mtab) { padding-bottom: var(--jo-mtab-space); }

    /* Piedi fissi dei form (Annulla / Salva) e assistente AI sopra la barra. */
    body:has(.jo-mtab) .fi-form-actions.fi-sticky,
    body:has(.jo-mtab) .fi-resource-edit-record-page.fi-resource-hotels .fi-form-actions {
        bottom: var(--jo-mtab-space);
    }

    body:has(.jo-mtab) .jo-ai-dot { margin-bottom: var(--jo-mtab-space); }

    /* ── Inbox: elenco oppure chat, a tutto schermo ───────── */
    body:has(.jo-mtab) .jo-inbox-root {
        grid-template-rows: minmax(0, 1fr) !important;
        height: calc(100dvh - var(--jo-topbar-h, 64px) - var(--jo-mtab-space) - 24px);
    }

    body:has(.jo-mtab) .jo-inbox-root > aside,
    body:has(.jo-mtab) .jo-inbox-root > main {
        min-height: 0 !important;
        border: 0 !important;
    }

    .jo-inbox-root:not(.jo-ibx-show-chat) > main,
    .jo-inbox-root.jo-ibx-show-chat > aside {
        display: none !important;
    }

    /* In chat: niente testata della pagina, la conversazione prende lo schermo. */
    body:has(.jo-ibx-show-chat) .jo-ibx-head,
    body:has(.jo-ibx-show-chat) .jo-ibx-kpis {
        display: none;
    }

    body:has(.jo-ibx-show-chat) .jo-inbox-root {
        height: calc(100dvh - var(--jo-topbar-h, 64px) - var(--jo-mtab-space));
    }

    .jo-ibx-back.jo-icon-btn {
        display: inline-flex;
        flex: none;
        width: 36px;
        height: 36px;
        margin-left: -8px;
    }

    .jo-ibx-back svg { width: 20px; height: 20px; }

    /* Liste in Card sul telefono (owner 7-ott-2026): testi a capo. */
    body:has(.jo-mtab) .jo-ta-cards td,
    body:has(.jo-mtab) .jo-ta-cards td .truncate,
    body:has(.jo-mtab) .jo-ta-cards td .fi-ta-text-item,
    body:has(.jo-mtab) .jo-ta-cards td .fi-ta-text-item-label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        max-width: 100% !important;
    }
    body:has(.jo-mtab) .jo-ta-cards td:last-child .jo-row-actions,
    body:has(.jo-mtab) .jo-ta-cards td:last-child .fi-ta-actions { justify-content: flex-start; gap: 8px; }
    body:has(.jo-mtab) .jo-ta-cards td:last-child .fi-icon-btn,
    body:has(.jo-mtab) .jo-ta-cards td:last-child .fi-btn { min-width: 44px; min-height: 44px; }

    /* Inbox in chat (owner 7-ott-2026): testata compatta, messaggi al centro,
       composer in basso sopra la barra; l'ospite in un foglio dal basso. */
    .jo-ibx-chat-head { padding: 8px 10px !important; gap: 6px; }
    .jo-ibx-chat-head .jo-ibx-head-avatar { display: none !important; }
    .jo-ibx-chat-head .jo-ibx-head-meta { gap: 2px 10px; }
    .jo-ibx-chat-tools { gap: 0 !important; flex: none; }
    .jo-ibx-chat-tools .jo-icon-btn { width: 36px; height: 36px; }
    .jo-ibx-resume textarea { max-height: 96px; overflow: auto; }
    .jo-inbox-root .jo-ibx-guest-btn { display: inline-flex; }
    .jo-inbox-root.jo-ibx-show-chat.jo-ibx-show-guest > aside.jo-ibx-aside {
        display: block !important;
        position: fixed;
        left: 0; right: 0;
        bottom: var(--jo-mtab-space);
        max-height: 72dvh;
        overflow-y: auto;
        z-index: 40;
        background: var(--ds-surface, #FCFCFD);
        border-top: 1px solid var(--ds-border, #DFE2EA) !important;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, .18);
        padding-top: 8px;
    }
    .jo-ibx-show-guest > aside.jo-ibx-aside .jo-ibx-collapse,
    .jo-ibx-show-guest > aside.jo-ibx-aside .jo-ibx-rail-label { display: none !important; }
    .jo-ibx-show-guest > aside.jo-ibx-aside .jo-ibx-sheet-close { display: inline-flex; position: absolute; top: 8px; right: 8px; }

    /* ── Inbox email: ricerca e canali in alto, poi elenco oppure email ─
     * Le cartelle e "Sincronizza" restano sul computer. */
    body:has(.jo-mtab) .jo-email {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100dvh - var(--jo-topbar-h, 64px) - var(--jo-mtab-space) - 24px);
    }

    body:has(.jo-mtab) .jo-email > .jo-col { border-right: 0; }
    body:has(.jo-mtab) .jo-email > .jo-col--folders { border-bottom: 1px solid var(--ds-border, #DFE2EA); }
    body:has(.jo-mtab) .jo-email > .jo-col--folders > .jo-scroll,
    body:has(.jo-mtab) .jo-email > .jo-col--read { display: none; }

    /* iOS non ingrandisce la pagina al tocco con 16px. */
    body:has(.jo-mtab) .jo-email .jo-search { font-size: 16px; }

    body:has(.jo-mtab) .jo-email.jo-mail-show-read { grid-template-rows: minmax(0, 1fr); }
    body:has(.jo-mtab) .jo-email.jo-mail-show-read > .jo-col--folders,
    body:has(.jo-mtab) .jo-email.jo-mail-show-read > .jo-col--list { display: none; }
    body:has(.jo-mtab) .jo-email.jo-mail-show-read > .jo-col--read { display: flex; }

    body:has(.jo-mail-show-read) .jo-ibx-head { display: none; }
    body:has(.jo-mail-show-read) .jo-email { height: calc(100dvh - var(--jo-topbar-h, 64px) - var(--jo-mtab-space)); }

    body:has(.jo-mtab) .jo-email .jo-readhead { padding: 12px 16px; }
    body:has(.jo-mtab) .jo-email .jo-readhead .jo-ibx-back { margin-bottom: 4px; }
    body:has(.jo-mtab) .jo-email .jo-msg { max-width: 100%; }

    /* Le schermate dell'app: niente descrizione sotto il titolo. */
    .fi-page:has(.jo-m) .fi-header-subheading { display: none; }
}

.jo-ibx-back { display: none; }
.jo-ibx-guest-btn, .jo-ibx-sheet-close { display: none; }

/* Voci solo per il telefono (es. menu dell'avatar del proprietario). */
@media (min-width: 768px) {
    .jo-m-only { display: none !important; }
}

/* ── Schermate dell'app (Oggi, Preventivi, Ospiti, Altro) ─────── */
.jo-m {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
}

.jo-m-sec { display: flex; flex-direction: column; gap: 8px; }

.jo-m-h {
    margin: 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-tertiary, #5B5B6B);
}

/* Elenco: un riquadro, righe separate da un filetto. */
.jo-m-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-surface, #FCFCFD);
    box-shadow: var(--ds-shadow-rest, none);
    overflow: hidden;
}

.jo-m-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 6px;
}

.jo-m-row + .jo-m-row { border-top: 1px solid var(--jo-ui-line-2, var(--ds-border, #DFE2EA)); }

.jo-m-row-main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 60px;
    padding: 10px 8px 10px 14px;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Riga che invia un form (entrare in un hotel, tornare alla Console). */
.jo-m-row-form { display: flex; flex: 1; min-width: 0; margin: 0; }

button.jo-m-row-main {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:is(a, button).jo-m-row-main:active { background: var(--ds-surface-hover, #ECEEF3); }
:is(a, button).jo-m-row-main:focus-visible { outline: 2px solid var(--ds-accent, #7C5CCB); outline-offset: -2px; }

@media (hover: hover) {
    :is(a, button).jo-m-row-main:hover { background: var(--ds-accent-soft, #F3EEFC); }
}

.jo-m-av {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent-fg, #5F45A8);
    font-size: 13px;
    font-weight: 600;
}

.jo-m-ic.jo-kpi-ic {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 10px;
}

.jo-m-ic svg { width: 19px; height: 19px; }

.jo-m-txt { flex: 1; min-width: 0; }

.jo-m-txt b,
.jo-m-txt small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jo-m-txt b { font-size: 14.5px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-m-txt small { margin-top: 2px; font-size: 12.5px; color: var(--ds-text-placeholder, #6B6B7B); }

.jo-m-status { flex: none; font-size: 12px; }

.jo-m-val {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary, #3F3F46);
    font-variant-numeric: tabular-nums;
}

/* "Da fare": il numero come un contatore, viola pieno come i badge del menu. */
.jo-m-row--count .jo-m-val {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ds-accent, #7C5CCB);
    color: var(--ds-on-accent, #fff);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
}

.jo-m-go { flex: none; width: 18px; height: 18px; color: var(--ds-text-disabled, #8A8A99); }

/* Azioni a un tocco (chiama, WhatsApp): bersagli da 40px. */
.jo-m-row .jo-m-act.jo-icon-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.jo-m-row .jo-m-act svg { width: 20px; height: 20px; }

/* "+ Nuova richiesta": la CTA minimal delle liste (tessera tratteggiata, label viola). */
.jo-m-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 4px 2px;
    color: var(--ds-accent-fg, #5F45A8);
    font-size: 14px;
    font-weight: 600;
}

.jo-m-ctas { display: flex; flex-wrap: wrap; gap: 4px 24px; }
button.jo-m-cta { border: 0; background: transparent; cursor: pointer; font-family: inherit; }

.jo-m-cta-ic {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1.5px dashed var(--ds-accent, #7C5CCB);
    border-radius: 9px;
    color: var(--ds-accent, #7C5CCB);
    transition: background-color .12s ease, color .12s ease;
}

.jo-m-cta-ic svg { width: 18px; height: 18px; }
.jo-m-cta:active .jo-m-cta-ic { background: var(--ds-accent, #7C5CCB); border-style: solid; color: var(--ds-on-accent, #fff); }

/* Chiama · WhatsApp · Email sotto il nome di una scheda: tre tasti larghi. */
.jo-m-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.jo-m-contact a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-surface, #FCFCFD);
    color: var(--ds-accent-fg, #5F45A8);
    font-size: 12.5px;
    font-weight: 600;
}

.jo-m-contact a:active { background: var(--ds-accent-soft, #F3EEFC); }
.jo-m-contact svg { width: 20px; height: 20px; color: var(--ds-accent, #7C5CCB); }

.jo-m-actions--stack { flex-direction: column; }

/* Modulo ridotto (Nuova richiesta): sezioni e Registra in colonna. */
.jo-m-form { display: flex; flex-direction: column; gap: 16px; }

/* Righe con un testo da leggere per intero (note, ospiti). */
.jo-m-row--wrap .jo-m-txt small { white-space: normal; }

/* Grafico dell'andamento, nello stesso riquadro degli elenchi. */
.jo-m-chart {
    padding: 12px 10px 6px;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-surface, #FCFCFD);
    box-shadow: var(--ds-shadow-rest, none);
}

/* Ricerca in testa agli elenchi. */
.jo-m-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-field-bg, #FEFEFF);
    color: var(--ds-text-placeholder, #6B6B7B);
}

.jo-m-search:focus-within { border-color: var(--ds-accent, #7C5CCB); box-shadow: 0 0 0 3px var(--ds-field-focus-halo, rgba(124, 92, 203, .15)); }
.jo-m-search svg { width: 18px; height: 18px; flex: none; }

.jo-m-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ds-text-primary, #18181B);
    /* 16px: iOS non ingrandisce la pagina al tocco. */
    font-size: 16px;
    outline: none;
    box-shadow: none;
}

.jo-m-search input::placeholder { color: var(--ds-text-placeholder, #6B6B7B); }

.jo-m-busy { opacity: .55; transition: opacity .15s ease; }

.jo-m-more {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ds-accent-fg, #5F45A8);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.jo-m-more:active { background: var(--ds-accent-soft, #F3EEFC); }

.jo-m-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 14px;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-surface, #FCFCFD);
    font-size: 13.5px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-m-empty svg { width: 20px; height: 20px; flex: none; color: var(--ds-text-disabled, #8A8A99); }

/* Telefono (owner 7-ott-2026): un pannello a scorrimento (campanella delle
   notifiche, filtri…) copre tutto lo schermo, sopra la barra di navigazione. */
@media (max-width: 767px) {
    .fi-modal:has(.fi-modal-slide-over-window) { z-index: 45 !important; }
    .fi-modal-slide-over-window { max-width: 100vw !important; }
    .fi-no-database .fi-no-notification,
    .fi-modal-slide-over-window .fi-no-notification { padding-block: 14px; }
}

/* ── Bottoni sul telefono (owner 12-ott-2026) ─────────────────────
 * Sul telefono i bottoni non sono quelli del computer: si toccano col
 * dito. Bersagli da 44px (40px le sole icone), testo 15px, raggio 12px;
 * il piede dei moduli e dei pop-up mette la CTA a tutta larghezza in
 * cima e le altre sotto, divise in parti uguali, mai righe spezzate a
 * caso. Vale in ogni pagina aperta dal telefono (barra in basso). Il
 * compositore del preventivo ha il suo piede compatto (std-quotes.css). */
@media (max-width: 767px) {
    body:has(.jo-mtab) :is(.fi-form-actions, .fi-modal-footer, .fi-header, .jo-m) .fi-btn {
        min-height: 44px;
        padding-inline: 16px;
        border-radius: 12px;
        font-size: 15px;
    }

    body:has(.jo-mtab) :is(.fi-header, .fi-modal-footer) :is(.fi-icon-btn, .jo-icon-btn) {
        min-width: 40px;
        min-height: 40px;
    }

    /* Piede dei moduli: CTA in cima a tutta larghezza, poi le altre
       (Annulla compreso) affiancate in parti uguali. */
    body:has(.jo-mtab) .fi-form-actions:not(.jo-qcomp-main .fi-form-actions) .fi-ac {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    body:has(.jo-mtab) .fi-form-actions:not(.jo-qcomp-main .fi-form-actions) .fi-ac > * {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
    }

    body:has(.jo-mtab) .fi-form-actions:not(.jo-qcomp-main .fi-form-actions) .fi-ac > :first-child { flex-basis: 100%; }

    body:has(.jo-mtab) .fi-form-actions:not(.jo-qcomp-main .fi-form-actions) .fi-btn {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }

    /* Pop-up: i bottoni uno sotto l'altro, a tutta larghezza, la conferma in cima. */
    body:has(.jo-mtab) .fi-modal-footer-actions {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body:has(.jo-mtab) .fi-modal-footer-actions > *,
    body:has(.jo-mtab) .fi-modal-footer-actions .fi-btn { width: 100%; justify-content: center; }

    /* La conferma (piena, viola o rossa) prima di Annulla, qualunque sia l'ordine del pop-up. */
    body:has(.jo-mtab) .fi-modal-footer-actions > :is(.fi-color-primary, .fi-color-danger):not(.fi-btn-outlined),
    body:has(.jo-mtab) .fi-modal-footer-actions > :has(> :is(.fi-color-primary, .fi-color-danger):not(.fi-btn-outlined)) { order: -1; }

    /* Testata della pagina: le icone (e i tre puntini) su una riga, i
       bottoni con il testo sotto, a tutta larghezza. */
    body:has(.jo-mtab) .fi-header .fi-ac { flex-wrap: wrap; gap: 6px; width: 100%; }
    body:has(.jo-mtab) .fi-header .fi-ac > .fi-btn { order: 10; flex: 1 1 100%; justify-content: center; }
}

/* ── Revisione 19-ott-2026: schermate dell'app ───────────────────
 * - Sul computer la colonna dell'app (720px) sta al centro, con la sua
 *   testata, invece che a sinistra con metà schermo vuota.
 * - I tre numeri in testa usano il disegno KPI standard (.jo-kpi con
 *   l'icona in tessera, filament.pages.mobile.stats): sempre 3 per riga.
 * - L'evidenza al passaggio copre tutta la riga, fino al bordo destro.
 * - Le sezioni di un elenco (es. "Tutti gli ospiti") hanno lo stesso
 *   passo di 20px delle altre etichette di gruppo.
 * - Titolo del grafico (Console ▸ Home): cosa disegna, in una riga.
 * - Sul telefono la testata senza azioni non lascia un vuoto: il blocco
 *   vuoto delle azioni sparisce, fra titolo e prima card restano i 20px
 *   del passo verticale unico. */
.jo-m { width: 100%; margin-inline: auto; }
.fi-page:has(.jo-m) .fi-header { width: 100%; max-width: 720px; margin-inline: auto; }

.jo-kpis.jo-m-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.jo-m-row { padding-right: 0; }
.jo-m-row:has(> .jo-m-act) { padding-right: 6px; }

@media (hover: hover) {
    :is(a, button).jo-m-row-main:hover { background: transparent; }
    .jo-m-row:has(:is(a, button).jo-m-row-main:hover) { background: var(--ds-accent-soft, #F3EEFC); }
}

.jo-m-sections { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 639px) {
    .fi-header > div:last-child:not(:has(*)) { display: none; }
}

/* ── Inbox sul telefono, revisione 19-ott-2026 ────────────────────
 * "Risposte automatiche" (fulmine) sta sulla riga dei filtri per canale,
 * non da solo su una riga della testata; sul computer resta in testata. */
.jo-ibx-ch-tool { display: none; flex: 0 0 auto; }

@media (max-width: 767px) {
    .jo-ibx-head .jo-ibx-autopilot { display: none; }
    .jo-ibx-ch .jo-ibx-ch-tool { display: inline-flex; }
}

/* ══ Card sul telefono più basse (revisione 19-ott-2026) ══
   Una card degli Ospiti era alta ~230px per tre dati: le icone delle azioni
   avevano una riga loro da 44px sotto i dati. Sotto i 640px, con al massimo
   tre azioni, le icone stanno in alto a destra sulla testata della card
   (40px come le icone sul telefono); con più azioni restano sotto. */
@media (max-width: 639px) {
    .jo-ta-cards table.fi-ta-table > tbody > tr:not(:has(> td.fi-ta-actions-cell .jo-row-actions > :nth-child(4))) {
        position: relative;
    }

    .jo-ta-cards table.fi-ta-table > tbody > tr:not(:has(> td.fi-ta-actions-cell .jo-row-actions > :nth-child(4))) > td.fi-ta-actions-cell {
        position: absolute;
        top: 3px;
        right: 4px;
        width: auto !important;
        z-index: 1;
    }

    body .jo-ta-cards table.fi-ta-table > tbody > tr > td.fi-ta-actions-cell :is(.fi-icon-btn, .jo-row-slot-empty) {
        min-width: 40px;
        min-height: 40px;
    }

    .jo-ta-cards table.fi-ta-table > tbody > tr:not(:has(> td.fi-ta-actions-cell .jo-row-actions > :nth-child(4))) > :is(td[data-jo-label]:first-of-type, td.fi-ta-selection-cell + td[data-jo-label], td.jo-q-expand-td + td[data-jo-label]) {
        padding-right: 136px !important;
        min-height: 46px;
    }
}

/* App sul telefono: tre KPI per riga a 390px lasciavano all'etichetta
   ~50px ("Conver…", "Hotel a…"). Sotto i 640px niente icona in tessera:
   etichetta e valore prendono tutta la tessera (revisione 19-ott-2026). */
@media (max-width: 639px) {
    .jo-m-kpis .jo-kpi > .jo-kpi-top > .jo-kpi-ic { display: none; }
    html body .jo-m-kpis .jo-kpi:has(> .jo-kpi-top > .jo-kpi-ic) { padding-left: var(--jo-kpi-pad-x, 12px) !important; }
}

/* Esempio per l'approvazione dei modelli WhatsApp: sul telefono 16px, sotto
   iOS fa lo zoom della pagina al tocco (19-ott-2026). */
@media (max-width: 767px) {
    .jo-wa-example input { font-size: 16px !important; }
}

/* === Preventivi nell'app: Richieste | Preventivi, schede e modulo (20-ott-2026) ===
 * MobileQuotes, MobileQuoteCard (request-card, quote-card), MobileQuoteRequest.
 * - Il menu orizzontale della piattaforma in testa, poi la barra a icone:
 *   "+" a sinistra, Cerca e Stato a destra (40px, come le icone sul telefono).
 * - Le righe: a destra lo stato col pallino, sotto "Urgente" o il totale.
 * - Le schede: il riepilogo fisso della richiesta / del preventivo col
 *   disegno della richiesta associata (lilla tenue, maiuscoletto). */
.jo-mq { display: flex; flex-direction: column; gap: 12px; }
.jo-mq > .jo-mq-menu { margin-bottom: 0; }
.jo-mq-menu.fi-page-sub-navigation-tabs { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

.jo-mq-bar { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.jo-mq-new { padding: 0; }
.jo-mq-new .jo-m-cta-ic { width: 40px; height: 40px; border-radius: 10px; }
.jo-mq-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.jo-mq-tool.jo-icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-mq-tool svg { width: 20px; height: 20px; }
.jo-mq-tool.is-on { background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent, #7C5CCB); }

.jo-mq-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ds-accent, #7C5CCB);
}

.jo-mq-active { display: flex; align-items: center; gap: 6px; margin: 0 2px; font-size: 13px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-active b { font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mq-clear { margin-left: auto; padding: 4px 2px; border: 0; background: none; color: var(--ds-accent-fg, #5F45A8); font: inherit; font-weight: 600; cursor: pointer; }

.jo-mq-row .jo-m-row-main { align-items: flex-start; }
.jo-mq-note { font-size: 12px !important; }
.jo-mq-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 1px; }
.jo-mq-side .jo-m-val { font-size: 13.5px; }

/* Riepilogo della scheda (owner 20-ott-2026: il più basso possibile):
   due righe, chi e stato/totale, poi soggiorno o validità e letture. */
.jo-mq-strip {
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--ds-accent, #7C5CCB) 28%, var(--ds-border, #DFE2EA));
    border-radius: 12px;
    background: linear-gradient(var(--ds-accent-soft, #F3EEFC), var(--ds-accent-soft, #F3EEFC)), var(--ds-surface, #FCFCFD);
}

.jo-mq-strip p { margin: 0; }
.jo-mq-l1 { display: flex; align-items: baseline; gap: 10px; }
.jo-mq-l1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mq-l1 .jo-cell-status { flex: none; font-size: 12.5px; }
.jo-mq-total { flex: none; font-size: 15.5px; font-weight: 600; color: var(--ds-text-primary, #18181B); font-variant-numeric: tabular-nums; }
.jo-mq-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px !important; font-size: 13px; line-height: 1.35; color: var(--ds-text-secondary, #3F3F46); }
.jo-mq-l2 .jo-cell-status { font-size: 12.5px; }
.jo-mq-l2 .is-warning { color: var(--ds-warning-fg, #B54708); }
.jo-mq-strip .is-danger { color: var(--ds-danger-fg, #B42318); }

/* Schede (owner 20-ott-2026: tutto in una schermata, niente che si apre). */
.jo-mq-card { gap: 10px; }
.jo-mq-card .jo-m-sec { gap: 6px; }

/* Riga bassa di icone: contatti a sinistra, azioni secondarie a destra. */
.jo-mq-bar2 { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.jo-mq-ct.jo-icon-btn { border: 1px solid var(--ds-border, #DFE2EA); background: var(--ds-surface, #FCFCFD); color: var(--ds-accent, #7C5CCB); }
.jo-mq-icons { display: flex; gap: 2px; margin-left: auto; }
a.jo-mq-tool, button.jo-mq-tool { display: grid; place-items: center; }

/* Azione principale: una sola, piena, a tutta larghezza. */
.jo-mq-main { display: flex; }
.jo-mq-main > *, .jo-mq-main .fi-btn { flex: 1; width: 100%; justify-content: center; }

.jo-mq-hint { display: flex; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-hint svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* Dati utili: griglia compatta a due colonne di coppie etichetta/valore piccole. */
.jo-mq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; padding: 0 2px; }
.jo-mq-grid > div { min-width: 0; }
.jo-mq-grid > .is-wide { grid-column: 1 / -1; }
.jo-mq-grid dt { font-size: 11px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-grid dd { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ds-text-primary, #18181B); overflow-wrap: anywhere; }

/* Preventivi della richiesta: righe compatte già complete, azioni a icone. */
.jo-mq-qlist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); }
.jo-mq-qrow { padding: 8px 6px 4px 12px; }
.jo-mq-qrow + .jo-mq-qrow { border-top: 1px solid var(--jo-ui-line-2, var(--ds-border, #DFE2EA)); }
.jo-mq-qrow-l1 { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-right: 6px; }
.jo-mq-qrow-l1 b { font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mq-qrow-l1 .jo-cell-status { font-size: 12.5px; }
.jo-mq-qrow-l1 .jo-mq-total { margin-left: auto; font-size: 14px; }
.jo-mq-qrow-l2 { display: flex; align-items: center; gap: 6px; }
.jo-mq-qrow-meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ds-text-placeholder, #6B6B7B); }

/* Richiesta collegata nella scheda del preventivo: già completa. */
.jo-mq-h { display: flex; align-items: center; justify-content: space-between; }
.jo-mq-rbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); }
.jo-mq-rbox .jo-mq-l2 { margin: 0; color: var(--ds-text-primary, #18181B); font-weight: 500; }
.jo-mq-rbox .jo-mq-grid { padding: 0; }

/* Soluzioni: titolo, etichetta · date · ospiti; il prezzo a destra. */
.jo-mq-sols { padding: 0 12px !important; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); }

.jo-mq-sols { margin: 0; padding: 0; list-style: none; }
.jo-mq-sols li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.jo-mq-sols li + li { border-top: 1px solid var(--jo-ui-line-2, var(--ds-border, #DFE2EA)); }
.jo-mq-sol-t { flex: 1; min-width: 0; }
.jo-mq-sol-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mq-sol-t small { display: block; margin-top: 1px; font-size: 12px; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mq-sol-t em { font-style: normal; font-weight: 600; color: var(--ds-accent-fg, #5F45A8); }
.jo-mq-price { display: flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; }
.jo-mq-price b { font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #18181B); font-variant-numeric: tabular-nums; }
.jo-mq-price small { font-size: 11.5px; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mq-none { margin: 0; padding: 8px 0; font-size: 13px; color: var(--ds-text-tertiary, #5B5B6B); }

/* Righe degli elenchi: icona prima della nota (sorgente) e icone di dato a destra (consenso). */
.jo-mq-ni { display: inline-grid; vertical-align: -3px; margin-right: 4px; }
.jo-mq-ni svg { width: 14px; height: 14px; }
.jo-mq-si { display: inline-grid; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-si svg { width: 16px; height: 16px; }

/* Scelte da un tocco nella scheda (Stato, In carico a): un menu piccolo, senza pop-up. */
.jo-mq-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.jo-mq-pick > * { flex: 1 1 0; min-width: 0; }
.jo-mq-pick .jo-mq-pickbtn { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 10px; background: var(--ds-field-bg, #FEFEFF); font: inherit; font-size: 13.5px; color: var(--ds-text-primary, #18181B); text-align: left; cursor: pointer; }
.jo-mq-pickbtn small { display: block; font-size: 11px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-pickbtn svg { flex: none; width: 16px; height: 16px; color: var(--ds-text-disabled, #8A8A99); }

/* Nota scritta nella scheda lead: il campo e l'invio, sempre in vista. */
.jo-mq-note-form { display: flex; align-items: flex-end; gap: 6px; }
.jo-mq-note-form textarea { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 10px; background: var(--ds-field-bg, #FEFEFF); font: inherit; font-size: 16px; color: var(--ds-text-primary, #18181B); resize: vertical; }
.jo-mq-note-form textarea:focus { outline: none; border-color: var(--ds-accent, #7C5CCB); box-shadow: 0 0 0 3px var(--ds-field-focus-halo, rgba(124, 92, 203, .15)); }

/* "Gestita" nelle schede: la riga dell'interruttore, tutta toccabile. */
.jo-mq-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 6px 14px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); font: inherit; text-align: left; cursor: pointer; }
.jo-mq-switchrow b { display: block; font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mq-switchrow small { display: block; font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mq-grid > .is-wide dd { white-space: pre-line; }

/* === Home mobile a widget (20-ott-2026) ===
 * Le tre Home dell'app (Console, Andamento di un hotel, Home del
 * proprietario): periodo in testa come una riga che scorre, tocchi da 40px;
 * ogni widget con titolo e una riga che dice periodo e di chi; il foglio
 * "Modifica widget" che sale dal basso (mobile/widget-sheet, joMWidgets). */
.jo-mw-period { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jo-mw-period .jo-period { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.jo-mw-period .jo-gd-seg {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.jo-mw-period .jo-gd-seg::-webkit-scrollbar { display: none; }
.jo-mw-period .jo-gd-seg button { flex: none; min-height: 40px; min-width: 44px; justify-content: center; white-space: nowrap; }
.jo-mw-period .jo-period-dates { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 0; }
.jo-mw-period .jo-period-dates label { display: flex; align-items: center; gap: 6px; padding: 0; font-size: 13px; color: var(--ds-text-tertiary, #5B5B6B); }
html .jo-mw-period .jo-period-dates input { min-height: 40px; font-size: 15px; }
.jo-mw-note { margin: 0 2px; font-size: 12.5px; color: var(--ds-text-placeholder, #6B6B7B); }

.jo-mw-w { border-radius: 14px; transition: box-shadow .3s, background-color .3s; -webkit-touch-callout: none; }
.jo-mw-w.is-glow { box-shadow: 0 0 0 3px var(--ds-accent-light, #E5DAFB); background: var(--ds-accent-soft, #F1EAFD); }
.jo-mw-head { display: flex; flex-direction: column; gap: 1px; margin: 0 2px; }
.jo-mw-head .jo-m-h { margin: 0; font-size: 14px; color: var(--ds-text-primary, #18181B); }
.jo-mw-sub { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mw-compare { margin: -2px 4px 0; font-size: 12px; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mw-w .jo-m-kpis { margin: 0; }
.jo-mw-empty { flex-wrap: wrap; }

/* Foglio dal basso, sopra la barra delle tab e sotto le notifiche ("Annulla"). */
html.jo-msheet-open, html.jo-msheet-open body { overflow: hidden; }
.jo-msheet-veil { position: fixed; inset: 0; z-index: 46; background: rgb(15 15 25 / .42); }
.jo-msheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 47;
    display: flex;
    flex-direction: column;
    max-width: 720px;
    height: 78dvh;
    margin-inline: auto;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--ds-surface, #FCFCFD);
    box-shadow: 0 -10px 40px rgb(15 15 25 / .18);
    transition: height .25s ease, transform .2s ease;
    padding-bottom: env(safe-area-inset-bottom);
}
.jo-msheet.is-full { height: calc(100dvh - 24px); }
.jo-msheet.is-dragging { transition: none; }
.jo-msheet-slide { transition: transform .25s ease; }
.jo-msheet-down { transform: translateY(100%); }
.jo-msheet-up { transform: translateY(0); }
.jo-msheet-fade { transition: opacity .2s ease; }
.jo-msheet-fade-0 { opacity: 0; }
.jo-msheet-fade-1 { opacity: 1; }
.jo-msheet-top { flex: none; padding: 0 12px 8px; border-bottom: 1px solid var(--ds-border, #DFE2EA); touch-action: none; cursor: grab; }
.jo-msheet-handle { display: flex; justify-content: center; width: 100%; height: 22px; padding: 8px 0 0; border: 0; background: none; cursor: grab; }
.jo-msheet-handle span { width: 40px; height: 5px; border-radius: 999px; background: var(--ds-border-strong, #C9CDD8); }
.jo-msheet-bar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.jo-msheet-bar b { flex: 1; font-size: 16px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-msheet-bar .jo-icon-btn { width: 40px; height: 40px; }
.jo-msheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 24px; }
/* "Modifica la Home" sulla riga del titolo, non in una riga sua. */
/* Catena di figli diretti (pagina di Filament: section > div > .grid > contenuto):
   con :has(.jo-mw) Chrome scandiva tutta la pagina a ogni ricalcolo dello stile. */
.fi-page:has(> section > div > .grid > .jo-mw) .fi-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
body .fi-page:has(> section > div > .grid > .jo-mw) .fi-header .fi-ac { width: auto; flex-wrap: nowrap; }
.fi-page:has(> section > div > .grid > .jo-mw) .fi-header .fi-ac-icon-btn-action { width: 40px; height: 40px; margin: 0; color: var(--ds-text-tertiary, #5B5B6B); }
/* Etichette dei numeri intere su due righe, mai troncate ("Preventivi inviati"). */
.jo-mw-w .jo-kpi-lbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.jo-mw-w .jo-kpi-note.jo-m-delta { font-size: 12px; font-weight: 600; }
.jo-mw-group { margin: 4px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B); }

/* Pannello "Modifica la Home" (owner 20-ott-2026): una riga per widget, niente anteprime. */
.jo-msheet-reset { min-height: 40px; padding: 0 6px; border: 0; background: none; font-size: 13.5px; font-weight: 500; color: var(--ds-accent-fg, #5F45A8); }
.jo-mgal-hint { margin: -4px 2px 10px; font-size: 12.5px; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mgal-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-field-bg, #FEFEFF); color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mgal-search svg { width: 18px; height: 18px; flex: none; }
.jo-mgal-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; color: var(--ds-text-primary, #18181B); outline: none; box-shadow: none; padding: 0; }
.jo-mgal-cat { margin-top: 16px; }
.jo-mgal-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-mgal-h svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--ds-accent-soft, #F1EAFD); color: var(--ds-accent-fg, #5F45A8); }

/* Nella tessera il nome sta sotto: la testata del widget non si ripete. */

/* Widget a numero singolo (owner 20-ott-2026): nella Home 2-3 per riga. */
.jo-mw-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.jo-mw-w--number { gap: 0; }
.jo-mw-num { position: relative; display: flex; min-width: 0; height: 100%; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); box-shadow: var(--ds-shadow-rest, none); color: inherit; text-decoration: none; }
.jo-mw-num-top { display: block; min-width: 0; }
/* L'icona in basso a destra: il nome ha tutta la riga e non si taglia. */
.jo-mw-num-top .jo-kpi-ic { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 7px; }
.jo-mw-num-top .jo-kpi-ic svg { width: 14px; height: 14px; }
.jo-mw-num-t { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mw-num-v { font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--ds-text-primary, #18181B); font-variant-numeric: tabular-nums; }
.jo-mw-num-v small { font-size: 12px; font-weight: 600; }
.jo-mw-num-s { font-size: 11.5px; color: var(--ds-text-placeholder, #6B6B7B); }

/* Grafici a barre orizzontali (~30px per categoria), nello stesso riquadro degli elenchi. */
.jo-mw-bars { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.jo-mw-bar { display: grid; grid-template-columns: auto minmax(0, 8.5rem) 1fr auto auto; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; }
.jo-mw-bar:not(:has(.jo-bks-logo)) { grid-template-columns: minmax(0, 8.5rem) 1fr auto auto; }
.jo-mw-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-secondary, #3F3F46); }
.jo-mw-bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ds-surface-sunken, #F3F4F8); }
.jo-mw-bar-track > i { display: block; height: 100%; border-radius: inherit; background: var(--ds-accent, #7145D9); opacity: .75; }
.jo-mw-bar-n { font-variant-numeric: tabular-nums; color: var(--ds-text-primary, #18181B); }
.jo-mw-bar-pct { min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-text-tertiary, #5B5B6B); }
/* Riga del pannello: icona in tessera lilla, nome, cosa mostra, tipo; "+" o "−" a destra. */
.jo-mgal-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ds-border, #DFE2EA); border-radius: 12px; background: var(--ds-surface, #FCFCFD); overflow: hidden; }
.jo-mgal-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 6px 8px 12px; background: var(--ds-surface, #FCFCFD); }
.jo-mgal-row + .jo-mgal-row { border-top: 1px solid var(--ds-border, #DFE2EA); }
.jo-mgal-on .jo-mgal-row { touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.jo-mgal-row.is-sorting { position: relative; z-index: 2; background: var(--ds-accent-soft, #F1EAFD); box-shadow: var(--ds-shadow-raised, 0 6px 18px rgb(0 0 0 / .12)); }
.jo-mgal-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ds-accent-soft, #F1EAFD); color: var(--ds-accent-fg, #5F45A8); }
.jo-mgal-ic svg { width: 19px; height: 19px; }
.jo-mgal-txt { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.jo-mgal-txt b { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ds-text-primary, #18181B); }
.jo-mgal-txt small { font-size: 12.5px; line-height: 1.3; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-mgal-type { margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ds-text-placeholder, #6B6B7B); }
.jo-mgal-op { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.jo-mgal-op svg { width: 26px; height: 26px; padding: 4px; border-radius: 999px; }
.jo-mgal-op.is-add svg { background: var(--ds-accent, #7145D9); color: #fff; }
.jo-mgal-op.is-remove svg { border: 1px solid var(--ds-border-strong, #C9CDD8); background: var(--ds-surface, #FCFCFD); color: var(--ds-text-secondary, #3F3F46); }

/* Compositore del preventivo dal telefono: la richiesta associata ferma in
   alto copriva ~120px dei passi mentre si scorre; sul telefono scorre con la
   pagina (sul computer resta ferma). */
@media (max-width: 767px) {
    body.jo-quote-pilot:has(.jo-mtab) .jo-qh-req[data-jo-request-strip] { position: relative; top: auto; }
}

/* === App mobile = piattaforma desktop (20-ott-2026) ===
   Le tab usano i nomi delle voci del computer ("Preventivatore"): il tasto
   acceso non cambia peso, così il nome resta intero e non salta di larghezza. */
@media (max-width: 767px) {
    .jo-mtab-item.is-active { font-weight: 500; }
    .jo-mtab-lbl { letter-spacing: -0.01em; }
}