/* ============================================
   Background Slideshow - Bầu trời với đám mây
   ============================================ */

html {
    position: relative;
    min-height: 100vh;
}

body {
    position: relative;
    min-height: 100vh;
}

/* Background slideshow - overlay lên tất cả các panel kể cả sidebar */
.background-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Z-index thấp hơn content nhưng vẫn overlay */
    overflow: hidden;
    pointer-events: none; /* Không chặn click events */
}

.background-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    pointer-events: none;
}

.background-slide.active {
    opacity: 0.4; /* Độ mờ vừa phải để nhìn rõ chữ */
}

[data-theme="night"] .background-slide.active {
    opacity: 0.25; /* Nhẹ hơn cho dark mode */
}

/* Overlay nhẹ để đảm bảo text dễ đọc - đặt trên background */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Trên background slideshow */
    background: rgba(255, 255, 255, 0.15); /* Overlay trắng nhẹ cho light mode */
    pointer-events: none;
}

/* Dark mode overlay */
[data-theme="night"] body::after {
    background: rgba(0, 0, 0, 0.15); /* Overlay đen nhẹ cho dark mode */
}

/* Đảm bảo tất cả content có z-index cao hơn để tương tác được và hiển thị trên background */
.disclaimer-banner {
    position: fixed;
    z-index: 10000 !important; /* Cao nhất */
}

.navbar {
    position: relative;
    z-index: 1000 !important; /* Cao để hiển thị trên background */
}

.sidebar {
    position: fixed;
    z-index: 1000 !important; /* Cao để hiển thị trên background */
}

.main-content {
    position: relative;
    z-index: 100 !important; /* Cao hơn background */
}

/* Đảm bảo các panel có background trong suốt một phần để thấy hình nền */
.sidebar,
.navbar,
.main-content {
    background: rgba(255, 255, 255, 0.85) !important; /* Trong suốt một phần */
}

[data-theme="night"] .sidebar,
[data-theme="night"] .navbar,
[data-theme="night"] .main-content {
    background: rgba(31, 41, 55, 0.85) !important; /* Trong suốt một phần cho dark mode */
}