/* Clases específicas de Filament para titulos globales */
html:not(.dark) .text-gray-950 {
    color: #505257 !important;
}

/* Mejoras de tabla */
html:not(.dark) .fi-ta-table th {
    background-color: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

html:not(.dark) .fi-ta-table tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease-in-out !important;
}

html:not(.dark) .fi-ta-table tr:hover {
    background-color: rgba(241, 245, 249, 0.7) !important;
}

/* Agregar bordes verticales a las tablas */
html:not(.dark) .fi-ta-table td,
html:not(.dark) .fi-ta-table th {
    border-right: 1px solid #e2e8f0 !important;
}

html:not(.dark) .fi-ta-table td:last-child,
html:not(.dark) .fi-ta-table th:last-child {
    border-right: none !important;
}

/* Versión para modo oscuro */
html.dark .fi-ta-table td,
html.dark .fi-ta-table th {
    border-right: 1px solid rgba(55, 65, 81, 0.5) !important;
}

html.dark .fi-ta-table td:last-child,
html.dark .fi-ta-table th:last-child {
    border-right: none !important;
}

/* ===================================
   TABS MEJORADOS - Tab Activo Destacado
   Selector correcto: .fi-tabs-item.fi-active
   =================================== */

/* Tab ACTIVO - Borde azul grueso y fondo destacado */
.fi-tabs-item.fi-active {
    background-color: #eff6ff !important;
    font-weight: 700 !important;
    border-bottom: 4px solid #0284c7!important;
}

/* Tab PAPELERA - No clicable, solo indicador */
.fi-tabs-item.pointer-events-none {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
    user-select: none !important;
}

/* Asegurar que el separador tampoco sea clicable */
.fi-tabs-item.pointer-events-none.opacity-50 {
    opacity: 0.3 !important;
}

/* ===================================
   BOTÓN "APLICAR FILTRO" - ESTILO AZUL
   Fondo azul para destacar
   =================================== */

/* Botón aplicar filtro - fondo azul */
.fi-ta-filters .fi-btn.fi-color-primary {
    --bg: #0284c7 !important;
    --hover-bg: #0668aa !important;
    --text: #ffffff !important;
    --hover-text: #ffffff !important;
    --border-bottom: 4px solid #82c7ff !important;

}

/* Modo oscuro */
html.dark .fi-ta-filters .fi-btn.fi-color-primary,
html:where(.dark) .fi-ta-filters .fi-btn.fi-color-primary {
   --bg: #0284c7 !important;
    --hover-bg: #0668aa !important;
    --text: #ffffff !important;
    --hover-text: #ffffff !important;
}

/* ===================================
   BOTÓN "CREAR" - ESTILO AZUL
   Fondo azul para el botón crear
   =================================== */

.fi-bg-color-400 {
    --bg: #0284c7 !important;
    --hover-bg: #0668aa !important;
    --text: #ffffff !important;
    --hover-text: #ffffff !important;
}

/* Modo oscuro */
html.dark .fi-bg-color-400,
html:where(.dark) .fi-bg-color-400 {
    --dark-bg: #0284c7 !important;
    --dark-hover-bg: #0668aa !important;
    --dark-text: #ffffff !important;
    --dark-hover-text: #ffffff !important;
}

/* ===========================================
   User Sessions Page - Filter Buttons
   Extracted from: resources/views/filament/pages/user-sessions.blade.php
   =========================================== */

.fi-ta div[class*="flex"][class*="gap-3"] {
    justify-content: center !important;
    width: 100% !important;
}

header.fi-header, [data-slot="header"] {
    justify-content: space-between !important;
}