/* ==================== 1. THANH CÔNG CỤ & THANH TIÊU ĐỀ ==================== */
/* Đổi màu thanh công cụ phía trên thành màu tối sâu kết hợp viền neon */
header {
    background-color: #0f172a !important;
    border-bottom: 2px solid #ec4899 !important;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15) !important;
}

/* Các biểu tượng (Icons) trên thanh công cụ đổi sang màu hồng neon phát sáng */
header button, header i, header a {
    color: #ec4899 !important;
    text-shadow: 0 0 8px rgba(236, 72, 153, 0.6) !important;
}

/* Hiệu ứng khi di chuột vào các nút trên thanh công cụ */
header button:hover, header a:hover {
    background-color: rgba(236, 72, 153, 0.1) !important;
    color: #f43f5e !important;
}


/* ==================== 2. HỆ THỐNG THƯ MỤC & FILE SẶC SỠ ==================== */
/* Biến biểu tượng Thư mục (Folders) thành màu xanh lục Neon (Cyber Green) */
.item[data-dir="true"] .icon i, 
i.material-icons:contains("folder") {
    color: #10b981 !important;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6)) !important;
}

/* Biến biểu tượng File Nhạc/Tệp tin thành màu xanh dương Neon (Cyber Blue) */
.item[data-dir="false"] .icon i,
i.material-icons:contains("insert_drive_file"),
i.material-icons:contains("audiotrack") {
    color: #06b6d4 !important;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.6)) !important;
}

/* Đổi màu tên thư mục/file hiển thị rõ ràng trên nền tối */
.item .name {
    color: #f8fafc !important;
    font-weight: 500 !important;
}


/* ==================== 3. HIỆU ỨNG CHỌN & DI CHUỘT (HOVER EFFECT) ==================== */
/* Khi di chuột qua hàng thư mục: Hiện nền tím gradient rực rỡ */
.item:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.05)) !important;
    border-left: 4px solid #8b5cf6 !important;
    transition: all 0.2s ease !important;
}

/* Khi tích chọn (Select) thư mục: Đổi hẳn sang màu nền Tím-Hồng Gaming */
.item.selected {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.1)) !important;
    border-left: 4px solid #d946ef !important;
}


/* ==================== 4. THANH MENU BÊN TRÁI (SIDEBAR) ==================== */
/* Làm đẹp menu điều hướng bên trái */
#sidebar {
    background-color: #0f172a !important;
    border-right: 1px solid rgba(139, 92, 246, 0.2) !important;
}

#sidebar .action {
    color: #94a3b8 !important;
}

#sidebar .action:hover, #sidebar .action.active {
    color: #a855f7 !important;
    background-color: rgba(138, 92, 246, 0.1) !important;
}


/* ==================== 5. CÁC NÚT BẤM CHỨC NĂNG CHÍNH ==================== */
/* Đổi các nút như "Tải lên", "Tạo thư mục mới" thành nút bấm Gradient rực rỡ */
.button, button.main {
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

.button:hover {
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.5) !important;
    transform: translateY(-1px) !important;
}