{% macro sidebar(active_item, lang) %}
<!-- Mobile Overlay -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 hidden md:hidden"
    onclick="toggleSidebar()"></div>

<aside id="sidebar"
    class="w-64 glass border-r border-white/10 flex flex-col fixed md:static inset-y-0 left-0 z-50 transform -translate-x-full md:translate-x-0 transition-all duration-300">
<script>
// Apply collapsed state immediately to prevent flash
if (localStorage.getItem('remotto-sidebar-collapsed') === 'true') {
    const s = document.getElementById('sidebar');
    s.classList.remove('w-64');
    s.classList.add('w-16');
}
</script>
    <div class="h-16 px-6 border-b border-white/10 flex items-center overflow-hidden gap-3">
        <button id="sidebar-collapse-btn" onclick="toggleSidebarCollapse()"
            class="hidden md:flex items-center justify-center flex-shrink-0 p-1.5 rounded-lg transition-colors hover:bg-white/10 text-slate-400 hover:text-white"
            title="Toggle sidebar">
            <svg id="collapse-icon" class="w-4 h-4 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 19l-7-7 7-7"></path>
            </svg>
        </button>
        <h1 id="sidebar-title" class="text-xl font-bold bg-gradient-to-r from-primary-400 to-cyan-400 bg-clip-text text-transparent whitespace-nowrap">
            Remotto Console
        </h1>
    </div>

    <nav class="flex-1 p-4 space-y-2 overflow-y-auto overflow-x-hidden">
        <a href="/admin/dashboard"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == " dashboard"
            %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300
            hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-dashboard", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-dashboard", lang) }}</span>
        </a>
        <a href="/admin/monitor"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == "
            monitor" %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else
            %}hover:bg-white/5 text-slate-300 hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-monitor", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-monitor", lang) }}</span>
        </a>
        <a href="/admin/devices"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == " devices"
            %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300
            hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-devices", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-devices", lang) }}</span>
        </a>
        <a href="/admin/groups"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == " groups"
            %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300
            hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-groups", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-groups", lang) }}</span>
        </a>
        <a href="/admin/print-management"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == "
            print-management" %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else
            %}hover:bg-white/5 text-slate-300 hover:text-white{% endif %}" title="{{ crate::i18n::t("print-mgmt-title", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("print-mgmt-title", lang) }}</span>
        </a>
        <a href="/admin/tasks"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == " tasks"
            %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300
            hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-tasks", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-tasks", lang) }}</span>
        </a>
        <a href="/admin/app-restrictions"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == "
            app-restrictions" %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else
            %}hover:bg-white/5 text-slate-300 hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-app-restrictions", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-app-restrictions", lang) }}</span>
        </a>
        <a href="/admin/web-restrictions"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == "web-restrictions" || active_item == "web-browse-log" %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300 hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-web-mgmt", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-web-mgmt", lang) }}</span>
        </a>


    </nav>


    <div class="p-4 border-t border-white/10">
        <a href="/admin/settings"
            class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-lg transition-colors {% if active_item == " settings"
            %}bg-primary-600/20 text-primary-400 border border-primary-500/30{% else %}hover:bg-white/5 text-slate-300
            hover:text-white{% endif %}" title="{{ crate::i18n::t("nav-settings", lang) }}">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                </path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                </path>
            </svg>
            <span class="sidebar-label">{{ crate::i18n::t("nav-settings", lang) }}</span>
        </a>
    </div>
</aside>
{% endmacro %}

{% macro header(page_title, username, lang) %}
<header class="glass border-b border-white/10 h-16 px-4 md:px-8 flex justify-between items-center relative z-[35]">
    <div class="flex items-center gap-4">
        <!-- Mobile Menu Button -->
        <button onclick="toggleSidebar()" class="md:hidden p-2 hover:bg-white/10 rounded-lg transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                </path>
            </svg>
        </button>
        <h2 class="text-xl font-semibold">{{ page_title }}</h2>
    </div>

    <!-- Account Dropdown -->
    <div class="relative" id="account-dropdown">
        <button onclick="toggleAccountDropdown()"
            class="flex items-center gap-2 px-3 py-2 hover:bg-white/10 rounded-lg transition-colors">
            <div
                class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center text-sm font-bold">
                {{ username.chars().next().unwrap_or('U').to_ascii_uppercase() }}
            </div>
            <span class="hidden sm:inline text-sm text-slate-300">{{ username }}</span>
            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </button>

        <!-- Dropdown Menu -->
        <div id="account-menu"
            class="hidden absolute right-0 mt-2 w-56 bg-slate-800 border border-slate-600 rounded-lg shadow-xl z-[100]">
            <div class="px-4 py-3 border-b border-slate-700">
                <p class="text-sm text-slate-400">{{ crate::i18n::t("dashboard-welcome", lang) }}</p>
                <p class="text-sm font-medium text-white truncate">{{ username }}</p>
            </div>

            <!-- Language Selector -->
            <div class="px-4 py-3 border-b border-slate-700">
                <label class="block text-xs text-slate-400 mb-2">{{ crate::i18n::t("nav-language", lang) }}</label>
                <div class="relative" id="lang-dropdown">
                    <input type="hidden" id="lang-select" value="{{ lang }}">
                    <button type="button" onclick="toggleLangDropdown()"
                        class="flex items-center justify-between gap-2 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-300 text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                        <span id="lang-label" class="truncate">
                            {% if lang == "en-US" %}English (US){% endif %}
                            {% if lang == "en-GB" %}English (UK){% endif %}
                            {% if lang == "zh-CN" %}简体中文{% endif %}
                            {% if lang == "zh-TW" %}繁體中文{% endif %}
                            {% if lang == "es" %}Español{% endif %}
                            {% if lang == "fr" %}Français{% endif %}
                            {% if lang == "de" %}Deutsch{% endif %}
                            {% if lang == "pt" %}Português{% endif %}
                            {% if lang == "ru" %}Русский{% endif %}
                            {% if lang == "ar" %}العربية{% endif %}
                            {% if lang == "it" %}Italiano{% endif %}
                            {% if lang == "tr" %}Türkçe{% endif %}
                            {% if lang == "ja" %}日本語{% endif %}
                            {% if lang == "ko" %}한국어{% endif %}
                            {% if lang == "th" %}ไทย{% endif %}
                            {% if lang == "ta" %}தமிழ்{% endif %}
                            {% if lang == "te" %}తెలుగు{% endif %}
                            {% if lang == "mr" %}मराठी{% endif %}
                        </span>
                        <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                            </path>
                        </svg>
                    </button>
                    <div id="lang-menu"
                        class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-[110] max-h-60 overflow-y-auto">
                        <button type="button" onclick="selectLang('en-US', 'English (US)')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">English
                            (US)</button>
                        <button type="button" onclick="selectLang('en-GB', 'English (UK)')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">English
                            (UK)</button>
                        <button type="button" onclick="selectLang('zh-CN', '简体中文')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">简体中文</button>
                        <button type="button" onclick="selectLang('zh-TW', '繁體中文')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">繁體中文</button>
                        <button type="button" onclick="selectLang('es', 'Español')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Español</button>
                        <button type="button" onclick="selectLang('fr', 'Français')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Français</button>
                        <button type="button" onclick="selectLang('de', 'Deutsch')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Deutsch</button>
                        <button type="button" onclick="selectLang('pt', 'Português')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Português</button>
                        <button type="button" onclick="selectLang('ru', 'Русский')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Русский</button>
                        <button type="button" onclick="selectLang('ar', 'العربية')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">العربية</button>
                        <button type="button" onclick="selectLang('it', 'Italiano')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Italiano</button>
                        <button type="button" onclick="selectLang('tr', 'Türkçe')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">Türkçe</button>
                        <button type="button" onclick="selectLang('ja', '日本語')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">日本語</button>
                        <button type="button" onclick="selectLang('ko', '한국어')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">한국어</button>
                        <button type="button" onclick="selectLang('th', 'ไทย')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">ไทย</button>
                        <button type="button" onclick="selectLang('ta', 'தமிழ்')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">தமிழ்</button>
                        <button type="button" onclick="selectLang('te', 'తెలుగు')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">తెలుగు</button>
                        <button type="button" onclick="selectLang('mr', 'मराठी')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">मराठी</button>
                    </div>
                </div>
            </div>

            <!-- Theme Toggle -->
            <div class="px-4 py-3 border-b border-slate-700">
                <label class="block text-xs text-slate-400 mb-2">{{ crate::i18n::t("nav-theme", lang) }}</label>
                <button onclick="toggleTheme()"
                    class="flex items-center justify-between gap-2 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-slate-300 text-sm hover:bg-slate-600 transition-colors">
                    <span class="flex items-center gap-2">
                        <!-- Moon icon (dark mode) -->
                        <svg id="theme-icon-dark" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                        </svg>
                        <!-- Sun icon (light mode) -->
                        <svg id="theme-icon-light" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                        <span id="theme-label"></span>
                    </span>
                    <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                    </svg>
                </button>
            </div>

            <!-- Logout -->
            <a href="/admin/logout"
                class="flex items-center gap-3 px-4 py-3 hover:bg-red-500/20 text-slate-300 hover:text-red-400 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
                    </path>
                </svg>
                {{ crate::i18n::t("nav-logout", lang) }}
            </a>
        </div>
    </div>
</header>

<script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }

    function toggleAccountDropdown() {
        const menu = document.getElementById('account-menu');
        menu.classList.toggle('hidden');
    }

    function toggleLangDropdown() {
        const menu = document.getElementById('lang-menu');
        menu.classList.toggle('hidden');
    }

    function selectLang(value, label) {
        document.getElementById('lang-select').value = value;
        document.getElementById('lang-label').textContent = label;
        document.getElementById('lang-menu').classList.add('hidden');
        window.location.href = '/admin/lang?lang=' + value + '&redirect=' + encodeURIComponent(window.location.pathname);
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function (e) {
        const accountDropdown = document.getElementById('account-dropdown');
        const accountMenu = document.getElementById('account-menu');
        if (accountDropdown && accountMenu && !accountDropdown.contains(e.target)) {
            accountMenu.classList.add('hidden');
        }

        const langDropdown = document.getElementById('lang-dropdown');
        const langMenu = document.getElementById('lang-menu');
        if (langDropdown && langMenu && !langDropdown.contains(e.target)) {
            langMenu.classList.add('hidden');
        }
    });

    // =====================================================================
    // Theme Toggle (Light/Dark Mode)
    // =====================================================================
    const themeDarkLabel = '{{ crate::i18n::t("nav-theme-dark", lang) }}';
    const themeLightLabel = '{{ crate::i18n::t("nav-theme-light", lang) }}';

    function updateThemeUI() {
        const isDark = document.documentElement.classList.contains('dark');
        const iconDark = document.getElementById('theme-icon-dark');
        const iconLight = document.getElementById('theme-icon-light');
        const label = document.getElementById('theme-label');
        if (iconDark && iconLight && label) {
            iconDark.classList.toggle('hidden', !isDark);
            iconLight.classList.toggle('hidden', isDark);
            label.textContent = isDark ? themeDarkLabel : themeLightLabel;
        }
    }

    function toggleTheme() {
        const isDark = document.documentElement.classList.contains('dark');
        const newTheme = isDark ? 'light' : 'dark';
        document.documentElement.className = newTheme;
        localStorage.setItem('remotto-theme', newTheme);
        updateThemeUI();
    }

    // Initialize theme UI on page load
    updateThemeUI();

    // =====================================================================
    // Sidebar Collapse (Desktop)
    // =====================================================================
    function toggleSidebarCollapse() {
        const sidebar = document.getElementById('sidebar');
        const isCollapsed = sidebar.classList.contains('w-16');
        if (isCollapsed) {
            expandSidebar();
        } else {
            collapseSidebar();
        }
    }

    function collapseSidebar() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.remove('w-64');
        sidebar.classList.add('w-16');
        // Hide labels
        document.querySelectorAll('.sidebar-label').forEach(el => el.classList.add('hidden'));
        // Hide title
        const title = document.getElementById('sidebar-title');
        if (title) title.classList.add('hidden');
        // Adjust nav padding
        sidebar.querySelector('nav').classList.remove('p-4');
        sidebar.querySelector('nav').classList.add('p-2');
        document.querySelectorAll('.sidebar-link').forEach(el => {
            el.classList.remove('px-4', 'gap-3');
            el.classList.add('px-0', 'justify-center', 'gap-0');
        });
        // Rotate chevron
        const icon = document.getElementById('collapse-icon');
        if (icon) icon.classList.add('rotate-180');
        // Adjust header padding
        sidebar.querySelector('.h-16').classList.remove('px-6', 'gap-3');
        sidebar.querySelector('.h-16').classList.add('px-0', 'justify-center');
        localStorage.setItem('remotto-sidebar-collapsed', 'true');
    }

    function expandSidebar() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.remove('w-16');
        sidebar.classList.add('w-64');
        // Show labels
        document.querySelectorAll('.sidebar-label').forEach(el => el.classList.remove('hidden'));
        // Show title
        const title = document.getElementById('sidebar-title');
        if (title) title.classList.remove('hidden');
        // Restore nav padding
        sidebar.querySelector('nav').classList.remove('p-2');
        sidebar.querySelector('nav').classList.add('p-4');
        document.querySelectorAll('.sidebar-link').forEach(el => {
            el.classList.remove('px-0', 'justify-center', 'gap-0');
            el.classList.add('px-4', 'gap-3');
        });
        // Restore chevron
        const icon = document.getElementById('collapse-icon');
        if (icon) icon.classList.remove('rotate-180');
        // Restore header padding
        sidebar.querySelector('.h-16').classList.remove('px-0', 'justify-center');
        sidebar.querySelector('.h-16').classList.add('px-6', 'gap-3');
        localStorage.setItem('remotto-sidebar-collapsed', 'false');
    }

    // Restore collapsed state on page load
    if (localStorage.getItem('remotto-sidebar-collapsed') === 'true') {
        collapseSidebar();
    }
</script>
{% endmacro %}