/* Tab verticali "a sidebar" per la Scheda hotel (componente Tabs Filament con
   classe .jo-vtabs — redesign 17-lug, docs/07_ui_admin/menu_scheda_hotel_redesign.md).
   Il markup resta quello standard di Filament (nav + tabpanel): qui cambia solo
   il layout, quindi persistTabInQueryString, badge e visibilità funzionano invariati. */

.jo-vtabs {
    flex-direction: row !important;
    align-items: flex-start;
    position: relative;
}

.jo-vtabs > nav.fi-tabs {
    flex-direction: column;
    align-items: stretch;
    row-gap: 2px;
    width: 260px;
    flex: 0 0 260px;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-x: visible;
    overflow-y: auto;
    border-bottom: 0 !important;
    border-right: 1px solid rgb(0 0 0 / 0.08);
    padding: 0.75rem 0.5rem;
}

.dark .jo-vtabs > nav.fi-tabs {
    border-right-color: rgb(255 255 255 / 0.12);
}

.jo-vtabs > nav.fi-tabs .fi-tabs-item {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.jo-vtabs > .fi-fo-tabs-tab {
    flex: 1 1 auto;
    min-width: 0;
}

/* Barra azioni "Salva scheda hotel"/"Annulla" sempre agganciata al fondo del
   viewport nella scheda hotel (admin, EditHotel): la scheda è lunga e senza
   questo i bottoni si raggiungevano solo scrollando in fondo. Sticky CSS puro
   e non il flag nativo $formActionsAreSticky, la cui euristica JS su scrollY
   non si attivava al primo load e rendeva la barra flottante e stretta.
   Scope: solo la pagina di modifica della resource Hotel (slug "hotels"). */
.fi-resource-edit-record-page.fi-resource-hotels .fi-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    /* Banda larga ESATTAMENTE come le card delle sezioni (Dati fiscali,
       Indirizzo...): il tabpanel parte a 260px (colonna tab, vedi .jo-vtabs >
       nav) e ha p-6 (1.5rem) su ogni lato, quindi le card sono a 260px+1.5rem
       da sinistra e rientrate 1.5rem da destra. La banda usa gli stessi bordi. */
    /* margin-top 0: la banda tocca il contenuto sopra, senza vuoto scuro. */
    margin: 0 1.5rem -1rem calc(260px + 1.5rem);
    padding: 1rem 1.5rem;
    background: rgb(255 255 255);
    border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: 0.75rem; /* come le card delle sezioni (rounded-xl) */
    box-shadow: 0 -4px 12px rgb(0 0 0 / 0.05);
}

.dark .fi-resource-edit-record-page.fi-resource-hotels .fi-form-actions {
    background: rgb(17 24 39); /* gray-900, come i pannelli scuri Filament */
    border-color: rgb(255 255 255 / 0.1);
    box-shadow: 0 -4px 12px rgb(0 0 0 / 0.3);
}

/* Il grid contenuti di pagina (page/index.blade.php: grid flex-1 auto-cols-fr
   gap-y-8) distanzia di 2rem i blocchi, spingendo in basso la barra azioni.
   Sulla scheda hotel lo riduciamo a gap-y-1 (0.25rem). Il flex-1 distingue
   questo grid dai wrapper dei campi (grid auto-cols-fr SENZA flex-1). */
.fi-resource-edit-record-page.fi-resource-hotels .grid.flex-1.auto-cols-fr {
    row-gap: 0.25rem;
}

/* Su schermi stretti si torna ai tab orizzontali standard. */
@media (max-width: 900px) {
    .jo-vtabs {
        flex-direction: column !important;
    }

    .jo-vtabs > nav.fi-tabs {
        position: static;
        width: 100%;
        flex: initial;
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid rgb(0 0 0 / 0.08) !important;
    }

    .dark .jo-vtabs > nav.fi-tabs {
        border-bottom-color: rgb(255 255 255 / 0.12) !important;
    }

    .jo-vtabs > nav.fi-tabs .fi-tabs-item {
        width: auto;
    }

    /* Tab in orizzontale: niente colonna a sinistra. Le card restano
       rientrate 1.5rem (p-6 del tabpanel): la banda le segue su entrambi i lati. */
    .fi-resource-edit-record-page.fi-resource-hotels .fi-form-actions {
        margin-left: 1.5rem;
    }
}