/*
 * Sidebar Filament (entrambi i pannelli), standard permanente — misure qui,
 * colori in design-system.css (sezione Sidebar):
 * ------------------------------------------------------------------
 * Leggera e a fisarmonica (public/js/sidebar-groups.js): si vedono le
 * macroaree, aperta solo quella in cui si lavora.
 * VOCE SINGOLA (Panoramica, Analytics) → icona 18px + label 13.5px, 38px.
 * MACROAREA → stessa riga delle voci singole: icona 18px + label 13.5px
 *             (500), chevron discreto; mai maiuscolo, mai fondo pieno.
 * SOTTO-VOCE → solo testo 13px, rientrata sotto la label della macroarea
 *             lungo una linea guida sottile, righe da 34px; attiva con
 *             fondo lilla tenue e testo viola. Niente icone né puntini
 *             (Filament toglie le icone quando il gruppo ha la sua,
 *             HotelPanelProvider::navigationGroupsIa).
 *
 * Markup Filament v3: .fi-sidebar-nav > .fi-sidebar-nav-groups >
 * .fi-sidebar-group (> .fi-sidebar-group-button, > .fi-sidebar-group-items >
 * .fi-sidebar-item > .fi-sidebar-item-button).
 */

/* In alto come il contenuto: la prima voce sta sulla riga del titolo. */
.fi-sidebar-nav {
    row-gap: 2px;
    padding: 12px 14px 28px;
}

.fi-sidebar-nav-groups {
    row-gap: 2px;
    margin-inline: 0;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    row-gap: 2px;
}

/* Voci singole in testa (Panoramica) staccate dalle macroaree; Analytics
   in fondo, staccata allo stesso modo. */
.fi-sidebar-group:not(:has(> .fi-sidebar-group-button)) {
    margin-bottom: 10px;
}

.fi-sidebar-group[data-group-label="Analytics"] {
    margin-top: 10px;
}

/* Macroarea: una riga come le voci, cliccabile per aprirla. */
.fi-sidebar-group-button {
    column-gap: 12px;
    min-height: 38px;
    padding: 9px 8px 9px 12px;
    border-radius: 10px;
}

.fi-sidebar-group-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}

.fi-sidebar-group-label {
    font-size: 13.5px;
    line-height: 20px;
    font-weight: 500;
}

.fi-sidebar-group-button .fi-icon-btn {
    width: 18px;
    height: 18px;
    margin-block: -1px;
}

.fi-sidebar-group-button .fi-icon-btn .fi-icon-btn-icon {
    width: 14px;
    height: 14px;
}

/* Sotto-voci: rientrate sotto la label, lungo una linea guida sottile. */
.fi-sidebar-group:has(> .fi-sidebar-group-button):not([data-group-label="Analytics"]) > .fi-sidebar-group-items {
    margin: 2px 0 6px 21px;
    padding-left: 10px;
    border-left: 1px solid var(--ds-row-divider, #E6E8ED);
}

.fi-sidebar-group:has(> .fi-sidebar-group-button):not([data-group-label="Analytics"]) .fi-sidebar-item-button {
    min-height: 34px;
    padding: 7px 10px;
}

.fi-sidebar-group:has(> .fi-sidebar-group-button):not([data-group-label="Analytics"]) .fi-sidebar-item-label {
    font-size: 13px;
}

.fi-sidebar-item-grouped-border {
    display: none !important;
}

/* Voce: icona + label (voci singole Panoramica e Analytics). */
.fi-sidebar-item-button {
    column-gap: 12px;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 10px;
}

.fi-sidebar-item-label {
    font-size: 13.5px;
    line-height: 20px;
}

.fi-sidebar-item-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}

/* Sidebar compressa (solo icone): voci centrate, niente rientri. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav,
    .fi-sidebar:not(.fi-sidebar-open) .jo-sidebar-foot {
        padding-inline: 10px;
    }
}

/* Assistenza fissa in fondo, fuori dalle macroaree (owner 15-ott-2026):
 * stessi margini delle voci, un filetto la separa dal menu. */
.jo-sidebar-foot {
    flex: none;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--ds-border);
}

/* Sempre in vista: tessera lilla tenue, testo e icona viola (owner 15-ott-2026:
 * "non abbastanza visibile"). Al passaggio e da pagina aperta un tono più pieno. */
html .fi-sidebar .jo-sidebar-foot .fi-sidebar-item .fi-sidebar-item-button {
    background-color: var(--ds-accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--ds-accent-soft-2);
}
html .fi-sidebar .jo-sidebar-foot .fi-sidebar-item .fi-sidebar-item-label {
    color: var(--ds-accent-fg) !important;
    font-weight: 600 !important;
}
html .fi-sidebar .jo-sidebar-foot .fi-sidebar-item .fi-sidebar-item-icon {
    color: var(--ds-accent) !important;
}
html .fi-sidebar .jo-sidebar-foot .fi-sidebar-item .fi-sidebar-item-button:hover,
html .fi-sidebar .jo-sidebar-foot .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--ds-accent-soft-2) !important;
}

/*
 * Badge di navigazione: wrap NATURALE quando il testo non c'entra (es.
 * "Richiesta attivazione" di GatedByModule, che su una riga sbordava).
 *
 * Il blade del badge Filament avvolge lo slot in <span class="grid">
 * <span class="truncate"> e truncate = nowrap + ellipsis: senza questo
 * override il testo non andava mai a capo. white-space NORMAL (non
 * pre-line: preserverebbe anche i newline di indentazione del template,
 * gonfiando il badge con righe vuote sopra e sotto). I badge a una riga
 * ("Attiva il modulo", "In attesa", contatori) usano spazi nbsp e non si
 * spezzano comunque.
 */
/* Audit ott-2026: i badge dei moduli sono di una parola ("Attiva",
 * "Richiedi", "In attesa"): sempre su una riga, il resto nel tooltip. */
.fi-sidebar-item .fi-badge,
.fi-sidebar-item .fi-badge .truncate {
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

.fi-sidebar-item .fi-badge {
    flex-shrink: 0;
}

.fi-sidebar-item .fi-badge .truncate {
    overflow: visible;
    text-overflow: clip;
}

/*
 * Sidebar compressa — il logo compatto sostituisce visivamente il chevron
 * del pulsante di espansione. Il button Filament resta intatto, quindi
 * conserva click, focus da tastiera, tooltip e aria-label nativi.
 *
 * `fi-sidebar-open` viene aggiunta da Alpine quando la sidebar è aperta;
 * limitiamo la regola al desktop perché su mobile la sidebar chiusa è fuori
 * viewport e continua a essere gestita dal topbar standard.
 */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open)
        .fi-sidebar-header
        > .fi-icon-btn:first-of-type {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--jo-radius-lg, 0.5rem);
        background-color: #f4f4f4;
        background-image: url('/logoJoorna_side.jpeg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 0 0 1px rgb(15 23 42 / 8%);
    }

    .fi-sidebar:not(.fi-sidebar-open)
        .fi-sidebar-header
        > .fi-icon-btn:first-of-type
        > svg {
        opacity: 0;
    }

    .fi-sidebar:not(.fi-sidebar-open)
        .fi-sidebar-header
        > .fi-icon-btn:first-of-type:focus-visible {
        outline: 2px solid var(--jo-primary-600, #7C5CCB);
        outline-offset: 2px;
    }
}

/*
 * Contenuto che scivola SOTTO la sidebar (23-set)
 * ------------------------------------------------------------------
 * Il layout Filament e' `flex flex-row-reverse`: il contenitore
 * principale (.fi-main-ctn, `w-screen flex-1`) deve restringersi per
 * far posto alla sidebar. Ma un flex item ha `min-width: auto`, cioe'
 * non scende sotto la larghezza naturale del suo contenuto: basta un
 * form largo, una tabella o un campo che non si comprime e il
 * contenitore resta a 100vw e finisce sotto la sidebar — testo tagliato
 * a sinistra e barra di scorrimento della sidebar sopra il contenuto
 * (visto su Gruppi hotel ▸ Modifica).
 *
 * In Filament la spinta la darebbe `.fi-main-ctn-sidebar-open`, che pero'
 * vive nel tema Tailwind compilato: qui il tema non si compila (si carica
 * app.css precompilato) e quella regola non esiste in nessun foglio —
 * infatti il selettore compare solo nel blade che la applica via Alpine.
 *
 * `min-width: 0` rimette il flex item in condizione di restringersi: e' la
 * cura standard, non tocca il markup e vale su tutte le pagine.
 */
.fi-main-ctn {
    min-width: 0;
}

/* Stessa ragione un livello piu' dentro: il <main> e il contenuto della
   pagina sono a loro volta flex item e si portano dietro il vincolo. */
.fi-main-ctn > .fi-main,
.fi-main-ctn > .fi-main > .fi-page {
    min-width: 0;
}

/* Sidebar ristretta: le tendine delle macroaree stanno nel livello della
 * sidebar (z 0 su desktop) e finivano sotto gli elementi fissi delle card
 * (es. colonna delle camere e giorni di Occupazione camere, z 1–2) e sotto
 * la barra del gruppo (z 15). La sidebar sale sopra il contenuto, sotto la
 * topbar solo dove si toccano (non si sovrappongono). */
@media (min-width: 1024px) {
    .fi-sidebar {
        z-index: 25 !important;
    }
}