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

/* Tre numeri in una riga: niente tessere, solo il dato. */
.jo-m-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 14px 4px;
    border: 1px solid var(--ds-border, #DFE2EA);
    border-radius: 12px;
    background: var(--ds-surface, #FCFCFD);
    box-shadow: var(--ds-shadow-rest, none);
}

.jo-m-stats > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.jo-m-stats > div + div { border-left: 1px solid var(--ds-border, #DFE2EA); }
.jo-m-stats dd { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--ds-text-primary, #18181B); font-variant-numeric: tabular-nums; }
.jo-m-stats dt { font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); white-space: nowrap; }

.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); }

/* Azioni di una scheda (Invia di nuovo, Scarica PDF): su una riga, larghe. */
.jo-m-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jo-m-actions > * { flex: 1 1 auto; justify-content: center; }
.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;
    }

    body:has(.jo-mtab) .fi-form-actions.fi-sticky:not(.jo-qcomp-main .fi-form-actions) {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }

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