/* ========================================
   THEME TOGGLE BUTTON - NÚT BẬT TẮT ĐÈN
   ======================================== */

:root {
    --theme-toggle-scale: 0.8;
}

/* Theme Toggle Container */
.theme-toggle-container {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: calc(var(--theme-toggle-scale) * 60px);
    height: calc(var(--theme-toggle-scale) * 34px);
}

.theme-switch #theme-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #2196f3;
    transition: 0.4s;
    z-index: 0;
    overflow: hidden;
}

.sun-moon {
    position: absolute;
    content: "";
    height: calc(var(--theme-toggle-scale) * 26px);
    width: calc(var(--theme-toggle-scale) * 26px);
    left: calc(var(--theme-toggle-scale) * 4px);
    bottom: calc(var(--theme-toggle-scale) * 4px);
    background-color: #ffd700;
    transition: 0.4s;
}

#theme-toggle-input:checked+.theme-slider {
    background-color: #1a202c;
}

#theme-toggle-input:focus+.theme-slider {
    box-shadow: 0 0 calc(var(--theme-toggle-scale) * 1px) #2196f3;
}

#theme-toggle-input:checked+.theme-slider .sun-moon {
    transform: translateX(calc(var(--theme-toggle-scale) * 26px));
    background-color: #f7fafc;
    animation: rotate-center 0.6s ease-in-out both;
}

.moon-dot {
    opacity: 0;
    transition: 0.4s;
    fill: #4a5568;
}

#theme-toggle-input:checked+.theme-slider .sun-moon .moon-dot {
    opacity: 1;
}

.theme-slider.round {
    border-radius: calc(var(--theme-toggle-scale) * 34px);
}

.theme-slider.round .sun-moon {
    border-radius: 50%;
}

#moon-dot-1 {
    left: calc(var(--theme-toggle-scale) * 10px);
    top: calc(var(--theme-toggle-scale) * 3px);
    position: absolute;
    width: calc(var(--theme-toggle-scale) * 6px);
    height: calc(var(--theme-toggle-scale) * 6px);
    z-index: 4;
}

#moon-dot-2 {
    left: calc(var(--theme-toggle-scale) * 2px);
    top: calc(var(--theme-toggle-scale) * 10px);
    position: absolute;
    width: calc(var(--theme-toggle-scale) * 10px);
    height: calc(var(--theme-toggle-scale) * 10px);
    z-index: 4;
}

#moon-dot-3 {
    left: calc(var(--theme-toggle-scale) * 16px);
    top: calc(var(--theme-toggle-scale) * 18px);
    position: absolute;
    width: calc(var(--theme-toggle-scale) * 3px);
    height: calc(var(--theme-toggle-scale) * 3px);
    z-index: 4;
}

#light-ray-1,
#light-ray-3,
#light-ray-2 {
    position: absolute;
    z-index: -1;
    fill: white;
    opacity: 10%;
}

#light-ray-1 {
    left: calc(var(--theme-toggle-scale) * -8px);
    top: calc(var(--theme-toggle-scale) * -8px);
    width: calc(var(--theme-toggle-scale) * 43px);
    height: calc(var(--theme-toggle-scale) * 43px);
}

#light-ray-2 {
    left: -50%;
    top: -50%;
    width: calc(var(--theme-toggle-scale) * 55px);
    height: calc(var(--theme-toggle-scale) * 55px);
}

#light-ray-3 {
    left: calc(var(--theme-toggle-scale) * -18px);
    top: calc(var(--theme-toggle-scale) * -18px);
    width: calc(var(--theme-toggle-scale) * 60px);
    height: calc(var(--theme-toggle-scale) * 60px);
}

.cloud-light,
.cloud-dark {
    position: absolute;
    animation-name: cloud-move;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.cloud-light {
    fill: #e2e8f0;
}

.cloud-dark {
    fill: #cbd5e0;
    animation-delay: 1s;
}

#cloud-1 {
    left: calc(var(--theme-toggle-scale) * 30px);
    top: calc(var(--theme-toggle-scale) * 15px);
    width: calc(var(--theme-toggle-scale) * 40px);
}

#cloud-2 {
    left: calc(var(--theme-toggle-scale) * 44px);
    top: calc(var(--theme-toggle-scale) * 10px);
    width: calc(var(--theme-toggle-scale) * 20px);
}

#cloud-3 {
    left: calc(var(--theme-toggle-scale) * 18px);
    top: calc(var(--theme-toggle-scale) * 24px);
    width: calc(var(--theme-toggle-scale) * 30px);
}

#cloud-4 {
    left: calc(var(--theme-toggle-scale) * 36px);
    top: calc(var(--theme-toggle-scale) * 18px);
    width: calc(var(--theme-toggle-scale) * 40px);
}

#cloud-5 {
    left: calc(var(--theme-toggle-scale) * 48px);
    top: calc(var(--theme-toggle-scale) * 14px);
    width: calc(var(--theme-toggle-scale) * 20px);
}

#cloud-6 {
    left: calc(var(--theme-toggle-scale) * 22px);
    top: calc(var(--theme-toggle-scale) * 26px);
    width: calc(var(--theme-toggle-scale) * 30px);
}

@keyframes cloud-move {
    0% {
        transform: translateX(0px);
    }

    40% {
        transform: translateX(calc(var(--theme-toggle-scale) * 4px));
    }

    80% {
        transform: translateX(calc(var(--theme-toggle-scale) * -4px));
    }

    100% {
        transform: translateX(0px);
    }
}

.stars {
    transform: translateY(calc(var(--theme-toggle-scale) * -32px));
    opacity: 0;
    transition: 0.4s;
}

.star {
    fill: white;
    position: absolute;
    transition: 0.4s;
    animation-name: star-twinkle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#theme-toggle-input:checked+.theme-slider .stars {
    transform: translateY(0);
    opacity: 1;
}

#star-1 {
    width: calc(var(--theme-toggle-scale) * 20px);
    top: calc(var(--theme-toggle-scale) * 2px);
    left: calc(var(--theme-toggle-scale) * 3px);
    animation-delay: 0.3s;
}

#star-2 {
    width: calc(var(--theme-toggle-scale) * 6px);
    top: calc(var(--theme-toggle-scale) * 16px);
    left: calc(var(--theme-toggle-scale) * 3px);
}

#star-3 {
    width: calc(var(--theme-toggle-scale) * 12px);
    top: calc(var(--theme-toggle-scale) * 20px);
    left: calc(var(--theme-toggle-scale) * 10px);
    animation-delay: 0.6s;
}

#star-4 {
    width: calc(var(--theme-toggle-scale) * 18px);
    top: calc(var(--theme-toggle-scale) * 0px);
    left: calc(var(--theme-toggle-scale) * 18px);
    animation-delay: 1.3s;
}

@keyframes star-twinkle {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    80% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotate-center {
    0% {
        transform: translateX(calc(var(--theme-toggle-scale) * 26px)) rotate(0);
    }

    100% {
        transform: translateX(calc(var(--theme-toggle-scale) * 26px)) rotate(360deg);
    }
}

/* Dark Theme Styles */
body.dark-theme {
    --bg-color: #1a202c;
    --text-color: #e2e8f0;
    --card-bg: #2d3748;
    --border-color: #4a5568;
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --success-color: #48bb78;
    --warning-color: #ed8936;
    --error-color: #f56565;
    --info-color: #4299e1;

    background-color: var(--bg-color);
    color: var(--text-color);
}

body.dark-theme .sidebar {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-right: 1px solid var(--border-color);
}

body.dark-theme .top-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

body.dark-theme .main-content {
    background-color: var(--bg-color);
}

body.dark-theme .quiz-card,
body.dark-theme .stat-card,
body.dark-theme .room-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-theme .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

body.dark-theme .search-bar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-theme .search-bar input {
    background: transparent;
    color: var(--text-color);
}

body.dark-theme .search-bar input::placeholder {
    color: #a0aec0;
}

/* Responsive */
@media (max-width: 768px) {
    .theme-toggle-container {
        margin-right: 10px;
    }

    :root {
        --theme-toggle-scale: 0.7;
    }
}

@media (max-width: 480px) {
    :root {
        --theme-toggle-scale: 0.6;
    }
}