/******** ASIDE ********/
.fi-sidebar {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html:not(.dark) .fi-sidebar {
    background-color: white !important;
}

.dark .fi-sidebar {
    background-color: black !important;
}

.fi-sidebar-nav-groups {
    margin-inline: calc(var(--spacing));
    row-gap: calc(var(--spacing));
}

.fi-sidebar-nav {
    row-gap: calc(var(--spacing));
    padding-inline: calc(var(--spacing));
    padding-block: calc(var(--spacing)*4);
}

.fi-icon.fi-size-lg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
}

.fi-sidebar-item-btn {
    padding: calc(var(--spacing) * 1);
}

/***** MAIN - HEADER *****/
.fi-page-header-main-ctn {
    padding-block: calc(var(--spacing) * 4);
}

/******** TABLES ********/
.fi-ta-table {
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: visible !important;
}

.fi-ta-ctn {
    overflow: visible !important;
}

.fi-ta-cell:has(> .fi-ta-actions) {
    position: sticky !important;
    right: 0 !important;
    background-color: var(--color-white, #fff) !important;
    overflow: visible !important;
}

.dark .fi-ta-cell:has(> .fi-ta-actions) {
    background-color: var(--color-gray-900, #111827) !important;
}

.fi-ta-header-cell:last-child,
.fi-ta-actions-header-cell {
    position: sticky !important;
    right: 0 !important;
    background-color: var(--color-white, #fff) !important;
}

.dark .fi-ta-header-cell:last-child,
.dark .fi-ta-actions-header-cell {
    background-color: var(--color-gray-900, #111827) !important;
}

/******** HEARTBEAT ANIMATION ********/
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/******** PAGINATION - Hide duplicate records-per-page selects ********/
/* Filament renders two <select> for "records per page": one compact and one full.
   By default, CSS hides one based on screen size. If both end up visible
   (e.g. when container queries aren't supported), keep only the styled (full) one. */
.fi-pagination-records-per-page-select.fi-compact {
    display: none !important;
}

/******** PAGINATION - Show full pagination from lg breakpoint (1024px) ********/
/* Por defecto, Filament solo muestra el resumen ("Se muestran de X a Y de Z
   resultados") y los botones numericos de pagina en `@4xl` (>896px) en pantallas
   con container queries, o `md` (768px) en navegadores sin container queries.
   Se sobreescribe para que el paginador completo se muestre desde `lg` (1024px)
   en adelante, dejando pantallas pequenas y medianas con solo prev/next. */
@media (min-width: 64rem) {
    nav.fi-pagination .fi-pagination-overview {
        display: inline !important;
    }

    nav.fi-pagination .fi-pagination-items {
        display: flex !important;
    }

    nav.fi-pagination:not(.fi-simple) .fi-pagination-previous-btn,
    nav.fi-pagination:not(.fi-simple) .fi-pagination-next-btn {
        display: none !important;
    }
}

@supports (container-type: inline-size) {
    @container (min-width: 64rem) {
        nav.fi-pagination .fi-pagination-overview {
            display: inline !important;
        }

        nav.fi-pagination .fi-pagination-items {
            display: flex !important;
        }

        nav.fi-pagination:not(.fi-simple) .fi-pagination-previous-btn,
        nav.fi-pagination:not(.fi-simple) .fi-pagination-next-btn {
            display: none !important;
        }
    }
}

/******** TABLE HEADER ACTIONS - Right align ********/
.fi-ta-header .fi-ta-actions.fi-wrapped {
    margin-left: auto;
    justify-content: flex-end !important;
}

/******** DATERANGE PICKER - Centrar dropdown en la pantalla ********/
/* El plugin posiciona el dropdown con Floating UI (left/top en px) y ya
   define su propio layout movil a <=640px con !important. Por eso el
   override se limita a >640px: alli se pisan left/top y se centra el
   dropdown respecto del viewport con translate(-50%, -50%), que es
   exacto sin importar el ancho real del contenido (el plugin usa
   max-w-max, asi que un margin negativo fijo no centra de forma fiable). */
@media (min-width: 641px) {
    .fi-daterangepicker-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center !important;
        margin: 0 !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}