/* ─── Sidebar: fondo teal oscuro ─── */
.fi-sidebar {
    background: linear-gradient(180deg, #0d3d3a 0%, #0c2d4a 100%) !important;
}

/* Header del sidebar (logo + nombre) */
.fi-sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.fi-sidebar-header a,
.fi-sidebar-header span,
.fi-logo {
    color: #fff !important;
}

/* Items de navegación — texto e iconos blancos */
.fi-sidebar-item-button,
.fi-sidebar-item-button span,
.fi-sidebar-item-button svg,
.fi-sidebar-item-label,
.fi-sidebar-item-icon {
    color: rgba(255,255,255,0.82) !important;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:hover span,
.fi-sidebar-item-button:hover svg {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Item activo — Filament añade bg-gray-100; texto oscuro teal para contrastar */
.fi-sidebar-item-button.bg-gray-100 {
    background: rgba(255,255,255,0.90) !important;
}
.fi-sidebar-item-button.bg-gray-100,
.fi-sidebar-item-button.bg-gray-100 span,
.fi-sidebar-item-button.bg-gray-100 svg {
    color: #0d4a46 !important;
}

/* Insignia de notificación (ej. pedidos pendientes) del menú lateral — la regla de
   arriba fuerza el color de TODOS los <span> del item activo (incluida la insignia),
   dejándola con texto oscuro sobre su propio fondo ámbar claro, casi ilegible. Se fija
   un estilo sólido y de alto contraste, igual en reposo/hover/activo. El selector con
   ".bg-gray-100" es necesario para ganarle en especificidad a la regla de arriba. */
.fi-sidebar-item-button .fi-badge,
.fi-sidebar-item-button.bg-gray-100 .fi-badge {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Etiquetas de grupo */
.fi-sidebar-group-label {
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Botón collapse del grupo */
.fi-sidebar-group-collapse-btn {
    color: rgba(255,255,255,0.35) !important;
}
.fi-sidebar-group-collapse-btn:hover {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
}

/* Separador entre grupos */
.fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

/* ─── Scrollbar delgado y teal ─── */
.fi-sidebar-nav::-webkit-scrollbar,
.fi-main::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.fi-sidebar-nav::-webkit-scrollbar-track,
.fi-main::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: transparent;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.35);
    border-radius: 4px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.65);
}

/* Firefox */
.fi-sidebar-nav,
.fi-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.35) transparent;
}