/* Custom Sidebar Style for a Premium Look */

/* Sidebar background - sleek dark slate */
.fi-sidebar {
    background-color: #0f172a !important; /* slate-900 */
    border-right: 1px solid #1e293b !important; /* slate-800 */
}

/* Custom Scrollbar for Sidebar */
.fi-sidebar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.fi-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}
.fi-sidebar::-webkit-scrollbar-thumb {
    background: #1e293b !important; /* slate-800 */
    border-radius: 3px !important;
}
.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: #334155 !important; /* slate-700 */
}

/* Sidebar brand/header logo area background and border */
.fi-sidebar-header {
    background-color: #0f172a !important; /* slate-900 */
    border-bottom: 1px solid #1e293b !important; /* slate-800 */
}

/* Make sure any nested div in header has dark background and white text */
.fi-sidebar-header, 
.fi-sidebar-header *,
.fi-sidebar-brand,
.fi-sidebar-brand * {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Sidebar group headers (like "Centro de SMS") */
.fi-sidebar-group-label {
    color: #94a3b8 !important; /* slate-400 */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    background-color: transparent !important;
}

/* Inactive sidebar items - text color */
.fi-sidebar-item a span,
.fi-sidebar-item button span,
.fi-sidebar-item span {
    color: #cbd5e1 !important; /* slate-300 */
    font-weight: 500 !important;
    background-color: transparent !important;
}

/* Inactive sidebar items - icons */
.fi-sidebar-item a svg,
.fi-sidebar-item button svg {
    color: #94a3b8 !important; /* slate-400 */
    background-color: transparent !important;
}

/* Sidebar item hover state */
.fi-sidebar-item > a:hover,
.fi-sidebar-item > button:hover {
    background-color: #1e293b !important; /* slate-800 */
}

.fi-sidebar-item > a:hover span,
.fi-sidebar-item > button:hover span {
    color: #ffffff !important;
}

.fi-sidebar-item > a:hover svg,
.fi-sidebar-item > button:hover svg {
    color: #ffffff !important;
}

/* Active sidebar item (In Filament v3, the active class is .fi-active on the li) */
.fi-sidebar-item.fi-active,
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active > button {
    background-color: #4f46e5 !important; /* Indigo 600 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Active sidebar item - text and icons */
.fi-sidebar-item.fi-active a span,
.fi-sidebar-item.fi-active button span,
.fi-sidebar-item.fi-active span {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: transparent !important;
}

.fi-sidebar-item.fi-active a svg,
.fi-sidebar-item.fi-active button svg {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Collapsible sidebar chevron style */
.fi-sidebar-group button svg {
    color: #cbd5e1 !important;
}


/* --- Topbar Styling --- */

/* Topbar background - matching the sidebar */
.fi-topbar,
.fi-topbar-header,
header.fi-topbar {
    background-color: #0f172a !important; /* slate-900 */
    border-bottom: 1px solid #1e293b !important; /* slate-800 */
}

/* Brand logo / title inside topbar (desktop layout) */
.fi-logo,
.fi-logo *,
.fi-topbar-brand,
.fi-topbar-header-title,
.fi-topbar-header-title * {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

/* Prepend a envelope icon to the logo text */
.fi-logo::before {
    content: "✉️ " !important;
    margin-right: 4px !important;
    font-size: 1.2rem !important;
}

/* Icons/buttons inside topbar (like notification icons or user menu) */
.fi-topbar button svg,
.fi-topbar-menu-button svg,
.fi-topbar-open-sidebar-button svg {
    color: #cbd5e1 !important; /* slate-300 */
}

.fi-topbar button:hover svg,
.fi-topbar-menu-button:hover svg,
.fi-topbar-open-sidebar-button:hover svg {
    color: #ffffff !important;
}


/* --- Content Cards and Tables Styling --- */

/* Rounded, soft design for section cards and table containers */
.fi-ta-ctn,
.fi-section,
.fi-card {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important; /* slate-200 */
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -2px rgba(15, 23, 42, 0.02) !important;
    transition: box-shadow 0.3s ease !important;
}

/* Slight lift on cards when hovering */
.fi-ta-ctn:hover,
.fi-section:hover,
.fi-card:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.04), 0 4px 6px -4px rgba(15, 23, 42, 0.04) !important;
}

/* Smooth margins and padding adjustments */
.fi-ta-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/* Style Filament buttons globally for modern rounded styling */
.fi-btn {
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
}

.fi-btn:hover {
    transform: translateY(-1.5px);
}