/* =========================================
   NEXUS OS - COMPONENTS & UTILITIES
   ========================================= */

/* 1. Custom Scrollbar (.custom-scroll) */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    /* slate-300 */
    border-radius: 20px;
}

.dark .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #334155;
    /* slate-700 */
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
    /* slate-400 */
}

.dark .custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #475569;
    /* slate-600 */
}

/* 2. Glassmorphism Design System */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-sidebar {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3. Shadow & Elevation */
.shadow-soft {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

/* 4. ApexCharts & Plugin Overrides */
.dark .apexcharts-tooltip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #fff !important;
}

.dark .apexcharts-tooltip-title {
    background: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
}

/* SweetAlert2 Dark Mode */
body.dark .swal2-popup {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

body.dark .swal2-title {
    color: #fff !important;
}