/*
 * Lime Pro — Filament responsive sidebar V2
 * iPad, iPhone, Safari e viewport dinamico.
 */

:root {
    --lime-topbar-height: 4rem;
    --lime-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * Filament posiziona la sidebar sotto la barra superiore.
 * Bisogna quindi sottrarre i 4rem della topbar.
 */
.fi-sidebar {
    height: calc(100vh - var(--lime-topbar-height)) !important;
    height: calc(100dvh - var(--lime-topbar-height)) !important;
    max-height: calc(100vh - var(--lime-topbar-height)) !important;
    max-height: calc(100dvh - var(--lime-topbar-height)) !important;
    overflow: hidden !important;
}

/* Area realmente scorrevole del menu. */
.fi-sidebar-nav {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: calc(2rem + var(--lime-safe-bottom)) !important;
    scroll-padding-top: 1rem;
    scroll-padding-bottom: calc(2rem + var(--lime-safe-bottom));
}

/* L'ultima voce deve rimanere completamente visibile. */
.fi-sidebar-nav > :last-child {
    margin-bottom: calc(1.5rem + var(--lime-safe-bottom)) !important;
}

/* Dispositivi touch e iPad. */
@media (hover: none), (pointer: coarse), (max-width: 1280px) {
    .fi-sidebar-nav {
        padding-bottom: calc(3rem + var(--lime-safe-bottom)) !important;
        scroll-padding-bottom: calc(3rem + var(--lime-safe-bottom));
    }

    .fi-sidebar-nav > :last-child {
        margin-bottom: calc(2rem + var(--lime-safe-bottom)) !important;
    }
}

/* Modalità standalone/PWA con area di sicurezza inferiore. */
@media (display-mode: standalone) {
    .fi-sidebar {
        height: calc(
            100dvh - var(--lime-topbar-height) - var(--lime-safe-bottom)
        ) !important;

        max-height: calc(
            100dvh - var(--lime-topbar-height) - var(--lime-safe-bottom)
        ) !important;
    }
}

/*
 * Lime Pro — Select visibility fix
 * Correzione opzioni invisibili nei modali Filament su PC.
 */

/* Contenitore delle opzioni. */
.fi-modal [role="listbox"],
.fi-modal .choices__list--dropdown,
.fi-modal .choices__list[aria-expanded] {
    background-color: #ffffff !important;
    color: #111827 !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Testo di ogni opzione. */
.fi-modal [role="listbox"] [role="option"],
.fi-modal .choices__list--dropdown .choices__item,
.fi-modal .choices__list[aria-expanded] .choices__item,
.fi-modal .choices__item--choice {
    color: #111827 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent;
}

/* Stato evidenziato e passaggio del mouse. */
.fi-modal [role="listbox"] [role="option"]:hover,
.fi-modal [role="listbox"] [role="option"][aria-selected="true"],
.fi-modal .choices__item--choice.is-highlighted {
    color: #0f172a !important;
    background-color: #e0f7ff !important;
    opacity: 1 !important;
}

/* Campo di ricerca interno al menu. */
.fi-modal [role="listbox"] input,
.fi-modal .choices__input {
    color: #111827 !important;
    background-color: #ffffff !important;
    caret-color: #111827 !important;
    opacity: 1 !important;
}

.fi-modal [role="listbox"] input::placeholder,
.fi-modal .choices__input::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Tema scuro. */
.dark .fi-modal [role="listbox"],
.dark .fi-modal .choices__list--dropdown,
.dark .fi-modal .choices__list[aria-expanded] {
    color: #f9fafb !important;
    background-color: #111827 !important;
}

.dark .fi-modal [role="listbox"] [role="option"],
.dark .fi-modal .choices__list--dropdown .choices__item,
.dark .fi-modal .choices__list[aria-expanded] .choices__item,
.dark .fi-modal .choices__item--choice {
    color: #f9fafb !important;
}

.dark .fi-modal [role="listbox"] [role="option"]:hover,
.dark .fi-modal [role="listbox"] [role="option"][aria-selected="true"],
.dark .fi-modal .choices__item--choice.is-highlighted {
    color: #ffffff !important;
    background-color: #1f3b4d !important;
}

.dark .fi-modal [role="listbox"] input,
.dark .fi-modal .choices__input {
    color: #f9fafb !important;
    background-color: #111827 !important;
    caret-color: #f9fafb !important;
}