/* 🌟 DMK Telecoms Premium Filament Custom Branding & UX Styles */

/* 1. Thin Custom Purple Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(92, 45, 145, 0.4);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7C3AED;
}

/* 2. Glassmorphism Dashboard Cards & Micro-Hover Scaling */
.fi-wi-stats-overview-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px 0 rgba(92, 45, 145, 0.03) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
    border-radius: 12px !important;
}

.dark .fi-wi-stats-overview-card {
    background: rgba(18, 18, 20, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.fi-wi-stats-overview-card:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 16px 48px 0 rgba(92, 45, 145, 0.1) !important;
}

/* 3. Modern Border Separation for Sidebar */
.fi-sidebar {
    border-right: 1px solid rgba(92, 45, 145, 0.08) !important;
}
.dark .fi-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. Elegant Interactive Element Hover Transitions */
.fi-btn {
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}
.fi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 45, 145, 0.15) !important;
}