/**
 * MGMPS SMANESI - Dynamic Theme Stylesheet
 * Themes: Aqua (Water Drops), Sakura (Cherry Blossoms), Spring (Green Leaves), Autumn (Orange Maple), Winter (Snow/Ice)
 */

/* ==========================================================================
   1. THEME VARIABLES (CSS Custom Properties)
   ========================================================================== */

/* Default / Fallback */
:root {
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --accent-color: #38bdf8;
    --accent-light: #e0f2fe;
    --sidebar-bg: #ffffff;
    --bg-color: #f0f9ff;
    --body-bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f2fe 100%);
    --sidebar-header-bg: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --theme-bg-left: linear-gradient(145deg, #024b7a 0%, #0284c7 35%, #0ea5e9 70%, #38bdf8 100%);
    --theme-orb-1: rgba(56, 189, 248, 0.45);
    --theme-orb-2: rgba(186, 230, 253, 0.4);
    --badge-bg: rgba(255, 255, 255, 0.25);
    --badge-border: rgba(255, 255, 255, 0.65);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --btn-shadow: rgba(2, 132, 199, 0.35);
    --theme-pill-color: #0284c7;
}

/* 💧 1. TEMA TITIK AIR CERAH (Aqua Bubbles - Cerah & Menyegarkan) */
body.theme-aqua {
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --accent-color: #38bdf8;
    --accent-light: #e0f2fe;
    --sidebar-bg: #ffffff;
    --bg-color: #f0f9ff;
    --body-bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 30%, #e0f7fa 65%, #f0fdfa 100%);
    --sidebar-header-bg: linear-gradient(135deg, #0284c7 0%, #0ea5e9 40%, #06b6d4 75%, #38bdf8 100%);
    --theme-bg-left: linear-gradient(145deg, #0369a1 0%, #0284c7 30%, #0ea5e9 60%, #06b6d4 85%, #38bdf8 100%);
    --theme-orb-1: rgba(56, 189, 248, 0.55);
    --theme-orb-2: rgba(186, 230, 253, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.7);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #06b6d4 100%);
    --btn-shadow: rgba(2, 132, 199, 0.35);
    --theme-pill-color: #0284c7;
    --theme-rgb: 2, 132, 199;
}

/* 🌸 2. TEMA SAKURA (Pink Lembut, Cantik & Merona) */
body.theme-sakura {
    --primary-color: #db2777;
    --primary-hover: #be185d;
    --accent-color: #f472b6;
    --accent-light: #fce7f3;
    --sidebar-bg: #ffffff;
    --bg-color: #fff1f2;
    --body-bg-gradient: linear-gradient(135deg, #fff1f2 0%, #fdf2f8 30%, #fce7f3 65%, #fbcfe8 100%);
    --sidebar-header-bg: linear-gradient(135deg, #be185d 0%, #db2777 35%, #ec4899 70%, #f472b6 100%);
    --theme-bg-left: linear-gradient(145deg, #be185d 0%, #db2777 30%, #ec4899 60%, #f472b6 85%, #fbcfe8 100%);
    --theme-orb-1: rgba(244, 114, 182, 0.55);
    --theme-orb-2: rgba(251, 207, 232, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.75);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f472b6 100%);
    --btn-shadow: rgba(236, 72, 153, 0.35);
    --theme-pill-color: #db2777;
    --theme-rgb: 219, 39, 119;
}

/* 🍃 3. TEMA SPRING (Musim Semi Hijau Segar & Padang Rumput) */
body.theme-spring {
    --primary-color: #16a34a;
    --primary-hover: #15803d;
    --accent-color: #22c55e;
    --accent-light: #dcfce7;
    --sidebar-bg: #ffffff;
    --bg-color: #f0fdf4;
    --body-bg-gradient: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 30%, #dcfce7 65%, #d1fae5 100%);
    --sidebar-header-bg: linear-gradient(135deg, #15803d 0%, #16a34a 35%, #22c55e 70%, #4ade80 100%);
    --theme-bg-left: linear-gradient(145deg, #166534 0%, #15803d 30%, #16a34a 60%, #22c55e 85%, #4ade80 100%);
    --theme-orb-1: rgba(34, 197, 94, 0.55);
    --theme-orb-2: rgba(187, 247, 208, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.7);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
    --btn-shadow: rgba(22, 163, 74, 0.35);
    --theme-pill-color: #16a34a;
    --theme-rgb: 22, 163, 74;
}

/* 🍁 4. TEMA AUTUMN (Musim Gugur Oranye Keemasan & Senja Elegan) */
body.theme-autumn {
    --primary-color: #ea580c;
    --primary-hover: #c2410c;
    --accent-color: #f97316;
    --accent-light: #ffedd5;
    --sidebar-bg: #ffffff;
    --bg-color: #fff7ed;
    --body-bg-gradient: linear-gradient(135deg, #fffbeb 0%, #fff7ed 30%, #fef3c7 65%, #fed7aa 100%);
    --sidebar-header-bg: linear-gradient(135deg, #c2410c 0%, #ea580c 35%, #f97316 70%, #fbbf24 100%);
    --theme-bg-left: linear-gradient(145deg, #9a3412 0%, #c2410c 30%, #ea580c 60%, #f97316 85%, #fbbf24 100%);
    --theme-orb-1: rgba(249, 115, 22, 0.55);
    --theme-orb-2: rgba(251, 191, 36, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.7);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #f97316 100%);
    --btn-shadow: rgba(234, 88, 12, 0.35);
    --theme-pill-color: #ea580c;
    --theme-rgb: 234, 88, 12;
}

/* ❄️ 5. TEMA WINTER (Musim Dingin Kristal Salju & Es Biru Cerah) */
body.theme-winter {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --accent-color: #38bdf8;
    --accent-light: #e0f2fe;
    --sidebar-bg: #ffffff;
    --bg-color: #f0f9ff;
    --body-bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #e0e7ff 65%, #bae6fd 100%);
    --sidebar-header-bg: linear-gradient(135deg, #1e40af 0%, #2563eb 35%, #3b82f6 70%, #38bdf8 100%);
    --theme-bg-left: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 30%, #2563eb 60%, #3b82f6 85%, #38bdf8 100%);
    --theme-orb-1: rgba(56, 189, 248, 0.55);
    --theme-orb-2: rgba(191, 219, 254, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.7);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #38bdf8 100%);
    --btn-shadow: rgba(37, 99, 235, 0.35);
    --theme-pill-color: #2563eb;
    --theme-rgb: 37, 99, 235;
}

/* 🪻 6. TEMA LAVENDER (Ungu Lembut, Mewah, Harum & Harmonis) */
body.theme-lavender {
    --primary-color: #7c3aed;
    --primary-hover: #6d28d9;
    --accent-color: #a78bfa;
    --accent-light: #f5f3ff;
    --sidebar-bg: #ffffff;
    --bg-color: #f5f3ff;
    --body-bg-gradient: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 30%, #ede9fe 65%, #e9d5ff 100%);
    --sidebar-header-bg: linear-gradient(135deg, #6d28d9 0%, #7c3aed 35%, #8b5cf6 70%, #c084fc 100%);
    --theme-bg-left: linear-gradient(145deg, #5b21b6 0%, #6d28d9 30%, #7c3aed 60%, #8b5cf6 85%, #c084fc 100%);
    --theme-orb-1: rgba(167, 139, 250, 0.55);
    --theme-orb-2: rgba(221, 214, 254, 0.65);
    --badge-bg: rgba(255, 255, 255, 0.28);
    --badge-border: rgba(255, 255, 255, 0.7);
    --badge-color: #ffffff;
    --btn-gradient: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
    --btn-shadow: rgba(124, 58, 237, 0.35);
    --theme-pill-color: #7c3aed;
    --theme-rgb: 124, 58, 237;
}

/* ==========================================================================
   2. GLOBAL BODY & DASHBOARD INTEGRATION
   ========================================================================== */
body {
    background: var(--body-bg-gradient) !important;
    background-attachment: fixed !important;
    transition: background 0.8s ease-in-out, color 0.5s ease;
}

#sidebar .sidebar-header {
    background: var(--sidebar-header-bg) !important;
    transition: background 0.8s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#sidebar ul li a:hover, #sidebar ul li.active a {
    color: var(--primary-color) !important;
    background: linear-gradient(90deg, rgba(var(--theme-rgb), 0.12) 0%, rgba(var(--theme-rgb), 0.02) 100%) !important;
    border-left-color: var(--primary-color) !important;
}

.btn-primary {
    background: var(--btn-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--btn-shadow);
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--btn-shadow);
    opacity: 0.95;
}

.navbar-top {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-top: 3px solid transparent !important;
    border-image: var(--btn-gradient) 1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.navbar-top .user-avatar {
    background: var(--btn-gradient) !important;
    box-shadow: 0 3px 10px var(--btn-shadow);
}

/* ==========================================================================
   3. CANVAS PARTICLES CONTAINER (BACKGROUND LAYER)
   ========================================================================== */
#themeCanvasContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

#themeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Make sure panels and interactive widgets stay above canvas on login page */
.left-content, .right-panel, .theme-widget-bar {
    position: relative;
    z-index: 2;
}

/* Ensure Bootstrap modals always retain fixed positioning and top-level z-index */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1060 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.modal-dialog {
    position: relative !important;
    z-index: 1061 !important;
}

.modal-content {
    position: relative !important;
    z-index: 1062 !important;
    pointer-events: auto !important;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1050 !important;
}

/* Translucent backdrop effect for dashboard cards */
.card {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
}

.navbar-top {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   4. THEME SWITCHER WIDGETS
   ========================================================================== */

/* A. Dashboard Navbar Theme Widget */
.theme-nav-widget {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 30px;
    padding: 5px 12px 5px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.theme-nav-widget:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-color);
}

.theme-nav-pill-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--btn-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px var(--btn-shadow);
    transition: transform 0.4s ease;
}

.theme-nav-widget:hover .theme-nav-pill-icon {
    transform: rotate(20deg) scale(1.1);
}

.theme-nav-select {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    padding-right: 6px;
}

/* B. Login Floating Widget Bar */
.theme-widget-bar {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px 14px 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.theme-widget-bar:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.98);
}

.theme-pill-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--btn-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 2px 8px var(--btn-shadow);
    transition: transform 0.4s ease;
}

.theme-widget-bar:hover .theme-pill-icon {
    transform: rotate(20deg) scale(1.08);
}

.theme-select-dropdown {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    padding-right: 4px;
}

.live-clock-badge {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-clock-badge i {
    color: var(--accent-color);
    font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .theme-nav-widget {
        padding: 4px 8px;
    }
    .theme-nav-select {
        font-size: 12px;
        max-width: 130px;
    }
    .theme-widget-bar {
        top: 10px;
        right: 10px;
        padding: 4px 10px;
    }
    .live-clock-badge {
        display: none;
    }
    .theme-widget-bar .vr {
        display: none;
    }
}