/*
 * Topbar: "Cerca hotel o gruppo" (contesto) + "Cerca in Joorna" (ricerca
 * globale), affiancati al centro. Selettore in
 * resources/views/filament/layouts/hotel-context-chip.blade.php, ricerca in
 * resources/views/vendor/filament-panels/components/global-search/field.blade.php.
 *
 * Le view custom non sono scansionate da Tailwind: tutto qui, solo token.
 */

/* ── Layout: i due campi al centro, notifiche e utente a destra ───────── */
.fi-topbar > nav > .ms-auto {
    flex: 1 1 auto;
    justify-content: flex-end; /* senza i due campi (pannello hotel) resta tutto a destra */
    min-width: 0;
}

.fi-topbar .jo-ctx {
    margin-inline-start: auto;
}

/* Senza ricerca globale accanto (pannello hotel) il campo sta da solo al centro. */
.fi-topbar .jo-ctx:not(:has(+ .fi-global-search)) {
    margin-inline-end: auto;
}

.fi-topbar .jo-ctx + .fi-global-search,
.fi-topbar .fi-global-search {
    margin-inline-end: auto;
}

/* I due campi sono un'unica coppia: più vicini tra loro che al resto. */
.fi-topbar .jo-ctx + .fi-global-search {
    margin-inline-start: -0.5rem;
}

/* ── Campo contesto ──────────────────────────────────────────────────── */
.jo-ctx {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.jo-ctx-pick {
    position: relative;
    flex: 0 1 300px;
    width: 300px;
    min-width: 0;
}

.jo-ctx-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-surface, #FAFAFB);
    color: var(--ds-text-secondary, #3F3F46);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}

.jo-ctx-field:hover {
    border-color: var(--ds-field-border, #C5CBD5);
}

.jo-ctx-field.is-open,
.jo-ctx-field:focus-within {
    border-color: var(--ds-accent, #7C5CCB);
    box-shadow: var(--ds-focus-ring, 0 0 0 2px #FAFAFB, 0 0 0 4px #A991E0);
}

.jo-ctx-field:not(.is-open) {
    cursor: pointer;
}

.jo-ctx-field.is-busy {
    opacity: .6;
    cursor: wait;
}

.jo-ctx-field-ic {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-ctx-field.is-set .jo-ctx-field-ic {
    color: var(--ds-accent, #7C5CCB);
}

.jo-ctx-field.is-platform .jo-ctx-field-ic {
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-ctx-display {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.jo-ctx-display:focus-visible {
    outline: none;
}

.jo-ctx-busy {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.jo-ctx-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ds-text-primary, #18181B);
    font-size: 13px;
    box-shadow: none !important;
}

.jo-ctx-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ds-surface-sunken, #F1F2F5);
    color: var(--ds-text-tertiary, #5B5B6B);
    cursor: pointer;
}

.jo-ctx-clear:hover {
    color: var(--ds-text-primary, #18181B);
}

.jo-ctx-clear svg {
    width: 11px;
    height: 11px;
}

/* ── Pannello ────────────────────────────────────────────────────────── */
.jo-ctx-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: max(100%, 360px);
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-card, 12px);
    background: var(--ds-surface, #FAFAFB);
    box-shadow: var(--ds-shadow-raised, 0 8px 24px rgb(22 22 42 / 12%));
}

.jo-ctx-section {
    padding: 10px 9px 4px;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.jo-ctx-section:first-child {
    padding-top: 4px;
}

.jo-ctx-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.jo-ctx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--ds-radius-control, 8px);
    background: none;
    color: var(--ds-text-secondary, #3F3F46);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.jo-ctx-row:hover,
.jo-ctx-row:focus-visible {
    background: var(--ds-row-hover, #F6F2FD);
    outline: none;
}

.jo-ctx-row.is-current {
    background: var(--ds-accent-soft, #F3EEFC);
}

.jo-ctx-row.is-current .jo-ctx-row-name {
    color: var(--ds-accent-fg, #5F45A8);
}

.jo-ctx-row-ic {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent, #7C5CCB);
}

.jo-ctx-row-ic.is-hotel {
    background: var(--ds-surface-sunken, #F1F2F5);
    color: var(--ds-text-tertiary, #5B5B6B);
}

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

.jo-ctx-row-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-ctx-row-name {
    color: var(--ds-text-primary, #18181B);
    font-weight: 500;
}

.jo-ctx-row-meta {
    margin-left: 4px;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 12px;
}

.jo-ctx-check {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--ds-accent, #7C5CCB);
}

.jo-ctx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 13px;
}

/* ── Accanto al campo: esci ─────────────────────────── */
.jo-ctx-exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 36px;
    border: 0;
    border-radius: var(--ds-radius-control, 8px);
    background: none;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jo-ctx-exit {
    justify-content: center;
    width: 36px;
}

.jo-ctx-exit:hover {
    background: var(--ds-row-hover, #F6F2FD);
    color: var(--ds-text-primary, #18181B);
}

/* 20px come le altre icone della topbar (owner 12-ott-2026: a 16px era troppo piccola). */
.jo-ctx-exit svg {
    width: 20px;
    height: 20px;
}

.jo-ctx-exit:disabled {
    opacity: .6;
    cursor: wait;
}

/* Schermi medi: il campo si stringe prima di spingere fuori il resto. */
@media (max-width: 1100px) {
    .jo-ctx-pick {
        flex-basis: 240px;
    }
}

/* Telefono: la ricerca globale diventa una lente (global-search.css),
 * il contesto prende lo spazio. */
@media (max-width: 639px) {
    .fi-topbar .jo-ctx {
        flex: 1 1 auto;
        margin-inline-start: 0;
    }

    .jo-ctx-pick {
        flex: 1 1 auto;
        width: auto;
    }

    .fi-topbar .jo-ctx + .fi-global-search {
        margin-inline-start: 0;
    }
}

/* ── Barra di contesto dei gruppi (in testa alla pagina) ─────────────────
 * resources/views/filament/layouts/group-context-bar.blade.php: chi sei +
 * 2-3 etichette brevi (vedi / modifichi / dal gruppo). Niente paragrafi. */
.jo-ctxbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 20px; /* PAGE_START sta fuori dalla sezione col passo verticale */
    padding: 8px 10px;
    border: 1px solid var(--ds-auto-bd, #DED2F5);
    border-radius: var(--ds-radius-card, 12px);
    background: var(--ds-card-head-bg, #F5F1FC);
    color: var(--ds-text-secondary, #3F3F46);
    font-size: 13px;
}

/* Scheda di una struttura: la barra resta in vista scorrendo, subito
 * sotto la topbar (si vede sempre quale struttura si sta modificando). */
.jo-ctxbar.is-sticky {
    position: sticky;
    /* Sotto la topbar reale (anche su più righe, topbar-two-rows.js). */
    top: calc(var(--jo-topbar-h, 4rem) + 8px);
    z-index: 15;
    box-shadow: var(--ds-shadow-rest, 0 1px 2px rgba(20, 22, 40, .06));
}

/* La fessura fra topbar e barra prende il fondo della pagina: il contenuto
 * che scorre non spunta sopra la barra. */
.jo-ctxbar.is-sticky::before {
    content: "";
    position: absolute;
    top: -9px;
    right: -2px;
    left: -2px;
    height: 8px;
    background: var(--ds-bg-app, #E3E6EB);
}

.jo-ctxbar-who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 6px;
    min-width: 0;
}

.jo-ctxbar-who strong {
    color: var(--ds-text-primary, #18181B);
    font-weight: 600;
}

.jo-ctxbar-who span {
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-ctxbar-ic {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--ds-accent, #7C5CCB);
}

.jo-ctxbar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.jo-ctxbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 10px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-pill, 999px);
    background: var(--ds-surface, #FAFAFB);
    font-size: 12.5px;
}

.jo-ctxbar-chip b {
    color: var(--ds-text-primary, #18181B);
    font-weight: 600;
}

.jo-ctxbar-chip svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.jo-ctxbar-chip.is-see svg {
    color: var(--ds-accent, #7C5CCB);
}

.jo-ctxbar-chip.is-edit svg {
    color: var(--ds-lime-strong, #8FA62A);
}

.jo-ctxbar-chip.is-lock svg {
    color: var(--ds-text-tertiary, #5B5B6B);
}

/* ── "Struttura: Tutte ▾" (filtro locale delle pagine di un gruppo) ─────
 * resources/views/filament/layouts/local-structure-filter.blade.php:
 * controllo della testata, 36px come i controlli della barra. */
.jo-lsf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 4px 0 10px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-surface, #FAFAFB);
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 13px;
}

.jo-lsf:hover {
    border-color: var(--ds-field-border, #C5CBD5);
}

.jo-lsf.is-active {
    border-color: var(--ds-auto-bd, #DED2F5);
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent-fg, #5F45A8);
}

.jo-lsf-ic {
    width: 14px;
    height: 14px;
}

.jo-lsf select {
    height: 32px;
    padding: 0 26px 0 2px;
    border: 0;
    background-color: transparent;
    color: var(--ds-text-primary, #18181B);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
}

.jo-lsf select:focus {
    outline: none;
    box-shadow: none;
}

/* ── Omnibox (owner 1-ott-2026): una sola barra al centro ───────────────
 * Contesti, record e funzioni in un campo (hotel-context-chip.blade.php).
 * Più larga del vecchio selettore: è la ricerca di tutta la piattaforma. */
.fi-topbar .jo-omni {
    margin-inline: auto;
}

.jo-omni .jo-ctx-pick {
    flex: 0 1 480px;
    width: 480px;
}

.jo-omni .jo-ctx-placeholder {
    color: var(--ds-text-placeholder, #6B6B7B);
}

/* Il contesto corrente, discreto, dentro la barra. */
.jo-omni-ctx {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ds-accent-soft, #F3EEFC);
    color: var(--ds-accent-fg, #5F45A8);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.jo-ctx-field.is-platform .jo-omni-ctx {
    background: var(--ds-surface-sunken, #EDEFF3);
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-omni-kbd,
.jo-omni-foot kbd {
    flex: 0 0 auto;
    padding: 1px 5px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: 5px;
    background: var(--ds-surface, #FAFAFB);
    color: var(--ds-text-tertiary, #5B5B6B);
    font: 500 11px/1.4 inherit;
}

.jo-omni-panel {
    left: 50%;
    width: 520px;
    transform: translateX(-50%);
}

.jo-omni-panel .jo-ctx-list {
    max-height: min(340px, 55vh);
}

/* Omnibox leggera: righe basse, icone piccole. */
.jo-omni-panel .jo-ctx-row {
    padding: 5px 9px;
    gap: 9px;
}

.jo-omni-panel .jo-ctx-row-ic {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.jo-omni-panel .jo-ctx-row-ic svg {
    width: 13px;
    height: 13px;
}

.jo-omni-panel .jo-ctx-section {
    padding: 8px 9px 2px;
}

/* Tab opzionali: Tutto | Hotel e gruppi | JOORNA. */
.jo-omni-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC));
}

.jo-omni-tabs button {
    padding: 6px 10px 7px;
    border-bottom: 2px solid transparent;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 12.5px;
    font-weight: 500;
}

.jo-omni-tabs button:hover {
    color: var(--ds-text-primary, #18181B);
}

.jo-omni-tabs button.is-on {
    border-bottom-color: var(--ds-accent, #7C5CCB);
    color: var(--ds-accent-fg, #5F45A8);
}

/* Contesto attuale nello stato iniziale, con l'uscita. */

.jo-omni-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 7px 12px;
    border-top: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC));
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11.5px;
}

.jo-omni-foot kbd {
    margin-right: 3px;
}

@media (max-width: 900px) {
    .jo-omni .jo-ctx-pick {
        width: auto;
        flex: 1 1 auto;
    }

    .jo-omni-kbd,
    .jo-omni-ctx {
        display: none;
    }

    .jo-omni-panel {
        min-width: 0;
        width: calc(100vw - 2rem);
    }
}

/* Barra vuota: le due strade affiancate (Tutto) o da sole (nel loro tab). */
.jo-omni-start.is-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jo-omni-start.is-split .jo-omni-col + .jo-omni-col {
    border-left: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC));
}

.jo-omni-col {
    min-width: 0;
    padding: 2px 4px 6px;
}

.jo-omni-hint {
    margin: 8px 9px 2px;
    color: var(--ds-text-tertiary, #5B5B6B);
    font-size: 11.5px;
}

@media (max-width: 900px) {
    .jo-omni-panel {
        left: 0;
        transform: none;
    }

    .jo-omni-start.is-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .jo-omni-start.is-split .jo-omni-col + .jo-omni-col {
        border-left: 0;
        border-top: 1px solid var(--ds-row-divider, var(--ds-border, #E4E6EC));
    }
}

/* "Per un solo hotel: Amministrazione › Hotel del gruppo": porta lì. */
a.jo-ctxbar-chip.is-link {
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

a.jo-ctxbar-chip.is-link:hover {
    border-color: var(--ds-accent, #7C5CCB);
    background: var(--ds-accent-soft, #F3EEFC);
}

a.jo-ctxbar-chip.is-link b {
    color: var(--ds-text-link, #5F45A8);
}

.jo-ctxbar-go {
    margin-left: 4px;
    color: var(--ds-text-link, #5F45A8);
    font-weight: 500;
    white-space: nowrap;
}

/* Ricerche recenti dell'omnibox: cestino per riga (al passaggio o col
 * focus; su touch sempre) e "Cancella tutte" accanto al titolo. */
.jo-omni-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jo-omni-clear {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-text-link, #5F45A8);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.jo-omni-clear:hover {
    text-decoration: underline;
}

.jo-omni-recent {
    position: relative;
}

.jo-omni-recent > .jo-ctx-row {
    padding-right: 40px;
}

.jo-omni-forget {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-control, 8px);
    background: transparent;
    color: var(--ds-text-tertiary, #5B5B6B);
    opacity: 0;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity .12s, background-color .12s, color .12s;
}

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

.jo-omni-recent:hover .jo-omni-forget,
.jo-omni-recent:focus-within .jo-omni-forget {
    opacity: 1;
}

.jo-omni-forget:hover {
    background: var(--ds-err-bg, #FDECEC);
    color: var(--ds-err-fg, #A11A1A);
}

.jo-omni-forget:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

@media (hover: none) {
    .jo-omni-forget {
        opacity: 1;
    }
}

/* Cliente disattivato (hotels.is_active = 0, 25-set-2026): si vede e ci si
   entra, ma spento. Usato dal chip e dalla pagina "Seleziona un hotel".
   Grigio ancora leggibile (contrasto ≥ 4.5:1): il significato lo porta
   l'etichetta, non lo sbiadimento. */
.jo-picker-inactive {
    color: rgb(107 114 128);            /* gray-500 */
}

.dark .jo-picker-inactive {
    color: rgb(156 163 175);            /* gray-400 */
}

.jo-picker-inactive-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background-color: rgb(243 244 246); /* gray-100 */
    color: rgb(75 85 99);               /* gray-600 */
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
    white-space: nowrap;
}

.dark .jo-picker-inactive-badge {
    background-color: rgb(55 65 81);    /* gray-700 */
    color: rgb(229 231 235);            /* gray-200 */
}

/* Barra di contesto dei gruppi più chiara e visibile (owner 2-ott-2026):
   filetto viola a sinistra, tessera con l'icona, "Stai lavorando nel
   gruppo" sopra il nome in evidenza, separatore, etichette leggibili. */
.jo-ctxbar {
    position: relative;
    gap: 10px 16px;
    padding: 10px 14px 10px 16px;
    border-color: var(--ds-step-current-bd, #DCD1F4);
    background: var(--ds-accent-soft, #F3EEFC);
    box-shadow: inset 3px 0 0 var(--ds-accent, #7C5CCB);
}
.jo-ctxbar-who {
    gap: 10px;
    margin-right: 0;
    padding-right: 16px;
    border-right: 1px solid var(--ds-step-current-bd, #DCD1F4);
}
.jo-ctxbar-tile {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ds-surface, #FCFCFD);
    box-shadow: 0 0 0 1px var(--ds-step-current-bd, #DCD1F4);
}
.jo-ctxbar-tile .jo-ctxbar-ic { width: 18px; height: 18px; }
.jo-ctxbar-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.jo-ctxbar-eyebrow { color: var(--ds-accent-fg, #5F45A8); font-size: 11.5px; font-weight: 500; }
.jo-ctxbar-who .jo-ctxbar-name strong { overflow: hidden; color: var(--ds-text-primary, #18181B); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.jo-ctxbar-chip { min-height: 30px; padding: 3px 12px; border-color: var(--ds-step-current-bd, #DCD1F4); font-size: 13px; }
@media (max-width: 640px) {
    .jo-ctxbar-who { padding-right: 0; border-right: 0; }
}
.jo-ctxbar.is-sticky { box-shadow: inset 3px 0 0 var(--ds-accent, #7C5CCB), var(--ds-shadow-rest, 0 1px 2px rgba(20, 22, 40, .06)); }

/* Nessun hotel o gruppo per "x" → Cerca "x" in JOORNA (owner 2-ott-2026):
   una riga di stato e una proposta evidente, in poco spazio. */
.jo-ctx-miss {
    display: grid;
    gap: 6px;
    padding: 8px 4px 4px;
}
.jo-ctx-miss-t {
    padding: 0 6px;
    font-size: 12px;
    color: var(--ds-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jo-ctx-row.jo-ctx-miss-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--ds-accent-soft-2, var(--ds-border));
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-accent-soft);
    color: var(--ds-accent-fg, var(--ds-accent));
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.jo-ctx-row.jo-ctx-miss-cta:hover,
.jo-ctx-row.jo-ctx-miss-cta:focus,
.jo-ctx-row.jo-ctx-miss-cta:focus-visible {
    background: var(--ds-accent-soft);
    border-color: var(--ds-accent);
    outline: none;
}
.jo-ctx-miss-cta > svg { flex: none; width: 16px; height: 16px; }
.jo-ctx-miss-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jo-ctx-miss-txt b { font-weight: 600; }
.jo-ctx-miss-go { opacity: .7; }

/* Telefono (owner 7-ott-2026): la ricerca in topbar a riposo è una LENTE;
   toccata si apre a tutta larghezza sopra la topbar. Così la topbar resta
   su una riga (menu · lente · esci dal contesto · notifiche · avatar). */
@media (max-width: 639px) {
    /* Lente a destra, accanto alle notifiche (owner 7-ott-2026);
       "esci dal contesto" prima della lente. */
    .fi-topbar .jo-ctx {
        flex: 0 0 auto;
        margin-inline: auto 0 !important;
    }

    .fi-topbar .jo-ctx .jo-ctx-exit {
        order: -1;
    }

    .fi-topbar .jo-ctx-pick:not(:has(.jo-ctx-field.is-open)) {
        flex: 0 0 auto;
        width: 36px;
        min-width: 0;
    }

    .fi-topbar .jo-ctx-field:not(.is-open) {
        width: 36px;
        min-width: 0;
        height: 36px;
        padding: 0;
        justify-content: center;
        cursor: pointer;
    }

    .fi-topbar .jo-ctx-field:not(.is-open) > :not(.jo-ctx-field-ic) {
        display: none !important;
    }

    .fi-topbar .jo-ctx-field:not(.is-open) .jo-ctx-field-ic {
        margin: 0;
    }

    .fi-topbar .jo-ctx-pick:has(.jo-ctx-field.is-open) {
        position: fixed;
        top: 10px;
        left: 12px;
        right: 12px;
        z-index: 60;
        width: auto;
    }
}

/* "Seleziona un hotel" aperta da una pagina dell'hotel (owner 8-ott-2026):
   in testa alla card perché si è qui e cosa fare, in fondo l'uscita. */
.jo-selhotel-why {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--ds-accent-soft-2, #EAE1FA);
    border-radius: 10px;
    background: var(--ds-accent-soft, #F3EEFC);
}

.jo-selhotel-why-ic svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ds-accent, #7C5CCB);
}

.jo-selhotel-why-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text-primary, #18181B);
}

.jo-selhotel-why-text {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-selhotel-exit {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ds-border, #DFE2EA);
    font-size: 0.8125rem;
    text-align: center;
    color: var(--ds-text-tertiary, #5B5B6B);
}

.jo-selhotel-exit a {
    font-weight: 500;
    color: var(--ds-accent, #7C5CCB);
}

.jo-selhotel-exit a:hover {
    text-decoration: underline;
}