{% extends "base.html" %}
{% block content %}
<script src="{{ url_for('static', filename='vendor/qrcode/qrcode.min.js') }}"></script>
<div class="container mx-auto px-4 py-8">






    {% if user_role == 'main_admin' %}
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-6 rounded-2xl shadow-lg mb-4 relative overflow-hidden">
    <div class="system-status-glow"></div>

    <h3 class="text-xl font-bold text-white flex items-center gap-3 mb-6 relative">
        <span class="system-status-icon-badge text-blue-400 bg-blue-900">
            <i class="fas fa-server"></i>
        </span>
        System Status
    </h3>

    <div id="system-status-loader" class="absolute inset-0 bg-gray-800 bg-opacity-90 backdrop-blur-sm flex items-center justify-center rounded-2xl z-10 transition-opacity duration-200">
        <i class="fas fa-spinner fa-spin text-white text-2xl"></i>
    </div>

    <div class="system-stats-grid">

        <div class="meter-card" style="--stat-rgb: 129,140,248; --stat-rgb-light: 79,70,229;">
            <div class="meter-top">
                <span class="meter-icon"><i class="fas fa-microchip"></i></span>
                <span class="meter-label">CPU Usage</span>
            </div>
            <div class="meter-readout">
                <div class="meter-value-row"><span class="meter-value" id="cpu-usage-percent">--</span></div>
                <div class="meter-sub" id="cpu-frequency-text"></div>
            </div>
            <div class="meter-chart-zone">
                <svg viewBox="0 0 320 84" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="grad-cpu" x1="0" y1="0" x2="0" y2="1">
                            <stop class="hist-grad-stop-1" offset="0%"/>
                            <stop class="hist-grad-stop-2" offset="55%"/>
                            <stop class="hist-grad-stop-3" offset="100%"/>
                        </linearGradient>
                    </defs>
                    <line class="hist-grid" x1="0" y1="42" x2="320" y2="42"/>
                    <path id="cpu-hist-area" fill="url(#grad-cpu)" d=""/>
                    <path id="cpu-hist-line" class="hist-line" d=""/>
                    <circle id="cpu-hist-halo" class="hist-dot-halo" cx="0" cy="42" r="5"/>
                    <circle id="cpu-hist-dot" class="hist-dot" cx="0" cy="42" r="4"/>
                </svg>
            </div>
        </div>

        <div class="meter-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
            <div class="meter-top">
                <span class="meter-icon"><i class="fas fa-memory"></i></span>
                <span class="meter-label">RAM Usage</span>
            </div>
            <div class="meter-readout">
                <div class="meter-value-row"><span class="meter-value" id="ram-usage-percent">--</span></div>
                <div class="meter-sub" id="ram-usage-text"></div>
            </div>
            <div class="meter-chart-zone">
                <svg viewBox="0 0 320 84" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="grad-ram" x1="0" y1="0" x2="0" y2="1">
                            <stop class="hist-grad-stop-1" offset="0%"/>
                            <stop class="hist-grad-stop-2" offset="55%"/>
                            <stop class="hist-grad-stop-3" offset="100%"/>
                        </linearGradient>
                    </defs>
                    <line class="hist-grid" x1="0" y1="42" x2="320" y2="42"/>
                    <path id="ram-hist-area" fill="url(#grad-ram)" d=""/>
                    <path id="ram-hist-line" class="hist-line" d=""/>
                    <circle id="ram-hist-halo" class="hist-dot-halo" cx="0" cy="42" r="5"/>
                    <circle id="ram-hist-dot" class="hist-dot" cx="0" cy="42" r="4"/>
                </svg>
            </div>
        </div>

        <div class="meter-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
            <div class="meter-top">
                <span class="meter-icon"><i class="fas fa-right-left"></i></span>
                <span class="meter-label">Swap Usage</span>
            </div>
            <div class="meter-readout">
                <div class="meter-value-row"><span class="meter-value" id="swap-usage-percent">--</span></div>
                <div class="meter-sub" id="swap-usage-text"></div>
            </div>
            <div class="meter-chart-zone">
                <svg viewBox="0 0 320 84" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="grad-swap" x1="0" y1="0" x2="0" y2="1">
                            <stop class="hist-grad-stop-1" offset="0%"/>
                            <stop class="hist-grad-stop-2" offset="55%"/>
                            <stop class="hist-grad-stop-3" offset="100%"/>
                        </linearGradient>
                    </defs>
                    <line class="hist-grid" x1="0" y1="42" x2="320" y2="42"/>
                    <path id="swap-hist-area" fill="url(#grad-swap)" d=""/>
                    <path id="swap-hist-line" class="hist-line" d=""/>
                    <circle id="swap-hist-halo" class="hist-dot-halo" cx="0" cy="42" r="5"/>
                    <circle id="swap-hist-dot" class="hist-dot" cx="0" cy="42" r="4"/>
                </svg>
            </div>
        </div>

        <div class="meter-card" style="--stat-rgb: 250,204,21; --stat-rgb-light: 202,138,4;">
            <div class="meter-top">
                <span class="meter-icon"><i class="fas fa-hard-drive"></i></span>
                <span class="meter-label">Disk Usage</span>
            </div>
            <div class="meter-readout">
                <div class="meter-value-row"><span class="meter-value" id="disk-usage-percent">--</span></div>
                <div class="meter-sub" id="disk-usage-text"></div>
            </div>
            <div class="meter-chart-zone">
                <svg viewBox="0 0 320 84" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="grad-disk" x1="0" y1="0" x2="0" y2="1">
                            <stop class="hist-grad-stop-1" offset="0%"/>
                            <stop class="hist-grad-stop-2" offset="55%"/>
                            <stop class="hist-grad-stop-3" offset="100%"/>
                        </linearGradient>
                    </defs>
                    <line class="hist-grid" x1="0" y1="42" x2="320" y2="42"/>
                    <path id="disk-hist-area" fill="url(#grad-disk)" d=""/>
                    <path id="disk-hist-line" class="hist-line" d=""/>
                    <circle id="disk-hist-halo" class="hist-dot-halo" cx="0" cy="42" r="5"/>
                    <circle id="disk-hist-dot" class="hist-dot" cx="0" cy="42" r="4"/>
                </svg>
            </div>
        </div>
    </div>
</div>
{% endif %}
	
	
	
	
	
	
	
	
	
	

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-4">
        <div class="mini-stat-card" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
            <div>
                <p class="mini-stat-label">Online</p>
                <p class="mini-stat-value" id="onlineUsersCount">{{ online_users_count }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-tower-broadcast"></i></div>
        </div>

        <div class="mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
            <div>
                <p class="mini-stat-label">Total Users</p>
                <p class="mini-stat-value" id="totalUsersCount">{{ total_users_count }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-users"></i></div>
        </div>

        <div class="mini-stat-card" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
            <div>
                <p class="mini-stat-label">Expired</p>
                <p class="mini-stat-value" id="expiredUsersCount">{{ expired_users_count }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-hourglass-end"></i></div>
        </div>

        <div class="mini-stat-card" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
            <div>
                <p class="mini-stat-label">Disabled</p>
                <p class="mini-stat-value" id="disabledUsersCount">{{ disabled_users_count }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-ban"></i></div>
        </div>

        {% if not (user_role == 'sub_admin' and sub_admin_stats.mode != 'credit') %}
        <div class="mini-stat-card relative group" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
            <div>
                <p class="mini-stat-label">Total Traffic</p>
                <p class="mini-stat-value" id="totalTraffic">{{ (total_download + total_upload)|format_bytes }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-arrow-trend-up"></i></div>
            <div class="mini-stat-hover-overlay absolute top-0 left-0 w-full h-full rounded-2xl flex flex-col justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-3">
                <div class="mini-stat-hover-row">
                    <i class="fas fa-arrow-down" style="color:#60a5fa;"></i>
                    <span class="mini-stat-hover-label">Download</span>
                    <span class="mini-stat-hover-value" id="uploadTraffic">{{ total_upload|format_bytes }}</span>
                </div>
                <div class="mini-stat-hover-row">
                    <i class="fas fa-arrow-up" style="color:#4ade80;"></i>
                    <span class="mini-stat-hover-label">Upload</span>
                    <span class="mini-stat-hover-value" id="downloadTraffic">{{ total_download|format_bytes }}</span>
                </div>
            </div>
        </div>
        {% endif %}

        {% if user_role == 'main_admin' %}
        <div class="mini-stat-card" style="--stat-rgb: 129,140,248; --stat-rgb-light: 79,70,229;">
            <div>
                <p class="mini-stat-label">Active Nodes</p>
                <p class="mini-stat-value" id="activeNodesCount">{{ get_active_nodes_count() }}</p>
            </div>
            <div class="mini-stat-icon"><i class="fas fa-sitemap"></i></div>
        </div>
        {% endif %}

        {% if user_role == 'sub_admin' %}
            <div class="mini-stat-card" style="--stat-rgb: 34,211,238; --stat-rgb-light: 8,145,178;">
                <div>
                    <p class="mini-stat-label">My Users</p>
                    <p class="mini-stat-value" id="subAdminUserCount">
                        {{ sub_admin_stats.current_users }} / {{ sub_admin_stats.max_users if sub_admin_stats.max_users else '∞' }}
                    </p>
                </div>
                <div class="mini-stat-icon"><i class="fas fa-users"></i></div>
            </div>

            {% if sub_admin_stats.mode == 'credit' %}
            <div class="mini-stat-card" style="--stat-rgb: {{ '74,222,128' if sub_admin_stats.balance > 0 else '248,113,113' }}; --stat-rgb-light: {{ '22,163,74' if sub_admin_stats.balance > 0 else '220,38,38' }};">
                <div>
                    <p class="mini-stat-label">Wallet Balance</p>
                    <p class="mini-stat-value" id="subAdminWalletBalance">
                        {% if sub_admin_stats.currency_unit == 'DOLLAR' %}
                            $ {{ "{:,.4f}".format(sub_admin_stats.balance).rstrip('0').rstrip('.') }}
                        {% else %}
                            {{ "{:,.0f}".format(sub_admin_stats.balance) }} <span class="text-xs">T</span>
                        {% endif %}
                    </p>
                </div>
                <div class="mini-stat-icon" id="subAdminBalanceIcon"><i class="fas fa-wallet"></i></div>
            </div>
            {% else %}
            <div class="mini-stat-card" style="--stat-rgb: 232,121,249; --stat-rgb-light: 162,28,175;">
                <div>
                    <p class="mini-stat-label">Data Quota</p>
                    <p class="mini-stat-value" id="subAdminDataQuota">
                        {{ sub_admin_stats.used_bytes|format_bytes }} /
                        {% if sub_admin_stats.max_gb and sub_admin_stats.max_gb > 0 %}
                            {{ sub_admin_stats.max_gb }} GB
                        {% else %}
                            <span class="text-xl">∞</span>
                        {% endif %}
                    </p>
                </div>
                <div class="mini-stat-icon" id="subAdminBalanceIcon"><i class="fas fa-database"></i></div>
            </div>
            {% endif %}

            {% if sub_admin_stats.mode == 'credit' %}
            <div class="mini-stat-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                <div>
                    <p class="mini-stat-label">Total Usage</p>
                    <p class="mini-stat-value" id="subAdminTotalUsage">
                        {{ sub_admin_stats.used_bytes|format_bytes }}
                    </p>
                </div>
                <div class="mini-stat-icon"><i class="fas fa-chart-pie"></i></div>
            </div>
            {% endif %}
        {% endif %}
    </div>













<div id="addUserModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-3xl border border-gray-700 flex flex-col" style="height:95vh; max-height: 720px;">
        <div class="flex-shrink-0 flex justify-between items-center pb-4 border-b border-gray-700">
            <h2 class="text-xl font-bold text-white flex items-center gap-3">
                <span class="system-status-icon-badge text-purple-400 bg-purple-900">
                    <i class="fas fa-rocket"></i>
                </span>
                <span>Quick User Creation</span>
            </h2>
            <button onclick="closeAddUserModal()" class="text-gray-400 hover:text-white transition-colors">
                <i class="fas fa-times fa-lg"></i>
            </button>
        </div>
        <form id="addUserForm" action="{{ url_for('add_user') }}" method="post" class="flex-grow min-h-0 flex flex-col overflow-hidden">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="flex-grow min-h-0 custom-scroll space-y-5" style="overflow-y: auto; padding: 1.25rem 0.5rem 1.5rem 0.5rem;">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="compact-card" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                        <h3 class="compact-card-title">
                            <i class="fas fa-id-card-alt text-purple-400"></i> Creation Type
                        </h3>
                        <div class="toggle-group">
                            <label>
                                <input type="radio" name="creation_type" value="single" class="toggle-input" checked onchange="updateAddUserModalUI()">
                                <div class="toggle-option">Single User</div>
                            </label>
                            <label>
                                <input type="radio" name="creation_type" value="bulk" class="toggle-input" onchange="updateAddUserModalUI()">
                                <div class="toggle-option">Bulk Users</div>
                            </label>
                        </div>
                        <div id="singleUsernameContainer" class="mt-3">
                            <div class="flex gap-1">
                                <input type="text" name="username" id="addUsernameInput" placeholder="Username" class="compact-input" style="flex: 1 1 0%; min-width: 0;" required pattern="[A-Za-z0-9_-]+" oninput="this.value = this.value.replace(/[^A-Za-z0-9_-]/g, '');">
                                <button type="button" onclick="fillRandomUsername()" title="Generate random username" class="compact-input bg-gray-700 hover:bg-gray-600 transition-colors" style="flex: 0 0 auto; width: auto; padding-left: 0.75rem; padding-right: 0.75rem; cursor: pointer;">
                                    <i class="fas fa-dice"></i>
                                </button>
                            </div>
                            <input type="checkbox" id="bulkAddCheckbox" name="is_bulk" class="hidden">
                        </div>
                        <div id="bulkAddContainer" class="hidden mt-3">
                            <div class="grid grid-cols-2 gap-2">
                                <input type="text" name="bulk_prefix" id="bulkPrefixInput" placeholder="Prefix (optional)" class="compact-input" pattern="[A-Za-z0-9_-]+" oninput="this.value = this.value.replace(/[^A-Za-z0-9_-]/g, '');">
                                <input type="number" name="user_count" id="userCountInput" placeholder="Number of Users (max 300)" min="1" max="300" oninput="if(this.value > 300) this.value = 300; if(this.value < 1) this.value = 1;" class="compact-input">
                            </div>
<div class="bulk-limit-hint" style="font-size:0.7rem;color:#9ca3af;margin-top:0.25rem;display:flex;align-items:center;gap:0.25rem;">
    <i class="fas fa-info-circle text-xs"></i>
    <span>Maximum 300 users per bulk creation. Leave prefix empty for random names, or set one (e.g. "vpn") for sequential names like vpn001, vpn002...</span>
</div>
                        </div>
                    </div>

                    <div class="compact-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                        <h3 class="compact-card-title">
                            <i class="fas fa-clock text-blue-400"></i> Activation Type
                        </h3>
                        <div class="toggle-group">
                            <label>
                                <input type="radio" name="activation_type_choice" value="fixed" class="toggle-input" checked onchange="updateAddUserModalUI()">
                                <div class="toggle-option">Fixed Date</div>
                            </label>
                            <label>
                                <input type="radio" name="activation_type_choice" value="flexible" class="toggle-input" onchange="updateAddUserModalUI()">
                                <div class="toggle-option">Flexible</div>
                            </label>
                        </div>
                        <div id="expiryDateContainer" class="mt-3">
                            <input type="text" name="expiry_date" id="add_expiry_date" class="compact-input bg-tarikh" placeholder="Select a date...">
                            <input type="checkbox" id="useFlexibleDaysCheckbox" name="use_flexible_days" class="hidden">
                        </div>
                        <div id="pendingDaysContainer" class="hidden mt-3">
                            <input type="number" name="pending_activation_days_form" id="pending_activation_days_form" placeholder="Usage Days (e.g., 30)" min="1" max="365" class="compact-input">
                        </div>
                    </div>
                </div>











                <div class="compact-card mt-3" id="protocolsContainerAdd" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
    <h3 class="compact-card-title mb-2 text-sm"><i class="fas fa-network-wired text-green-400"></i> Protocols Access</h3>

    <div class="grid grid-cols-2 gap-3" id="protocolCheckboxesAdd">
        <label class="cursor-pointer relative group protocol-item-add" data-protocol="openvpn">
            <input type="checkbox" name="enable_openvpn" class="peer sr-only" checked>
            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center" style="pointer-events: none;">
                <div class="flex items-center w-full gap-2">
                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(139,92,246,0.2); color: #a78bfa;">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <div class="font-bold text-gray-200 text-xs">OpenVPN</div>
                        <div class="text-[9px] text-gray-400">Default VPN</div>
                    </div>
                </div>
            </div>
        </label>

        <label class="cursor-pointer relative group protocol-item-add" data-protocol="l2tp">
            <input type="checkbox" name="enable_l2tp" class="peer sr-only" onchange="toggleProtocolInput(this, 'l2tpInputParams')">
            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                <div class="flex items-center w-full gap-2">
                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(59,130,246,0.2); color: #60a5fa;">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div>
                        <div class="font-bold text-gray-200 text-xs">L2TP / IPsec</div>
                        <div class="text-[9px] text-gray-400">Native VPN</div>
                    </div>
                </div>
                <div id="l2tpInputParams" class="hidden mt-0 pt-0 w-full animate-fade-in-down">
                    <input type="text" name="l2tp_password" class="compact-input w-full text-[10px] py-1 px-2 h-7" placeholder="Password (Optional)" onclick="event.stopPropagation();">
                </div>
            </div>
        </label>

        <label class="cursor-pointer relative group protocol-item-add" data-protocol="cisco">
            <input type="checkbox" name="enable_cisco" class="peer sr-only" onchange="toggleProtocolInput(this, 'ciscoInputParams')">
            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                <div class="flex items-center w-full gap-2">
                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(6,182,212,0.2); color: #22d3ee;">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div>
                        <div class="font-bold text-gray-200 text-xs">Cisco</div>
                        <div class="text-[9px] text-gray-400">AnyConnect</div>
                    </div>
                </div>
                <div id="ciscoInputParams" class="hidden mt-0 pt-0 w-full animate-fade-in-down">
                    <input type="text" name="cisco_password" class="compact-input w-full text-[10px] py-1 px-2 h-7" placeholder="Password (Optional)" onclick="event.stopPropagation();">
                </div>
            </div>
        </label>

        <div class="cursor-pointer relative group protocol-item-add" data-protocol="wg1" onclick="openWgPicker(wgPickerCtxAdd)">
            <input type="checkbox" name="enable_wg1" id="enable_wg1_add" class="peer sr-only">
            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                <div class="flex items-center w-full gap-2">
                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors flex-shrink-0" style="background-color: rgba(74,222,128,0.2); color: #4ade80;">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <div class="min-w-0 flex-grow">
                        <div class="font-bold text-gray-200 text-xs">WireGuard</div>
                        <div class="text-xs text-gray-400 truncate" id="wgSummaryAdd">Not selected</div>
                    </div>
                </div>
                <div id="wgInstancesHiddenAdd" class="hidden"></div>
            </div>
        </div>

        <div class="cursor-pointer relative group protocol-item-add" data-protocol="singbox" onclick="openSingboxPicker(singboxPickerCtxAdd)">
            <input type="checkbox" name="enable_singbox" id="enable_singbox_add" class="peer sr-only">
            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                <div class="flex items-center w-full gap-2">
                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors flex-shrink-0" style="background-color: rgba(251,191,36,0.2); color: #fbbf24;">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="min-w-0 flex-grow">
                        <div class="font-bold text-gray-200 text-xs">sing-box</div>
                        <div class="text-xs text-gray-400 truncate" id="singboxSummaryAdd">Not selected</div>
                    </div>
                </div>
                <div id="singboxInboundsHiddenAdd" class="hidden"></div>
            </div>
        </div>
    </div>
</div>

                <div class="compact-card" style="--stat-rgb: 250,204,21; --stat-rgb-light: 202,138,4;">
                    <h3 class="compact-card-title"><i class="fas fa-cogs text-yellow-400"></i> Limits & Access</h3>
                    <div class="grid grid-cols-1 {% if license_with_nodes %}md:grid-cols-2{% endif %} gap-4">
                        <div class="space-y-4">
                            <div class="compact-label-row flex items-center gap-3">
                                <label for="max_clients_add" class="compact-label">Connections</label>
                                <input type="number" name="max_clients" id="max_clients_add" min="1" class="compact-input" value="1">
                            </div>
                            <div class="compact-label-row flex items-center gap-3">
                                <label for="data_limit_add" class="compact-label">Data Limit</label>
                                <div class="flex flex-grow gap-1">
                                    <input type="number" id="data_limit_add" name="data_limit" min="0.01" step="0.01" class="compact-input rounded-r-none" style="flex: 1 1 0%; min-width: 0;" placeholder="Unlimited">
                                    <select name="data_limit_unit" id="data_limit_unit_add" class="compact-input rounded-l-none bg-gray-700 border-l-0 text-xs" style="flex: 0 0 auto; width: 4.2rem; padding-left: 0.4rem; padding-right: 1.2rem;">
                                        <option>GB</option>
                                        <option>MB</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        {% if license_with_nodes %}
                        <div class="flex flex-col">
                            <div class="flex justify-between items-center mb-2">
                                <label class="compact-label">Node Access</label>
                                <label class="flex items-center cursor-pointer hover:text-white transition-colors">
                                    <input type="checkbox" id="selectAllNodesAdd" onchange="toggleAllNodes(this, 'addNodesContainer')" class="w-3 h-3 rounded bg-gray-700 border-gray-500 text-blue-600 focus:ring-0 focus:ring-offset-0 mr-1.5">
                                    <span class="text-[10px] text-gray-400 font-medium">Select All</span>
                                </label>
                            </div>
                            <div class="bg-gray-900/50 p-2 rounded-lg h-full max-h-24 overflow-y-auto custom-scroll border border-gray-600" id="addNodesContainer"></div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="mt-4">
                        <label for="add_user_notes" class="compact-label mb-2">Notes</label>
                        <input type="text" name="notes" id="add_user_notes" class="compact-input" placeholder="Optional notes for this user...">
                    </div>
                </div>
            </div>

            <div class="flex-shrink-0 pt-4 mt-4 border-t border-gray-700">
                <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base">
                    <i class="fas fa-check mr-2"></i> Create User(s)
                </button>
            </div>
        </form>
    </div>
</div>















    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-4 lg:items-start">

        {% if user_role == 'main_admin' %}
<div class="flex flex-col gap-6">
<div id="service-control-pod" class="bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-5 rounded-2xl shadow-lg relative overflow-hidden">
    <div class="system-status-glow"></div>
    <h3 class="text-base font-bold mb-4 text-white flex items-center gap-3 relative">
        <span class="system-status-icon-badge text-blue-400 bg-blue-900">
            <i class="fas fa-cogs"></i>
        </span>
        Service Controls
    </h3>

    <div class="grid grid-cols-2 gap-2.5 relative">

        <div class="service-row" style="--stat-rgb: 59,130,246; --stat-rgb-light: 37,99,235;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-shield-alt"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="openvpn-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">OpenVPN</span>
                </div>
            </div>
            <div id="openvpn-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('openvpn','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="openvpn-stop-btn" onclick="controlService('openvpn','stop')" class="service-row-btn text-red-400">
                    <i class="fas fa-stop fa-sm"></i>
                </button>
                <button id="openvpn-start-btn" onclick="controlService('openvpn','start')" class="service-row-btn text-green-400 hidden">
                    <i class="fas fa-play fa-xs"></i>
                </button>
            </div>
        </div>

        {% if has_cisco %}
        <div class="service-row" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-globe"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="cisco-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">Cisco</span>
                </div>
            </div>
            <div id="cisco-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('cisco','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="cisco-stop-btn" onclick="controlService('cisco','stop')" class="service-row-btn text-red-400">
                    <i class="fas fa-stop fa-sm"></i>
                </button>
                <button id="cisco-start-btn" onclick="controlService('cisco','start')" class="service-row-btn text-green-400 hidden">
                    <i class="fas fa-play fa-xs"></i>
                </button>
            </div>
        </div>
        {% endif %}

        {% if has_l2tp %}
        <div class="service-row" style="--stat-rgb: 167,139,250; --stat-rgb-light: 124,58,237;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-link"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="l2tp-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">L2TP</span>
                    <button id="l2tp-update-btn" onclick="updateL2tpConfig()"
                            title="A compatibility update is available (broader IPsec proposals for MikroTik/Windows/newer Android + NAT fix). Existing users and the PSK are not touched."
                            class="hidden items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full animate-pulse flex-shrink-0"
                            style="background-color: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.45);">
                        <i class="fas fa-arrow-up fa-xs"></i> Update
                    </button>
                </div>
            </div>
            <div id="l2tp-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('l2tp','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="l2tp-stop-btn" onclick="controlService('l2tp','stop')" class="service-row-btn text-red-400">
                    <i class="fas fa-stop fa-sm"></i>
                </button>
                <button id="l2tp-start-btn" onclick="controlService('l2tp','start')" class="service-row-btn text-green-400 hidden">
                    <i class="fas fa-play fa-xs"></i>
                </button>
            </div>
        </div>
        {% endif %}

        {% if has_wireguard %}
        <div class="service-row" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-network-wired"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="wireguard-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">WireGuard</span>
                </div>
            </div>
            <div id="wireguard-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('wireguard','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="wireguard-stop-btn" onclick="controlService('wireguard','stop')" class="service-row-btn text-red-400">
                    <i class="fas fa-stop fa-sm"></i>
                </button>
                <button id="wireguard-start-btn" onclick="controlService('wireguard','start')" class="service-row-btn text-green-400">
                    <i class="fas fa-play fa-xs"></i>
                </button>
            </div>
        </div>
        {% endif %}

        {% if has_singbox %}
        <div class="service-row" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-bolt"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="singbox-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">sing-box</span>
                    <button id="singbox-update-btn" onclick="updateSingboxLogrotate()"
                            title="A maintenance update is available (automatic hourly log-size capping, prevents the panel from freezing under a huge access.log). Nothing about your inbounds/users is touched."
                            class="hidden items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full animate-pulse flex-shrink-0"
                            style="background-color: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.45);">
                        <i class="fas fa-arrow-up fa-xs"></i> Update
                    </button>
                </div>
            </div>
            <div id="singbox-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('singbox','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
                <button id="singbox-stop-btn" onclick="controlService('singbox','stop')" class="service-row-btn text-red-400">
                    <i class="fas fa-stop fa-sm"></i>
                </button>
                <button id="singbox-start-btn" onclick="controlService('singbox','start')" class="service-row-btn text-green-400 hidden">
                    <i class="fas fa-play fa-xs"></i>
                </button>
            </div>
        </div>
        {% endif %}

        <div class="service-row" style="--stat-rgb: 148,163,184; --stat-rgb-light: 71,85,105;">
            <div class="flex items-center gap-2 min-w-0">
                <div class="service-row-icon"><i class="fas fa-server"></i></div>
                <div class="flex items-center gap-1.5 min-w-0">
                    <span id="panel-status-indicator" class="h-2 w-2 rounded-full bg-gray-500 flex-shrink-0"></span>
                    <span class="text-sm font-semibold text-white truncate">Panel</span>
                </div>
            </div>
            <div id="panel-controls" class="flex items-center gap-1 flex-shrink-0">
                <button onclick="controlService('panel','restart')" class="service-row-btn text-blue-300">
                    <i class="fas fa-sync-alt fa-sm"></i>
                </button>
            </div>
        </div>

    </div>
</div>

<div class="bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-5 rounded-2xl shadow-lg relative overflow-hidden">
    <div class="system-status-glow"></div>
    <h3 class="text-base font-bold mb-4 text-white flex items-center gap-3 relative">
        <span class="system-status-icon-badge text-blue-400 bg-blue-900">
            <i class="fas fa-plus"></i>
        </span>
        Create New
    </h3>
    <div class="grid grid-cols-2 gap-2.5 relative">
        <button onclick="openAddUserModal()" class="action-tile" style="--stat-rgb: 167,139,250; --stat-rgb-light: 109,40,217;">
            <span class="action-tile-icon"><i class="fas fa-user-plus"></i></span>
            <span class="action-tile-label">Add User</span>
        </button>
        {% if license_with_sub_admins %}
        <button onclick="window.location.href='{{ url_for('sub_admins_management') }}'" class="action-tile" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
            <span class="action-tile-icon"><i class="fas fa-users-cog"></i></span>
            <span class="action-tile-label">Add Admin Reseller</span>
        </button>
        {% endif %}
    </div>
</div>
</div>
{% endif %}


        {% if user_role == 'main_admin' %}
        <div class="lg:col-span-2 flex flex-col gap-6">
        {% endif %}
        <div class="{% if user_role != 'main_admin' %}lg:col-span-3{% endif %} bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-6 rounded-2xl shadow-lg relative overflow-hidden">
            <div class="system-status-glow"></div>
            <div class="flex flex-col gap-y-6 relative">
                <div class="w-full">
                    <h3 class="text-base font-bold mb-3 flex items-center gap-3 text-white">
                        <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                            <i class="fas fa-search"></i>
                        </span>
                        Search Users
                    </h3>
                    <form id="searchForm" method="GET" action="{{ url_for('index_with_path') }}">
                        <div class="search-input-wrap">
                             <input type="hidden" name="status" value="{{ status or 'all' }}">
                            {% if selected_admin_id != 'main' %}
                                <input type="hidden" name="view_as_admin" value="{{ selected_admin_id }}">
                            {% endif %}
                            <i class="fas fa-search search-input-icon"></i>
                            <input type="text" id="searchInput" name="search"
                                   placeholder="Search by username or notes..."
                                   class="search-input"
                                   value="{{ search or '' }}">
                        </div>
                    </form>
                </div>
                <div class="w-full">
                    <h3 class="text-base font-bold mb-3 flex items-center gap-3 text-white">
                        <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                            <i class="fas fa-filter"></i>
                        </span>
                        Filter by Status
                    </h3>
                    <div id="filterControls" class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
                        <div class="filter-card-label" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                            <input type="radio" name="status_filter" value="active" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-user-check"></i></div>
                            <span class="filter-text">Active</span>
                        </div>
                        <div class="filter-card-label" style="--stat-rgb: 251,146,60; --stat-rgb-light: 234,88,12;">
                            <input type="radio" name="status_filter" value="data_limited" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-database"></i></div>
                            <span class="filter-text">Limited</span>
                        </div>
                        <div class="filter-card-label" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
                            <input type="radio" name="status_filter" value="disabled" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-user-slash"></i></div>
                            <span class="filter-text">Disabled</span>
                        </div>
                        <div class="filter-card-label" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                            <input type="radio" name="status_filter" value="online" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-wifi"></i></div>
                            <span class="filter-text">Online</span>
                        </div>
                        <div class="filter-card-label" style="--stat-rgb: 250,204,21; --stat-rgb-light: 202,138,4;">
                            <input type="radio" name="status_filter" value="near_data_limit" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-battery-quarter"></i></div>
                            <span class="filter-text">Near Limit</span>
                        </div>
                        <div class="filter-card-label" style="--stat-rgb: 232,121,249; --stat-rgb-light: 162,28,175;">
                            <input type="radio" name="status_filter" value="near_expiry" class="filter-radio absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                            <div class="filter-icon"><i class="fas fa-hourglass-half"></i></div>
                            <span class="filter-text">Near Expiry</span>
                        </div>
                    </div>
                </div>
            </div>

            {% if user_role != 'main_admin' %}
            <div class="mt-6 pt-5 border-t border-gray-700 relative">
                <h3 class="text-base font-bold mb-3 flex items-center gap-3 text-white">
                    <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                        <i class="fas fa-bolt"></i>
                    </span>
                    Quick Actions
                </h3>

                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5 relative">

                    <button onclick="openResetAllConfirmModal()" class="action-tile" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
                        <span class="action-tile-icon"><i class="fas fa-sync-alt"></i></span>
                        <span class="action-tile-label">Reset All Traffic</span>
                    </button>

                    <button onclick="openBulkActionsModal()" class="action-tile" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
                        <span class="action-tile-icon"><i class="fas fa-bolt"></i></span>
                        <span class="action-tile-label">Bulk Actions</span>
                    </button>

                    <button onclick="openBulkEditModal()" class="action-tile" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                        <span class="action-tile-icon"><i class="fas fa-edit"></i></span>
                        <span class="action-tile-label">Bulk Edit Users</span>
                    </button>

                    <button id="openUserLogsModalBtn" class="action-tile" style="--stat-rgb: 232,121,249; --stat-rgb-light: 162,28,175;">
                        <span class="action-tile-icon"><i class="fas fa-history"></i></span>
                        <span class="action-tile-label">Audit Logs</span>
                    </button>

                </div>
            </div>
            {% endif %}
        </div>

        {% if user_role == 'main_admin' %}
        <div class="bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-5 rounded-2xl shadow-lg relative overflow-hidden">
            <div class="system-status-glow"></div>
            <h3 class="text-base font-bold mb-4 text-white flex items-center gap-3 relative">
                <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                    <i class="fas fa-bolt"></i>
                </span>
                Quick Actions
            </h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5 relative">
                <button onclick="openResetAllConfirmModal()" class="action-tile" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
                    <span class="action-tile-icon"><i class="fas fa-sync-alt"></i></span>
                    <span class="action-tile-label">Reset All Traffic</span>
                </button>

                <button onclick="openBulkActionsModal()" class="action-tile" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;">
                    <span class="action-tile-icon"><i class="fas fa-bolt"></i></span>
                    <span class="action-tile-label">Bulk Actions</span>
                </button>

                <button onclick="openBulkEditModal()" class="action-tile" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                    <span class="action-tile-icon"><i class="fas fa-edit"></i></span>
                    <span class="action-tile-label">Bulk Edit Users</span>
                </button>

                <button id="openUserLogsModalBtn" class="action-tile" style="--stat-rgb: 232,121,249; --stat-rgb-light: 162,28,175;">
                    <span class="action-tile-icon"><i class="fas fa-history"></i></span>
                    <span class="action-tile-label">Audit Logs</span>
                </button>
            </div>
        </div>
        </div>
        {% endif %}

    </div>

<div id="resetAllConfirmModal" class="fixed inset-0 bg-black bg-opacity-70 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md border border-gray-700">
        <h2 class="text-xl font-bold mb-4 text-white">Confirm Reset All</h2>
        <p class="mb-6 text-gray-300" id="resetAllConfirmText">Are you sure?</p>
        <div class="flex gap-4">
            <button onclick="closeResetAllConfirmModal()" class="flex-1 bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Cancel</button>
            <button id="confirmResetAllBtn" onclick="confirmResetAll()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">Yes, Reset</button>
        </div>
    </div>
</div>

<button id="scroll-to-top-btn" title="Go to top"
        class="fixed z-40 bottom-8 right-8 h-14 w-14 bg-gray-700/80 backdrop-blur-sm rounded-full text-white shadow-lg flex items-center justify-center transform transition-all duration-300 ease-in-out opacity-0 translate-y-10 focus:outline-none hover:bg-gray-600">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
    </svg>
</button>

    <div class="bg-gray-800 bg-opacity-70 backdrop-blur-xl border border-gray-700 p-6 rounded-2xl shadow-lg relative overflow-hidden">
        <div class="system-status-glow"></div>
        <div class="flex flex-col sm:flex-row justify-between items-center mb-4 pb-4 border-b border-gray-700 gap-y-4 relative">
            <div class="flex items-center gap-3 flex-wrap">
                <h3 class="text-xl font-bold text-white flex items-center gap-3">
                    <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                        <i class="fas fa-users"></i>
                    </span>
                    User List
                </h3>

                {% if user_role == 'sub_admin' %}
                <button type="button" onclick="openAddUserModal()" class="action-tile" style="--stat-rgb: 167,139,250; --stat-rgb-light: 109,40,217; width: auto; flex-shrink: 0;">
                    <span class="action-tile-icon"><i class="fas fa-user-plus"></i></span>
                    <span class="action-tile-label">Add User</span>
                </button>
                {% endif %}
            </div>

            <div id="protocolFilterControls" class="flex items-center gap-2 flex-wrap">
                <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 59,130,246; --stat-rgb-light: 37,99,235;" title="OpenVPN">
                    <input type="checkbox" name="protocol_filter" value="openvpn" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <i class="fas fa-shield-alt filter-icon"></i>
                </label>
                <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 167,139,250; --stat-rgb-light: 124,58,237;" title="L2TP">
                    <input type="checkbox" name="protocol_filter" value="l2tp" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <i class="fas fa-key filter-icon"></i>
                </label>
                <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;" title="Cisco">
                    <input type="checkbox" name="protocol_filter" value="cisco" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <i class="fas fa-globe filter-icon"></i>
                </label>
                <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;" title="WireGuard">
                    <input type="checkbox" name="protocol_filter" value="wireguard" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <i class="fas fa-network-wired filter-icon"></i>
                </label>
                <label class="filter-card-label protocol-icon-btn" style="--stat-rgb: 251,191,36; --stat-rgb-light: 217,119,6;" title="sing-box">
                    <input type="checkbox" name="protocol_filter" value="singbox" class="protocol-filter-input absolute w-full h-full inset-0 opacity-0 cursor-pointer z-10">
                    <i class="fas fa-bolt filter-icon"></i>
                </label>
            </div>

            {% if user_role == 'main_admin' and all_sub_admins %}
                <div class="flex items-center gap-3 w-full sm:w-auto">
                    <label for="adminSelector" class="text-sm font-medium text-gray-300 flex items-center gap-2 flex-shrink-0">
                        <i class="fas fa-eye text-blue-400"></i>Viewing Users For:
                    </label>
                    <div class="relative w-full md:w-auto">
                        <select id="adminSelector" class="eyl-select w-full md:w-auto">
                            <option value="main" {% if selected_admin_id == 'main' %}selected{% endif %}>
                                My Users (Main Admin)
                            </option>
                            {% for sub_admin in all_sub_admins %}
                                <option value="{{ sub_admin.id }}" {% if selected_admin_id|string == sub_admin.id|string %}selected{% endif %}>
                                    {{ sub_admin.username }}
                                </option>
                            {% endfor %}
                        </select>
                        <i class="fas fa-chevron-down eyl-select-caret"></i>
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="2xl:hidden eyl-toolbar flex items-center gap-3 mb-4 p-3 relative">
            <label for="mobileSortSelect" class="text-sm font-medium text-gray-400 flex-shrink-0">Sort by:</label>
            <div class="relative w-full">
                <select id="mobileSortSelect" class="eyl-select">
                    <option value="username">Username</option>
                    <option value="expiryDate">Expiry Date</option>
                    <option value="status">Status</option>
                    <option value="connection">Connection</option>
                    <option value="traffic">Traffic</option>
                </select>
                <i class="fas fa-chevron-down eyl-select-caret"></i>
            </div>
            <button id="mobileSortDirection" class="user-action-btn flex-shrink-0">
                <i class="fas fa-arrow-up" title="Ascending"></i>
            </button>
        </div>
        
        <div class="2xl:hidden grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-2" id="userListMobile">
            {% include '_user_list_mobile_partial.html' %}
        </div>

        <div class="hidden 2xl:block">
            <table class="w-full min-w-max">
                <thead>
                    <tr class="user-table-head">
                        <th class="user-table-th sortable-header" data-sort-key="username">
                            <span class="user-table-th-inner">Username <i class="fas fa-sort"></i></span>
                        </th>
                        <th class="user-table-th sortable-header" data-sort-key="expiryDate">
                            <span class="user-table-th-inner">Expiry Date <i class="fas fa-sort"></i></span>
                        </th>
                        <th class="user-table-th sortable-header" data-sort-key="status">
                            <span class="user-table-th-inner">Status <i class="fas fa-sort"></i></span>
                        </th>
                        <th class="user-table-th sortable-header" data-sort-key="connection">
                            <span class="user-table-th-inner">Connection <i class="fas fa-sort"></i></span>
                        </th>
                        <th class="user-table-th">Configs</th>
                        <th class="user-table-th">Actions</th>
                        <th class="user-table-th sortable-header" data-sort-key="traffic">
                            <span class="user-table-th-inner">Traffic Usage <i class="fas fa-sort"></i></span>
                        </th>
                    </tr>
                </thead>
                <tbody id="userListDesktop">
                    {% include '_user_list_desktop_partial.html' %}
                </tbody>
            </table>
        </div>
        
    <div id="paginationContainer">
        {% include '_pagination_partial.html' %}
    </div>
</div>
</div>













<div id="editModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="relative bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-3xl border border-gray-700 flex flex-col" style="height:95vh; max-height:720px; min-height:0;">
        <div id="editModalLoadingOverlay" class="hidden absolute inset-0 bg-gray-800 rounded-2xl flex items-center justify-center z-10">
            <i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i>
        </div>
        <div class="flex-shrink-0 flex justify-between items-center pb-4 border-b border-gray-700">
            <h2 id="editUserModalTitle" class="text-xl font-bold text-white flex items-center gap-3">
                <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                    <i class="fas fa-edit"></i>
                </span>
                <span id="editUserModalTitleText">Edit User</span>
            </h2>
            <button onclick="closeEditModal()" class="text-gray-400 hover:text-white transition-colors">
                <i class="fas fa-times fa-lg"></i>
            </button>
        </div>
        <form id="editForm" method="post" class="flex-grow min-h-0 flex flex-col overflow-hidden">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div id="editFormScrollContent" class="flex-grow min-h-0 custom-scroll space-y-5" style="overflow-y: auto; padding: 1.1rem 0.5rem 0.5rem 0.5rem;">

                <div class="compact-card" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                    <h3 class="compact-card-title"><i class="fas fa-clock text-blue-400"></i> Activation Type</h3>
                    <div id="editActivationToggleGroup" class="toggle-group">
                        <label>
                            <input type="radio" name="activation_type_choice" value="fixed" class="toggle-input" checked onchange="updateEditModalUI()">
                            <div class="toggle-option">Fixed Date</div>
                        </label>
                        <label>
                            <input type="radio" name="activation_type_choice" value="flexible" class="toggle-input" onchange="updateEditModalUI()">
                            <div class="toggle-option">Flexible</div>
                        </label>
                    </div>
                    <div id="editActivationInfo" class="text-xs text-yellow-400 mt-2 hidden p-2 bg-yellow-900/20 rounded-md"></div>
                    <div id="editExpiryDateContainer" class="mt-3">
                        <input type="text" name="expiry_date" id="edit_expiry_date" class="compact-input bg-tarikh">
                        <input type="checkbox" id="editUseFlexibleDaysCheckbox" name="edit_use_flexible_days" class="hidden">
                    </div>
                    <div id="editPendingDaysContainer" class="hidden mt-3">
                        <input type="number" name="edit_pending_activation_days_form" id="edit_pending_activation_days_form" placeholder="Usage Days (e.g., 30)" min="1" max="365" class="compact-input" oninput="document.getElementById('edit_pending_days_touched').value='1'">
                        <input type="hidden" name="edit_pending_days_touched" id="edit_pending_days_touched" value="0">
                    </div>
                </div>

                <div class="compact-card mt-3" id="protocolsContainerEdit" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                    <h3 class="compact-card-title mb-2 text-sm"><i class="fas fa-network-wired text-green-400"></i> Protocols Access</h3>
                    <div class="grid grid-cols-2 gap-3" id="protocolCheckboxesEdit">
                        <label class="cursor-pointer relative group protocol-item-edit" data-protocol="openvpn">
                            <input type="checkbox" id="edit_enable_openvpn" name="enable_openvpn" class="peer sr-only">
                            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center" style="pointer-events: none;">
                                <div class="flex items-center w-full gap-2">
                                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(139,92,246,0.2); color: #a78bfa;">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-200 text-xs">OpenVPN</div>
                                        <div class="text-[9px] text-gray-400">Default VPN</div>
                                    </div>
                                </div>
                            </div>
                        </label>
                        <label class="cursor-pointer relative group protocol-item-edit" data-protocol="l2tp">
                            <input type="checkbox" id="edit_enable_l2tp" name="enable_l2tp" class="peer sr-only" onchange="toggleProtocolInput(this, 'edit_l2tpInputParams')">
                            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                                <div class="flex items-center w-full gap-2">
                                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(59,130,246,0.2); color: #60a5fa;">
                                        <i class="fas fa-layer-group"></i>
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-200 text-xs">L2TP / IPsec</div>
                                        <div class="text-[9px] text-gray-400">Native VPN</div>
                                    </div>
                                </div>
                                <div id="edit_l2tpInputParams" class="hidden mt-0 pt-0 w-full animate-fade-in-down">
                                    <input type="text" id="edit_l2tp_password" name="l2tp_password" class="compact-input w-full text-[10px] py-1 px-2 h-7" placeholder="Password (Optional)" onclick="event.stopPropagation();">
                                </div>
                            </div>
                        </label>
                        <label class="cursor-pointer relative group protocol-item-edit" data-protocol="cisco">
                            <input type="checkbox" id="edit_enable_cisco" name="enable_cisco" class="peer sr-only" onchange="toggleProtocolInput(this, 'edit_ciscoInputParams')">
                            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                                <div class="flex items-center w-full gap-2">
                                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors" style="background-color: rgba(6,182,212,0.2); color: #22d3ee;">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-200 text-xs">Cisco</div>
                                        <div class="text-[9px] text-gray-400">AnyConnect</div>
                                    </div>
                                </div>
                                <div id="edit_ciscoInputParams" class="hidden mt-0 pt-0 w-full animate-fade-in-down">
                                    <input type="text" id="edit_cisco_password" name="cisco_password" class="compact-input w-full text-[10px] py-1 px-2 h-7" placeholder="Password (Optional)" onclick="event.stopPropagation();">
                                </div>
                            </div>
                        </label>
                        <div class="cursor-pointer relative group protocol-item-edit" data-protocol="wg1" onclick="openWgPicker(wgPickerCtxEdit)">
                            <input type="checkbox" id="edit_enable_wg1" name="enable_wg1" class="peer sr-only">
                            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                                <div class="flex items-center w-full gap-2">
                                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors flex-shrink-0" style="background-color: rgba(74,222,128,0.2); color: #4ade80;">
                                        <i class="fas fa-network-wired"></i>
                                    </div>
                                    <div class="min-w-0 flex-grow">
                                        <div class="font-bold text-gray-200 text-xs">WireGuard</div>
                                        <div class="text-xs text-gray-400 truncate" id="wgSummaryEdit">Not selected</div>
                                    </div>
                                </div>
                                <div id="wgInstancesHiddenEdit" class="hidden"></div>
                            </div>
                        </div>
                        <div class="cursor-pointer relative group protocol-item-edit" data-protocol="singbox" onclick="openSingboxPicker(singboxPickerCtxEdit)">
                            <input type="checkbox" id="edit_enable_singbox" name="enable_singbox" class="peer sr-only">
                            <div class="server-select-card p-2.5 transition-all duration-200 h-full flex flex-col justify-center">
                                <div class="flex items-center w-full gap-2">
                                    <div class="icon-box w-8 h-8 rounded-md flex items-center justify-center text-xs transition-colors flex-shrink-0" style="background-color: rgba(251,191,36,0.2); color: #fbbf24;">
                                        <i class="fas fa-bolt"></i>
                                    </div>
                                    <div class="min-w-0 flex-grow">
                                        <div class="font-bold text-gray-200 text-xs">sing-box</div>
                                        <div class="text-xs text-gray-400 truncate" id="singboxSummaryEdit">Not selected</div>
                                    </div>
                                </div>
                                <div id="singboxInboundsHiddenEdit" class="hidden"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="compact-card" style="--stat-rgb: 250,204,21; --stat-rgb-light: 202,138,4;">
                    <h3 class="compact-card-title"><i class="fas fa-cogs text-yellow-400"></i> Limits & Access</h3>
                    <div class="grid grid-cols-1 {% if license_with_nodes %}md:grid-cols-2{% endif %} gap-4">
                        <div class="space-y-4">
                            <div class="compact-label-row flex items-center gap-3">
                                <label for="edit_max_clients" class="compact-label">Connections</label>
                                <input type="number" name="max_clients" id="edit_max_clients" min="1" class="compact-input" value="1">
                            </div>
                            <div class="compact-label-row flex items-center gap-3">
                                <div class="flex flex-col leading-tight" style="min-width: 6.5rem; flex-shrink: 0;">
                                    <label for="edit_data_limit" class="compact-label">Data Limit</label>
                                    <span id="edit_data_limit_used_badge" class="text-[12px] text-gray-400 font-medium mt-0.5" style="
    font-size: 14px;
">Used: 0 B</span>
                                </div>
                                <div class="flex flex-grow gap-1">
                                    <input type="number" id="edit_data_limit" name="data_limit" min="0.01" step="0.01" class="compact-input rounded-r-none" style="flex: 1 1 0%; min-width: 0;" placeholder="Unlimited">
                                    <select name="edit_data_limit_unit" id="edit_data_limit_unit" class="compact-input rounded-l-none bg-gray-700 border-l-0 text-xs" style="flex: 0 0 auto; width: 4.2rem; padding-left: 0.4rem; padding-right: 1.2rem;">
                                        <option value="GB">GB</option>
                                        <option value="MB">MB</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        {% if license_with_nodes %}
                        <div class="flex flex-col">
                            <div class="flex justify-between items-center mb-2">
                                <label class="compact-label">Node Access</label>
                                <label class="flex items-center cursor-pointer hover:text-white transition-colors">
                                    <input type="checkbox" id="selectAllNodesEdit" onchange="toggleAllNodes(this, 'editNodesContainer')" class="w-3 h-3 rounded bg-gray-700 border-gray-500 text-blue-600 focus:ring-0 focus:ring-offset-0 mr-1.5">
                                    <span class="text-[10px] text-gray-400 font-medium">Select All</span>
                                </label>
                            </div>
                            <div class="bg-gray-900/50 p-2 rounded-lg h-full max-h-24 overflow-y-auto custom-scroll border border-gray-600" id="editNodesContainer"></div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="mt-4">
                        <label for="edit_user_notes" class="compact-label mb-2">Notes</label>
                        <input type="text" name="notes" id="edit_user_notes" class="compact-input" placeholder="Optional notes for this user...">
                    </div>
                </div>

                <div class="compact-card" style="--stat-rgb: 248,113,113; --stat-rgb-light: 220,38,38;">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="compact-card-title mb-0"><i class="fas fa-bolt text-red-400"></i> User Actions</h3>
                        <div class="flex gap-2">
                            <button type="button" onclick="openRevokeConfirmModal()" class="text-xs bg-orange-500/20 text-orange-400 px-3 py-1 rounded-md hover:bg-orange-500/40 transition-colors border border-orange-500/50">
                                <i class="fas fa-shield-virus fa-sm mr-1"></i> Revoke Cert
                            </button>
                            <button type="button" onclick="resetUserTraffic()" class="text-xs bg-red-500/20 text-red-400 px-3 py-1 rounded-md hover:bg-red-500/40 transition-colors border border-red-500/50">
                                <i class="fas fa-sync-alt fa-sm mr-1"></i> Reset Traffic
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-3 text-center">
                        <div class="edit-traffic-stat" style="--stat-rgb: 96,165,250; --stat-rgb-light: 37,99,235;">
                            <i class="fas fa-arrow-down"></i>
                            <div class="edit-traffic-stat-label">Download</div>
                            <div id="edit-upload" class="edit-traffic-stat-value">0 B</div>
                        </div>
                        <div class="edit-traffic-stat" style="--stat-rgb: 74,222,128; --stat-rgb-light: 22,163,74;">
                            <i class="fas fa-arrow-up"></i>
                            <div class="edit-traffic-stat-label">Upload</div>
                            <div id="edit-download" class="edit-traffic-stat-value">0 B</div>
                        </div>
                        <div class="edit-traffic-stat" style="--stat-rgb: 192,132,252; --stat-rgb-light: 147,51,234;">
                            <i class="fas fa-database"></i>
                            <div class="edit-traffic-stat-label">Total</div>
                            <div id="edit-total" class="edit-traffic-stat-value">0 B</div>
                        </div>
                    </div>
                </div>

                <div id="hwidDevicesCard" class="compact-card hidden" style="--stat-rgb: 45,212,191; --stat-rgb-light: 13,148,136;">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="compact-card-title mb-0">
                            <i class="fas fa-mobile-alt text-teal-400"></i> HWID Devices
                            <span id="hwidCountBadge" class="hwid-count-badge">0 / 0</span>
                        </h3>
                        <button type="button" onclick="openResetHwidsConfirm()" class="text-xs bg-red-500/20 text-red-400 px-3 py-1 rounded-md hover:bg-red-500/40 transition-colors border border-red-500/50">
                            <i class="fas fa-trash-alt fa-sm mr-1"></i> Reset All
                        </button>
                    </div>
                    <div id="hwidDevicesList" class="space-y-2 max-h-48 overflow-y-auto custom-scroll pr-1">
                        <div class="hwid-empty-state">
                            <i class="fas fa-mobile-alt"></i>
                            <span>No devices registered yet</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex-shrink-0 pt-4 mt-2 border-t border-gray-700">
                <button type="submit" id="editFormSubmitBtn" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-semibold px-4 py-3 rounded-lg shadow-sm text-base">
                    <i class="fas fa-save mr-2"></i> Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
	
	
	
	
	
	
	
	
	
	
	
</div>







<div id="resetConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Confirm Reset Traffic</h2>
            <p class="mb-6" id="resetConfirmText">Are you sure you want to reset traffic for this user?</p>
            
            <div class="flex gap-4">
                <button onclick="confirmResetTraffic()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Reset
                </button>
                <button onclick="closeResetConfirmModal()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="deleteHwidConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Remove Device</h2>
            <p class="mb-6">Remove this device? It will be able to add the subscription again as a new device (subject to the device limit).</p>
            <div class="flex gap-4">
                <button onclick="confirmDeleteHwid()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <i class="fas fa-trash-alt"></i> Remove
                </button>
                <button onclick="closeDeleteHwidConfirm()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <i class="fas fa-times"></i> Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="resetHwidsConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Reset All Devices</h2>
            <p class="mb-6">Remove <strong>all</strong> registered devices for this user? Every device will need to re-add the subscription.</p>
            <div class="flex gap-4">
                <button onclick="confirmResetHwids()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <i class="fas fa-trash-alt"></i> Reset All
                </button>
                <button onclick="closeResetHwidsConfirm()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <i class="fas fa-times"></i> Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="deleteConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Confirm Delete</h2>
            <p class="mb-6" id="deleteConfirmText">Are you sure you want to delete this user?</p>
            
            <div class="flex gap-4">
                <button onclick="confirmDelete()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Delete
                </button>
                <button onclick="closeDeleteConfirmModal()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>





<div id="downloadOptionsModal" class="fixed inset-0 bg-black bg-opacity-80 hidden flex items-center justify-center p-4" style="z-index: 9000;">
    <div class="bg-gray-800 bg-opacity-95 backdrop-blur-xl rounded-2xl shadow-2xl w-full max-w-4xl border border-gray-700 flex flex-col" style="max-height: 90vh;">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-700 flex-shrink-0">
            <div>
                <h2 class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fas fa-layer-group text-indigo-400"></i>
                    <span>User Access Options</span>
                </h2>
                <p id="downloadModalUsername" class="text-xs text-gray-400 mt-1"></p>
            </div>
            <button onclick="closeDownloadOptionsModal()" class="w-10 h-10 rounded-xl bg-gray-700/70 hover:bg-red-500/80 text-gray-300 hover:text-white transition-all flex items-center justify-center">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div id="downloadOptionsList" class="p-6 overflow-y-auto custom-scroll space-y-5"></div>

        <div class="px-6 py-4 border-t border-gray-700 flex-shrink-0">
            <button onclick="closeDownloadOptionsModal()" class="w-full bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-3 rounded-xl flex items-center justify-center gap-2 font-semibold">
                <i class="fas fa-times"></i>
                <span>Close</span>
            </button>
        </div>
    </div>
</div>

<div id="wgAccessModal" class="fixed inset-0 bg-black bg-opacity-80 hidden flex items-center justify-center p-4" style="z-index: 11000;">
    <div class="bg-gray-800 bg-opacity-95 backdrop-blur-xl rounded-2xl shadow-2xl w-full max-w-2xl border border-gray-700 flex flex-col" style="max-height: 90vh;">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-700 flex-shrink-0">
            <div>
                <h2 id="wgAccessTitle" class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fas fa-network-wired text-green-400"></i>
                    <span>WireGuard</span>
                </h2>
                <p id="wgAccessAddress" class="text-xs text-gray-400 mt-1 font-mono"></p>
            </div>
            <button onclick="closeWgAccessModal()" class="w-10 h-10 rounded-xl bg-gray-700/70 hover:bg-red-500/80 text-gray-300 hover:text-white transition-all flex items-center justify-center">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="p-6 overflow-y-auto custom-scroll space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white rounded-2xl p-4 flex items-center justify-center min-h-[260px]">
                    <div id="wgAccessQr" class="flex items-center justify-center"></div>
                </div>
                <div class="flex flex-col gap-3">
    <button type="button" id="wgAccessDownloadLink" onclick="downloadWgAccessConfig()" class="bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white px-4 py-3 rounded-xl flex items-center justify-center gap-2 font-semibold">
        <i class="fas fa-download"></i>
        <span>Download .conf</span>
    </button>

    <label class="bg-gray-900/60 border border-gray-700 rounded-xl px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none">
        <div class="flex items-center gap-2 min-w-0">
            <i class="fas fa-icons text-yellow-400"></i>
            <div class="min-w-0">
                <div class="text-sm font-semibold text-white">Show Emoji</div>
                <div class="text-[11px] text-gray-400">Use emoji in WireGuard config filename.</div>
            </div>
        </div>
        <input id="wgDashboardShowEmojiInFile" type="checkbox" class="w-5 h-5 rounded bg-gray-700 border-gray-600 text-green-500 focus:ring-green-500">
    </label>

    <button type="button" onclick="copyWgAccessConfig(this)" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-3 rounded-xl flex items-center justify-center gap-2 font-semibold">
        <i class="far fa-copy"></i>
        <span>Copy Config</span>
    </button>

    <textarea id="wgAccessConfigText" readonly class="w-full h-52 bg-gray-900 text-gray-200 text-xs font-mono rounded-xl border border-gray-700 p-3 resize-none"></textarea>
</div>
            </div>
        </div>
    </div>
</div>

<div id="singboxLinkModal" class="fixed inset-0 bg-black bg-opacity-80 hidden flex items-center justify-center p-4" style="z-index: 11000;">
    <div class="bg-gray-800 bg-opacity-95 backdrop-blur-xl rounded-2xl shadow-2xl w-full max-w-2xl border border-gray-700 flex flex-col" style="max-height: 90vh;">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-700 flex-shrink-0">
            <div>
                <h2 id="singboxLinkTitle" class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fas fa-bolt text-yellow-400"></i>
                    <span>sing-box</span>
                </h2>
                <p id="singboxLinkAddress" class="text-xs text-gray-400 mt-1 font-mono"></p>
            </div>
            <button onclick="closeSingboxLinkModal()" class="w-10 h-10 rounded-xl bg-gray-700/70 hover:bg-red-500/80 text-gray-300 hover:text-white transition-all flex items-center justify-center">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="p-6 overflow-y-auto custom-scroll space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white rounded-2xl p-4 flex items-center justify-center min-h-[260px]">
                    <div id="singboxLinkQr" class="flex items-center justify-center"></div>
                </div>
                <div class="flex flex-col gap-3">
                    <button type="button" onclick="copySingboxLink(this)" class="bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white px-4 py-3 rounded-xl flex items-center justify-center gap-2 font-semibold">
                        <i class="far fa-copy"></i>
                        <span>Copy Link</span>
                    </button>
                    <textarea id="singboxLinkText" readonly class="w-full h-52 bg-gray-900 text-gray-200 text-xs font-mono rounded-xl border border-gray-700 p-3 resize-none"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>






<div id="bulkActionsModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div id="bkBox" style="background-color: rgba(31,41,55,0.9); backdrop-filter: blur(20px); padding: 1.5rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6); width: 100%; max-width: 32rem; border: 1px solid #374151;">
        <div id="bkHeader" style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #374151;">
            <h2 id="bkTitle" style="font-size: 1.25rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.75rem; margin: 0;">
                <span id="bkWarnIcon" style="display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 0.75rem; background-color: rgba(202,138,4,0.25); color: #facc15; flex-shrink: 0;"><i class="fas fa-exclamation-triangle"></i></span>
                <span>Bulk User Actions</span>
            </h2>
            <button id="bkCloseBtn" onclick="closeBulkActionsModal()" style="color: #9ca3af; background: none; border: none; cursor: pointer;"><i class="fas fa-times fa-lg"></i></button>
        </div>
        <p id="bkIntro" style="font-size: 0.875rem; color: #d1d5db; margin: 0 0 1rem 0;">These operations are irreversible and will affect only your own users. Please proceed with caution.</p>

        <div id="bkCard1" onclick="openBulkDeleteConfirmModal('disabled')" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; border-radius: 1rem; cursor: pointer; background: linear-gradient(155deg, rgba(251,146,60,0.14), rgba(17,24,39,0.5) 70%); border: 1px solid rgba(251,146,60,0.35); box-sizing: border-box;">
            <span id="bkIcon1" style="display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background-color: rgba(251,146,60,0.2); color: #fb923c; font-size: 1.15rem; flex-shrink: 0; box-shadow: 0 0 16px -4px rgba(251,146,60,0.55);"><i class="fas fa-user-slash"></i></span>
            <span style="display: flex; flex-direction: column; gap: 0.2rem; min-width: 0;">
                <span id="bkTitle1" style="font-weight: 600; color: #fff; font-size: 0.95rem;">Delete Manually Disabled Users</span>
                <span id="bkDesc1" style="font-size: 0.75rem; color: #9ca3af; line-height: 1.4;">Permanently removes users that you have manually disabled.</span>
            </span>
        </div>

        <div id="bkCard2" onclick="openBulkDeleteConfirmModal('expired')" style="display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 1rem; cursor: pointer; background: linear-gradient(155deg, rgba(248,113,113,0.14), rgba(17,24,39,0.5) 70%); border: 1px solid rgba(248,113,113,0.35); box-sizing: border-box;">
            <span id="bkIcon2" style="display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background-color: rgba(248,113,113,0.2); color: #f87171; font-size: 1.15rem; flex-shrink: 0; box-shadow: 0 0 16px -4px rgba(248,113,113,0.55);"><i class="fas fa-user-clock"></i></span>
            <span style="display: flex; flex-direction: column; gap: 0.2rem; min-width: 0;">
                <span id="bkTitle2" style="font-weight: 600; color: #fff; font-size: 0.95rem;">Delete All Expired Users</span>
                <span id="bkDesc2" style="font-size: 0.75rem; color: #9ca3af; line-height: 1.4;">Permanently removes users whose expiry date has passed or data limit is reached.</span>
            </span>
        </div>
    </div>
</div>

<div id="bulkEditModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-lg border border-gray-700">
        <div class="flex justify-between items-center pb-4 border-b border-gray-700">
            <h2 class="text-xl font-bold text-white flex items-center gap-3"><i class="fas fa-users-cog text-teal-400"></i><span>Bulk Edit All Users</span></h2>
            <button onclick="closeBulkEditModal()" class="text-gray-400 hover:text-white transition-colors"><i class="fas fa-times fa-lg"></i></button>
        </div>
        <form id="bulkEditForm" onsubmit="confirmBulkEdit(event)" class="py-6 space-y-5">
            <p class="text-sm text-gray-300">Enter the values to add to all of your own users. Leave a field blank to make no changes for that attribute. This action cannot be undone.</p>
            <div class="compact-card">
                <label for="days_to_add" class="compact-label mb-2">Add Days to Expiry Date</label>
                <input type="number" name="days_to_add" id="days_to_add" class="compact-input" placeholder="e.g., 30 (adds 30 days to current expiry)">
                <p class="text-xs text-gray-400 mt-1">Affects users with a fixed expiry date or pending flexible days.</p>
            </div>
            <div class="compact-card">
                <label for="data_to_add" class="compact-label mb-2">Add Data Limit (GB)</label>
                <input type="number" name="data_to_add" id="data_to_add" min="0.01" step="0.01" class="compact-input" placeholder="e.g., 10 (adds 10 GB to current limit)">
                <p class="text-xs text-gray-400 mt-1">Only affects users who do not have an unlimited data plan.</p>
            </div>
            <div class="pt-4 border-t border-gray-700">
                <button type="submit" id="confirmBulkEditBtn" class="w-full bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white font-semibold px-4 py-3 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all">
                    <i class="fas fa-check mr-2"></i> Apply Changes to All Users
                </button>
            </div>
        </form>
    </div>
</div>

<div id="bulkActionConfirmModal" class="fixed inset-0 bg-black bg-opacity-70 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md border border-gray-700">
        <h2 id="confirmModalTitle" class="text-xl font-bold mb-4 text-white">Confirm Action</h2>
        <p id="confirmModalText" class="mb-6 text-gray-300">Are you sure?</p>
        
        <div class="flex gap-4">
            
            <button id="confirmModalBtn" 
                    class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 font-semibold">
                <i class="fas fa-trash"></i>
                <span>Yes, Proceed</span>
            </button>

            <button onclick="closeBulkDeleteConfirmModal()" id="confirmModalCancelBtn" 
                    class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 font-medium">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                <span>Cancel</span>
            </button>
        </div>
    </div>
</div>

<div id="revokeConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md border border-orange-500/50">
            
            <h2 class="text-xl font-bold mb-4 text-orange-400"><i class="fas fa-exclamation-triangle"></i> Confirm Revoke Certificate</h2>
            
            <p class="mb-6 text-gray-300" id="revokeConfirmText">Are you sure?</p>
            
            <div class="flex gap-4">
                
                <button id="confirmRevokeBtn" onclick="confirmRevokeCert()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 font-semibold">
                    <i class="fas fa-shield-virus"></i>
                    <span>Yes, Revoke</span>
                </button>
                
                <button onclick="closeRevokeConfirmModal()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 font-medium">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    <span>Cancel</span>
                </button>
            </div>
        </div>
    </div>
</div>





<div id="renewUserModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-50 flex items-center justify-center p-4 transition-opacity duration-300">
    <div class="bg-gray-800 bg-opacity-80 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-md border border-gray-700 flex flex-col">
        
        <div class="flex-shrink-0 flex justify-between items-center pb-4 border-b border-gray-700 mb-4">
            <h2 class="text-xl font-bold text-white flex items-center gap-3">
                <i class="fas fa-sync-alt text-teal-400"></i>
                <span>Renew User: <span id="renewUsernameDisplay" class="text-indigo-300"></span></span>
            </h2>
            <button onclick="closeRenewModal()" class="text-gray-400 hover:text-white transition-colors">
                <i class="fas fa-times fa-lg"></i>
            </button>
        </div>

        <div class="renew-grid">
            <div class="renew-option-box selected" onclick="selectRenewDuration(1, this)">
                <span class="month-val">1</span>
                <span class="month-label">Month</span>
            </div>
            <div class="renew-option-box" onclick="selectRenewDuration(2, this)">
                <span class="month-val">2</span>
                <span class="month-label">Months</span>
            </div>
            <div class="renew-option-box" onclick="selectRenewDuration(3, this)">
                <span class="month-val">3</span>
                <span class="month-label">Months</span>
            </div>
            <div class="renew-option-box" onclick="selectRenewDuration(6, this)">
                <span class="month-val">6</span>
                <span class="month-label">Months</span>
            </div>
            <div class="renew-option-box" onclick="selectRenewDuration(9, this)">
                <span class="month-val">9</span>
                <span class="month-label">Months</span>
            </div>
            <div class="renew-option-box" onclick="selectRenewDuration(12, this)">
                <span class="month-val">1</span>
                <span class="month-label">Year</span>
            </div>
        </div>

        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600/50 mb-6 space-y-4">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-300">Reset Traffic</span>
                <label class="switch">
                    <input type="checkbox" id="renewResetTraffic" checked>
                    <span class="slider round"></span>
                </label>
            </div>
            
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-300">Reset Expiry Date (Flexible)</span>
                <label class="switch">
                    <input type="checkbox" id="renewResetExpiry">
                    <span class="slider round"></span>
                </label>
            </div>
            <p class="text-[10px] text-gray-400 mt-2">
                If "Reset Expiry" is OFF, days will be added to the current expiry date (Fixed).
                If ON, account becomes Flexible with new duration.
            </p>
        </div>

        <button id="btnConfirmRenew" onclick="submitRenewUser()" class="w-full bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white font-bold px-4 py-3 rounded-lg shadow-lg flex items-center justify-center gap-2 transition-all">
            <i class="fas fa-check-circle"></i>
            Confirm Renew
        </button>

    </div>
</div>




<div id="userLogsModal" class="audit-modal-overlay">
    <div class="audit-modal-dialog">

        <div class="audit-modal-head">
            <h3 class="audit-modal-title">
                <span class="system-status-icon-badge text-blue-400 bg-blue-900">
                    <i class="fas fa-history"></i>
                </span>
                User Audit Logs
            </h3>
            <button id="closeUserLogsModalBtn" class="audit-modal-close">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="audit-modal-filters">
            {% if user_role == 'main_admin' %}
            <select id="userLogSubAdminFilter">
                <option value="">All Users</option>
                <option value="main">Main Admin Users</option>
                {% for sa in all_sub_admins %}
                <option value="{{ sa.id }}">{{ sa.username }}</option>
                {% endfor %}
            </select>
            {% endif %}
            <select id="userLogFilterActionType">
                <option value="">All Actions</option>
                <option value="CREATE">Create</option>
                <option value="UPDATE">Update</option>
                <option value="DELETE">Delete</option>
                <option value="MANUAL_ENABLE">Manual Enable</option>
                <option value="MANUAL_DISABLE">Manual Disable</option>
                <option value="AUTO_DISABLE">Auto Disable</option>
                <option value="AUTO_ENABLE">Auto Enable</option>
                <option value="RESET_TRAFFIC">Reset Traffic</option>
                <option value="RENEW">Renew</option>
                <option value="REVOKE_CERT">Revoke Certificate</option>
            </select>
            <input type="text" id="userLogFilterUsername" placeholder="Username...">
            <input type="text" id="userLogFilterStartDate" placeholder="Start Date" class="bg-tarikh">
            <input type="text" id="userLogFilterEndDate" placeholder="End Date" class="bg-tarikh">
            <button id="applyUserLogsFilterBtn" class="audit-modal-apply-btn">Apply Filter</button>
        </div>

        <div class="audit-modal-body custom-scroll">
            <table class="audit-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Action</th>
                        <th>Details</th>
                        <th>Performed By</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody id="userLogsTableBody"></tbody>
            </table>
            <div id="userLogsLoadingIndicator" class="audit-modal-loading hidden">
                <i class="fas fa-circle-notch fa-spin"></i>
            </div>
        </div>

        <div id="userLogsPaginationContainer" class="audit-modal-foot"></div>
    </div>
</div>






<style>

.light-theme #bkBox { background-color: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 25px 50px -12px rgba(100,116,139,0.25) !important; }
.light-theme #bkHeader { border-bottom-color: #e5e7eb !important; }
.light-theme #bkTitle { color: #111827 !important; }
.light-theme #bkWarnIcon { background-color: rgba(180,83,9,0.12) !important; color: #b45309 !important; }
.light-theme #bkCloseBtn { color: #6b7280 !important; }
.light-theme #bkIntro { color: #4b5563 !important; }

.light-theme #bkCard1 { background: linear-gradient(155deg, rgba(194,65,12,0.08), rgba(255,255,255,0.95) 70%) !important; border-color: rgba(194,65,12,0.3) !important; }
.light-theme #bkIcon1 { background-color: rgba(194,65,12,0.14) !important; color: #c2410c !important; }
.light-theme #bkTitle1 { color: #1f2937 !important; }
.light-theme #bkDesc1 { color: #6b7280 !important; }

.light-theme #bkCard2 { background: linear-gradient(155deg, rgba(220,38,38,0.08), rgba(255,255,255,0.95) 70%) !important; border-color: rgba(220,38,38,0.3) !important; }
.light-theme #bkIcon2 { background-color: rgba(220,38,38,0.14) !important; color: #dc2626 !important; }
.light-theme #bkTitle2 { color: #1f2937 !important; }
.light-theme #bkDesc2 { color: #6b7280 !important; }

.border-orange-500 {
    --tw-border-opacity: 1;
    border-color: rgb(93 77 77 / var(--tw-border-opacity));
}

#scroll-to-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.system-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
}


@media (max-width: 640px) {
    .system-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    .meter-card {
        height: 8.5rem;
        padding: 0.8rem 0.8rem 0;
    }
    .meter-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.68rem;
    }
    .meter-label {
        font-size: 0.62rem;
    }
    .meter-readout {
        margin-top: 0.4rem;
    }
    .meter-value {
        font-size: 1.3rem;
    }
    .meter-sub {
        font-size: 0.6rem;
        line-height: 1.35;
    }
    .meter-chart-zone {
        margin: 0.3rem -0.8rem 0;
    }
}





.meter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1.1rem;
    padding: 1.1rem 1.15rem 0;
    background: linear-gradient(165deg, rgba(var(--stat-rgb), 0.13), rgba(17, 24, 39, 0.55) 60%);
    border: 1px solid rgba(var(--stat-rgb), 0.28);
    overflow: hidden;
    height: 12rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.meter-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--stat-rgb), 0.5);
    box-shadow: 0 14px 28px -12px rgba(var(--stat-rgb), 0.4);
}
.light-theme .meter-card {
    background: linear-gradient(165deg, rgba(var(--stat-rgb-light), 0.09), rgba(255, 255, 255, 0.7) 60%);
    border-color: rgba(var(--stat-rgb-light), 0.25);
}
.light-theme .meter-card:hover {
    border-color: rgba(var(--stat-rgb-light), 0.5);
    box-shadow: 0 14px 28px -12px rgba(var(--stat-rgb-light), 0.25);
}

.meter-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.meter-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--stat-rgb), 0.2);
    color: rgb(var(--stat-rgb));
    font-size: 0.82rem;
}
.light-theme .meter-icon {
    background-color: rgba(var(--stat-rgb-light), 0.14);
    color: rgb(var(--stat-rgb-light));
}
.meter-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.light-theme .meter-label {
    color: #4b5563;
}

.meter-readout {
    flex: 0 0 auto;
    margin-top: 0.65rem;
}
.meter-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.meter-value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #e5e7eb;
    line-height: 1;
    transition: color 0.4s ease;
}
.light-theme .meter-value {
    color: #1f2937;
}
.meter-sub {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.light-theme .meter-sub {
    color: #9ca3af;
}


.meter-chart-zone {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    margin: 0.5rem -1.15rem 0;
}
.meter-chart-zone svg {
    display: block;
    width: 100%;
    height: 100%;
}
.hist-grid {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
}
.light-theme .hist-grid {
    stroke: rgba(0, 0, 0, 0.06);
}
.hist-grad-stop-1 { stop-color: rgb(var(--stat-rgb)); stop-opacity: 0.4; }
.hist-grad-stop-2 { stop-color: rgb(var(--stat-rgb)); stop-opacity: 0.1; }
.hist-grad-stop-3 { stop-color: rgb(var(--stat-rgb)); stop-opacity: 0; }
.light-theme .hist-grad-stop-1 { stop-color: rgb(var(--stat-rgb-light)); stop-opacity: 0.3; }
.light-theme .hist-grad-stop-2 { stop-color: rgb(var(--stat-rgb-light)); stop-opacity: 0.08; }
.light-theme .hist-grad-stop-3 { stop-color: rgb(var(--stat-rgb-light)); stop-opacity: 0; }
.hist-line {
    fill: none;
    stroke: rgb(var(--stat-rgb));
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(var(--stat-rgb), 0.6));
}
.light-theme .hist-line {
    stroke: rgb(var(--stat-rgb-light));
    filter: drop-shadow(0 0 4px rgba(var(--stat-rgb-light), 0.4));
}
.hist-dot-halo {
    opacity: 0.3;
    animation: histHaloPulse 2.2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.hist-dot {
    stroke: #111827;
    stroke-width: 2;
}
.light-theme .hist-dot {
    stroke: #ffffff;
}
@keyframes histHaloPulse {
    0%   { transform: scale(1);   opacity: 0.35; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}




.service-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.85rem;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.10), rgba(17, 24, 39, 0.3) 70%);
    border: 1px solid rgba(var(--stat-rgb), 0.18);
    transition: border-color 0.2s ease;
}
.service-row:hover {
    border-color: rgba(var(--stat-rgb), 0.4);
}
.light-theme .service-row {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.07), rgba(255, 255, 255, 0.75) 70%);
    border-color: rgba(var(--stat-rgb-light), 0.22);
}
.light-theme .service-row:hover {
    border-color: rgba(var(--stat-rgb-light), 0.45);
}

.service-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    background-color: rgba(var(--stat-rgb), 0.16);
    color: rgb(var(--stat-rgb));
    flex-shrink: 0;
}
.light-theme .service-row-icon {
    background-color: rgba(var(--stat-rgb-light), 0.14);
    color: rgb(var(--stat-rgb-light));
}

.service-row-btn {
    height: 1.75rem;
    width: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: rgba(75, 85, 99, 0.4);
    transition: background-color 0.2s ease;
}
.service-row-btn:hover {
    background-color: rgba(107, 114, 128, 0.6);
}
.light-theme .service-row-btn {
    background-color: rgba(209, 213, 219, 0.7);
}
.light-theme .service-row-btn:hover {
    background-color: rgba(156, 163, 175, 0.6);
}


.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input-icon {
    position: absolute;
    left: 1rem;
    color: #6b7280;
    font-size: 0.85rem;
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    background-color: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 0.85rem;
    color: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.search-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.7);
    background-color: rgba(17, 24, 39, 0.6);
}
.light-theme .search-input {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #111827;
}
.light-theme .search-input:focus {
    border-color: #60a5fa;
    background-color: #fff;
}
.light-theme .search-input-icon {
    color: #9ca3af;
}


.action-tile {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 1rem;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.14), rgba(17, 24, 39, 0.3) 70%);
    border: 1px solid rgba(var(--stat-rgb), 0.22);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-align: center;
    width: 100%;
}
.action-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--stat-rgb), 0.5);
    box-shadow: 0 12px 22px -10px rgba(var(--stat-rgb), 0.4);
}
.action-tile:active {
    transform: translateY(-1px);
}
.light-theme .action-tile {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.09), rgba(255, 255, 255, 0.75) 70%);
    border-color: rgba(var(--stat-rgb-light), 0.25);
}
.light-theme .action-tile:hover {
    border-color: rgba(var(--stat-rgb-light), 0.5);
    box-shadow: 0 12px 22px -10px rgba(var(--stat-rgb-light), 0.28);
}
@media (prefers-reduced-motion: reduce) {
    .action-tile { transition: none; }
    .action-tile:hover, .action-tile:active { transform: none; }
}

.action-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: 9999px;
    font-size: 0.8rem;
    background-color: rgba(var(--stat-rgb), 0.2);
    color: rgb(var(--stat-rgb));
    box-shadow: 0 0 14px -3px rgba(var(--stat-rgb), 0.55);
}
.light-theme .action-tile-icon {
    background-color: rgba(var(--stat-rgb-light), 0.14);
    color: rgb(var(--stat-rgb-light));
    box-shadow: 0 0 10px -3px rgba(var(--stat-rgb-light), 0.35);
}

.action-tile-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e5e7eb;
    line-height: 1.25;
    text-align: left;
}
.light-theme .action-tile-label {
    color: #1f2937;
}


.eyl-select {
    width: 100%;
    padding: 0.6rem 2rem 0.6rem 0.85rem;
    background-color: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 0.85rem;
    color: #fff;
    appearance: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.eyl-select:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.7);
    background-color: rgba(17, 24, 39, 0.6);
}
.light-theme .eyl-select {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #111827;
}
.light-theme .eyl-select:focus {
    border-color: #60a5fa;
    background-color: #fff;
}
.light-theme .eyl-select option {
    background-color: #fff;
    color: #111827;
}

.eyl-select-caret {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.75rem;
    pointer-events: none;
}


.eyl-toolbar {
    background-color: rgba(17, 24, 39, 0.35);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.85rem;
}
.light-theme .eyl-toolbar {
    background-color: rgba(249, 250, 251, 0.7);
    border-color: #e5e7eb;
}


.user-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background-color: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.4);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.user-card:hover {
    border-color: rgba(96, 165, 250, 0.4);
    background-color: rgba(31, 41, 55, 0.75);
}
.light-theme .user-card {
    background-color: rgba(255, 255, 255, 0.75);
    border-color: #e5e7eb;
}
.light-theme .user-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background-color: #fff;
}

.user-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.user-card-identity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.user-card-username {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.light-theme .user-card-username {
    color: #111827;
}


.user-chip {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.4rem;
    border-radius: 0.6rem;
    background-color: rgba(17, 24, 39, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.35);
    font-size: 0.72rem;
    font-weight: 500;
    color: #d1d5db;
    text-align: center;
    white-space: nowrap;
    
}
.user-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.user-chip i {
    color: #818cf8;
    font-size: 0.68rem;
    flex-shrink: 0;
}
.light-theme .user-chip {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #374151;
}

.user-chip-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.user-chip-danger i {
    color: #f87171;
}
.light-theme .user-chip-danger {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}
.light-theme .user-chip-danger i {
    color: #dc2626;
}


.usage-chip {
    position: relative;
    overflow: visible; 
    height: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.32rem;
    padding: 0.45rem 0.7rem 0.4rem;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.12), rgba(17, 24, 39, 0.55) 80%);
    border-color: rgba(var(--stat-rgb), 0.22);
}
.light-theme .usage-chip {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.09), rgba(255, 255, 255, 0.85) 80%);
    border-color: rgba(var(--stat-rgb-light), 0.25);
}
.usage-chip--lg {
    height: 3.1rem;
    padding: 0.55rem 0.85rem 0.5rem;
    gap: 0.4rem;
}
.usage-chip--lg .usage-chip-content {
    font-size: 0.82rem;
}
.usage-chip--lg .usage-bar-track {
    height: 6px;
}
.usage-chip-content {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}
.usage-chip-content i {
    color: rgb(var(--stat-rgb));
}
.light-theme .usage-chip-content i {
    color: rgb(var(--stat-rgb-light));
}
.usage-bar-track {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}
.light-theme .usage-bar-track {
    background: rgba(100, 116, 139, 0.16);
}
.usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--stat-rgb), 0.7), rgb(var(--stat-rgb)));
    box-shadow: 0 0 6px 0 rgba(var(--stat-rgb), 0.6);
    transition: width 0.6s ease;
}
.light-theme .usage-bar-fill {
    background: linear-gradient(90deg, rgba(var(--stat-rgb-light), 0.7), rgb(var(--stat-rgb-light)));
    box-shadow: 0 0 6px 0 rgba(var(--stat-rgb-light), 0.5);
}
.user-card-usage-row {
    display: flex;
}

.user-card-chips {
    display: flex;
    gap: 0.4rem;
}


.user-card-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
}
.user-action-btn {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background-color: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    font-size: 0.85rem;
}
.user-action-btn:hover {
    background-color: rgba(96, 165, 250, 0.28);
    border-color: rgba(96, 165, 250, 0.5);
    transform: translateY(-1px);
}
.user-action-btn-success {
    background-color: rgba(45, 212, 191, 0.14);
    color: #5eead4;
    border-color: rgba(45, 212, 191, 0.28);
}
.user-action-btn-success:hover {
    background-color: rgba(45, 212, 191, 0.28);
    border-color: rgba(45, 212, 191, 0.5);
}
.user-action-btn-danger {
    background-color: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.28);
}
.user-action-btn-danger:hover {
    background-color: rgba(248, 113, 113, 0.28);
    border-color: rgba(248, 113, 113, 0.5);
}
.light-theme .user-action-btn {
    background-color: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.25);
}
.light-theme .user-action-btn:hover {
    background-color: rgba(37, 99, 235, 0.16);
}
.light-theme .user-action-btn-success {
    background-color: rgba(13, 148, 136, 0.08);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.25);
}
.light-theme .user-action-btn-success:hover {
    background-color: rgba(13, 148, 136, 0.16);
}
.light-theme .user-action-btn-danger {
    background-color: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}
.light-theme .user-action-btn-danger:hover {
    background-color: rgba(220, 38, 38, 0.16);
}
.user-action-btn-link {
    background-color: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.28);
}
.user-action-btn-link:hover {
    background-color: rgba(167, 139, 250, 0.28);
    border-color: rgba(167, 139, 250, 0.5);
}
.light-theme .user-action-btn-link {
    background-color: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.25);
}
.light-theme .user-action-btn-link:hover {
    background-color: rgba(124, 58, 237, 0.16);
}
.user-action-btn-download {
    background-color: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.28);
}
.user-action-btn-download:hover {
    background-color: rgba(251, 191, 36, 0.28);
    border-color: rgba(251, 191, 36, 0.5);
}
.light-theme .user-action-btn-download {
    background-color: rgba(217, 119, 6, 0.08);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.25);
}
.light-theme .user-action-btn-download:hover {
    background-color: rgba(217, 119, 6, 0.16);
}


.user-row-cell-chip {
    display: inline-flex;
}


.usage-td {
    min-width: 260px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}


.user-table-head {
    background: linear-gradient(180deg, rgba(55, 65, 81, 0.6), rgba(31, 41, 55, 0.4));
    border-bottom: 1px solid rgba(96, 165, 250, 0.25);
}
.light-theme .user-table-head {
    background: linear-gradient(180deg, #f3f4f6, #f9fafb);
    border-bottom-color: rgba(59, 130, 246, 0.25);
}
.user-table-th {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    white-space: nowrap;
}
.light-theme .user-table-th {
    color: #4b5563;
}
.user-table-th-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.user-table-th.sortable-header {
    cursor: pointer;
    transition: color 0.2s ease;
}
.user-table-th.sortable-header:hover {
    color: #60a5fa;
}
.user-table-th.sortable-header i {
    font-size: 0.65rem;
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.user-table-th.sortable-header:hover i {
    opacity: 1;
}
.user-table-th.sortable-header i.fa-sort-up,
.user-table-th.sortable-header i.fa-sort-down {
    color: #60a5fa;
    opacity: 1;
}

.light-theme .tex{color:#000}.light-theme .textera{color:rgb(91 47 224)}.custom-checkbox{position:relative;padding-left:2.5rem;border-radius:1rem;border:2px solid transparent;transition:all .3s ease;user-select:none}.custom-checkbox:has(input:checked){border-color:#374151;background:linear-gradient(135deg,#6b46c1,#3b82f6)}.light-theme .custom-checkbox:has(input:checked){border-color:#d7dae0;background:rgb(214 217 223)}.custom-checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);height:1.25rem;width:1.25rem;background-color:#4b5563;border:2px solid #9ca3af;border-radius:.375rem;transition:all .3s ease}.custom-checkbox input:checked~.checkmark{background-color:#8b5cf6;border-color:#8b5cf6}.light-theme .custom-checkbox input:checked~.checkmark{background-color:#000;border-color:#000}.custom-checkbox .checkmark:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox input:checked~.checkmark:after{display:block}.custom-checkbox input:focus~.checkmark{box-shadow:0 0 0 3px rgba(139,92,246,.3)}.light-theme .custom-checkbox input:focus~.checkmark{box-shadow:0 0 0 3px rgba(13,19,25,.11)}.custom-checkbox span.text-sm{padding-left:.5rem;color:#e5e7eb}.light-theme .custom-checkbox span.text-sm{padding-left:.8rem;color:#000}.light-theme .bg-tarikh{background-color:#fff;border:1px solid #d1d5db}.connection-tooltip{position:absolute;background:rgba(30,41,59,.95);border-radius:6px;padding:8px 12px;color:#fff;font-size:.8rem;z-index:100;box-shadow:0 4px 6px rgba(0,0,0,.1);display:none;min-width:120px;max-width:280px;max-height:240px;overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.connection-badge:hover .connection-tooltip{display:block}.server-icon{display:inline-flex;align-items:center;margin-right:4px}.server-icon.main{color:#8b5cf6}.server-icon.node{color:#3b82f6}.node-offline{opacity:.6;filter:grayscale(80%)}.node-offline .checkmark{border-color:#ef4444!important;background-color:#7f1d1d!important}.node-offline-text{color:#ef4444;font-size:.75rem;margin-left:.25rem}





.edit-traffic-stat {
    border-radius: 0.65rem;
    padding: 0.6rem;
    background: linear-gradient(155deg, rgba(var(--stat-rgb), 0.14), rgba(17, 24, 39, 0.3) 70%);
    border: 1px solid rgba(var(--stat-rgb), 0.25);
}
.edit-traffic-stat i {
    color: rgb(var(--stat-rgb));
    font-size: 0.7rem;
}
.edit-traffic-stat .edit-traffic-stat-label {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.2rem;
}
.edit-traffic-stat .edit-traffic-stat-value {
    font-weight: 700;
    color: #e5e7eb;
}
.light-theme .edit-traffic-stat {
    background: linear-gradient(155deg, rgba(var(--stat-rgb-light), 0.09), rgba(255, 255, 255, 0.8) 70%);
    border-color: rgba(var(--stat-rgb-light), 0.25);
}
.light-theme .edit-traffic-stat i {
    color: rgb(var(--stat-rgb-light));
}
.light-theme .edit-traffic-stat .edit-traffic-stat-label {
    color: #6b7280;
}
.light-theme .edit-traffic-stat .edit-traffic-stat-value {
    color: #1f2937;
}

.hwid-count-badge {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgb(var(--stat-rgb));
    background: rgba(var(--stat-rgb), 0.14);
    border: 1px solid rgba(var(--stat-rgb), 0.3);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    margin-left: 0.35rem;
}
.light-theme .hwid-count-badge {
    color: rgb(var(--stat-rgb-light));
    background: rgba(var(--stat-rgb-light), 0.1);
    border-color: rgba(var(--stat-rgb-light), 0.3);
}

.protocol-icon-btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0 !important;
}
.protocol-icon-btn .filter-icon {
    font-size: 0.9rem;
}

.user-protocol-icons {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.user-protocol-icons i {
    font-size: 0.7rem;
    color: rgb(var(--stat-rgb));
    opacity: 0.85;
}

#userListDesktop td {
    vertical-align: middle;
}
.username-box-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.no-users-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 3rem 1rem;
    color: #6b7280;
}
.no-users-placeholder-inner i {
    font-size: 2.25rem;
    color: #4b5563;
    opacity: 0.6;
}
.no-users-placeholder-inner span {
    font-size: 0.875rem;
    font-weight: 500;
}

.hwid-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem 0.5rem;
    color: #6b7280;
    opacity: 0.7;
    font-size: 0.8rem;
}
.hwid-empty-state i {
    font-size: 1.25rem;
}

.hwid-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(var(--stat-rgb), 0.08);
    border: 1px solid rgba(var(--stat-rgb), 0.18);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.hwid-device-row:hover {
    border-color: rgba(var(--stat-rgb), 0.35);
}
.light-theme .hwid-device-row {
    background: rgba(var(--stat-rgb-light), 0.06);
    border-color: rgba(var(--stat-rgb-light), 0.2);
}
.light-theme .hwid-device-row:hover {
    border-color: rgba(var(--stat-rgb-light), 0.4);
}

.hwid-device-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--stat-rgb), 0.16);
    color: rgb(var(--stat-rgb));
    font-size: 0.85rem;
    flex-shrink: 0;
}
.light-theme .hwid-device-icon {
    background: rgba(var(--stat-rgb-light), 0.12);
    color: rgb(var(--stat-rgb-light));
}

.hwid-device-info {
    min-width: 0;
    flex-grow: 1;
}
.hwid-device-model {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.light-theme .hwid-device-model {
    color: #1f2937;
}
.hwid-device-meta {
    font-size: 0.68rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.light-theme .hwid-device-meta {
    color: #6b7280;
}

.hwid-device-delete {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}
.hwid-device-delete:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

.light-theme #addNodesContainer {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.subscription-modal-container {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(5px);
}

.subscription-modal-content {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-out;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(30, 41, 59, 0.9);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.qr-code-container #qrcode img {
    border-radius: 0.5rem;
}

.sub-link-container {
    display: flex;
    align-items: center;
    background-color: rgba(17, 24, 39, 0.8);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #4b5563;
}

.sub-link-container span {
    flex-grow: 1;
    font-family: monospace;
    font-size: 0.8rem;
    color: #d1d5db;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sub-link-container button {
    background: none;
    border: none;
    color: #9ca3af;
    margin-left: 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sub-link-container button:hover {
    color: #ffffff;
}

.sub-modal-button {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.primary-button {
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: white;
}
.primary-button:hover {
    opacity: 0.9;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.secondary-button {
    background-color: rgba(75, 85, 99, 0.5);
    color: #d1d5db;
    border: 1px solid #4b5563;
}
.secondary-button:hover {
    background-color: rgba(75, 85, 99, 0.8);
}

.light-theme .subscription-modal-content {
    background: #ffffff;
    border-color: #e5e7eb;
}

.light-theme .qr-code-container {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

.light-theme .sub-link-container {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.light-theme .sub-link-container span {
    color: #374151;
}

.light-theme .sub-link-container button {
    color: #6b7280;
}
.light-theme .sub-link-container button:hover {
    color: #1f2937;
}

.light-theme .secondary-button {
    background-color: #e5e7eb;
    color: #4b5563;
    border-color: #d1d5db;
}
.light-theme .secondary-button:hover {
    background-color: #d1d5db;
}

.light-mode .flatpickr-calendar {
    background: #ffffff;
    border-color: #e2e8f0;
}
.light-mode .flatpickr-day.selected {
    background: #4338ca;
    border-color: #4338ca;
}
.light-mode .flatpickr-day:hover {
    background: #f1f5f9;
}
.light-mode .flatpickr-months .flatpickr-month {
    color: #1e293b;
}
.light-mode span.flatpickr-weekday {
    color: #64748b;
}
.light-mode .flatpickr-day {
    color: #334155;
}

    .server-select-card {
        position: relative;
        border: 1px solid rgba(75, 85, 99, 0.4);
        border-radius: 0.75rem;
        background-color: rgba(31, 41, 55, 0.5);
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    .protocol-item-add:hover .server-select-card,
    .protocol-item-edit:hover .server-select-card {
        transform: translateY(-2px);
        border-color: rgba(156, 163, 175, 0.6);
        box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.4);
    }
    .icon-box {
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .protocol-item-add:hover .icon-box,
    .protocol-item-edit:hover .icon-box {
        transform: scale(1.08);
    }
    .light-theme .protocol-item-add:hover .server-select-card,
    .light-theme .protocol-item-edit:hover .server-select-card {
        box-shadow: 0 6px 14px -10px rgba(100, 116, 139, 0.2);
    }

    input[name="enable_openvpn"]:checked + .server-select-card {
        border-color: #8b5cf6 !important;
        background-color: rgba(139, 92, 246, 0.1) !important;
        box-shadow: 0 0 0 1px #8b5cf6;
    }
    input[name="enable_openvpn"]:checked + .server-select-card .icon-box {
        background-color: #8b5cf6 !important;
        color: white !important;
    }

    input[name="enable_l2tp"]:checked + .server-select-card {
        border-color: #3b82f6 !important;
        background-color: rgba(59, 130, 246, 0.1) !important;
        box-shadow: 0 0 0 1px #3b82f6;
    }
    input[name="enable_l2tp"]:checked + .server-select-card .icon-box {
        background-color: #3b82f6 !important;
        color: white !important;
    }

    input[name="enable_cisco"]:checked + .server-select-card {
        border-color: #06b6d4 !important;
        background-color: rgba(6, 182, 212, 0.1) !important;
        box-shadow: 0 0 0 1px #06b6d4;
    }
    input[name="enable_cisco"]:checked + .server-select-card .icon-box {
        background-color: #06b6d4 !important;
        color: white !important;
    }


    input[name="enable_wg1"]:checked + .server-select-card {
        border-color: #10b981 !important;
        background-color: rgba(16, 185, 129, 0.1) !important;
        box-shadow: 0 0 0 1px #10b981;
    }

    .protocol-item-add.wg-selected .server-select-card,
    .protocol-item-edit.wg-selected .server-select-card {
        border-color: #10b981 !important;
        background-color: rgba(16, 185, 129, 0.1) !important;
        box-shadow: 0 0 0 1px #10b981;
    }

    .protocol-item-add.singbox-selected .server-select-card,
    .protocol-item-edit.singbox-selected .server-select-card {
        border-color: #f59e0b !important;
        background-color: rgba(245, 158, 11, 0.1) !important;
        box-shadow: 0 0 0 1px #f59e0b;
    }

    .light-theme .protocol-item-add .server-select-card,
    .light-theme .protocol-item-edit .server-select-card {
        border-color: #d1d5db;
        background-color: #f9fafb;
    }
    .light-theme .protocol-item-add .server-select-card .name,
    .light-theme .protocol-item-edit .server-select-card .name {
        color: #111827 !important;
    }
    .light-theme .protocol-item-add .server-select-card .text-gray-200,
    .light-theme .protocol-item-edit .server-select-card .text-gray-200 {
        color: #111827 !important;
    }
    .light-theme .protocol-item-add .server-select-card .text-gray-400,
    .light-theme .protocol-item-edit .server-select-card .text-gray-400 {
        color: #6b7280 !important;
    }


    .animate-fade-in-down {
        animation: fadeInDown 0.2s ease-out forwards;
    }
    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
	
.light-theme #downloadOptionsModal .bg-gray-900\/40 {
    background-color: #f9fafb;
}

.light-theme #downloadOptionsModal .hover\:bg-gray-700\/40:hover {
    background-color: #f3f4f6;
}

.light-theme #downloadOptionsModal .text-blue-400 {
    color: #1d4ed8;
}

.light-theme #downloadOptionsModal .text-purple-400 {
    color: #7e22ce;
}

.light-theme #downloadOptionsModal .text-pink-400 {
    color: #be185d;
}


#downloadOptionsModal {
    z-index: 9000 !important;
}

#wgAccessModal {
    z-index: 11000 !important;
}




.light-theme .flatpickr-calendar {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.light-theme .flatpickr-day {
    color: #334155 !important;
}

.light-theme .flatpickr-day.selected {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

.light-theme .flatpickr-months .flatpickr-month,
.light-theme .flatpickr-current-month,
.light-theme .flatpickr-weekday {
    color: #1e293b !important;
}

input[name="enable_openvpn"]:checked + .server-select-card {
    border-color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 0 1px #8b5cf6;
}

input[name="enable_openvpn"]:checked + .server-select-card .icon-box {
    background-color: #8b5cf6 !important;
    color: white !important;
}


.connection-badge .connection-tooltip {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.4rem;
    background: rgba(17, 24, 39, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 0.65rem;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    color: #e5e7eb;
    
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.connection-badge .connection-tooltip::-webkit-scrollbar {
    width: 5px;
}
.connection-badge .connection-tooltip::-webkit-scrollbar-thumb {
    background-color: rgba(96, 165, 250, 0.4);
    border-radius: 999px;
}
.connection-badge .connection-tooltip::-webkit-scrollbar-track {
    background: transparent;
}
.light-theme .connection-badge .connection-tooltip {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.2);
    color: #1f2937;
}


.mini-stat-hover-overlay {
    background: rgba(17, 24, 39, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--stat-rgb), 0.3);
}
.light-theme .mini-stat-hover-overlay {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(var(--stat-rgb-light), 0.3);
}
.mini-stat-hover-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    width: 100%;
}
.mini-stat-hover-row i {
    font-size: 0.75rem;
    flex-shrink: 0;
}
.mini-stat-hover-label {
    color: #9ca3af;
}
.light-theme .mini-stat-hover-label {
    color: #6b7280;
}
.mini-stat-hover-value {
    font-weight: 700;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
}
.light-theme .mini-stat-hover-value {
    color: #1f2937;
}

</style>
	
	
	
	
	
<script>
    const CURRENT_USER_ROLE = "{{ session.get('user_role') }}";
    const CURRENT_SUB_ADMIN_ID = "{{ session.get('sub_admin_id') }}";
</script>	
	
	
	

<script>
let currentRevokeUsername = null;

function openRevokeConfirmModal() {
    const username = document.getElementById('editModal').dataset.username;
    if (!username) return;
    
    currentRevokeUsername = username; 

    const textEl = document.getElementById('revokeConfirmText');
    textEl.innerHTML = `Are you sure you want to revoke the certificate for <strong class="text-yellow-400">${username}</strong>? 
                      This will <strong class="text-red-500">immediately kill all sessions</strong> and invalidate their current .ovpn file. 
                      They MUST download a new file to reconnect. This cannot be undone.`;
    
    document.getElementById('revokeConfirmModal').classList.remove('hidden');
}

function closeRevokeConfirmModal() {
    document.getElementById('revokeConfirmModal').classList.add('hidden');
    currentRevokeUsername = null;
}

function confirmRevokeCert() {
    if (!currentRevokeUsername) return;

    const username = currentRevokeUsername;
    const confirmBtn = document.getElementById('confirmRevokeBtn');
    
    confirmBtn.disabled = true;
    confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Revoking...</span>';

    const fetchUrl = `${adminPanelPath}/revoke_user_cert/${username}`;

    fetch(fetchUrl, {
        method: 'POST'
    })
    .then(res => {
        if (!res.ok) {
            return res.json().then(err => { throw new Error(err.message || 'Server returned an error') });
        }
        return res.json();
    })
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            closeRevokeConfirmModal();
            closeEditModal();
        } else {
            showAlert('error', data.message || 'An unknown error occurred.');
        }
    })
    .catch(err => {
        showAlert('error', `Error: ${err.message}`);
    })
    .finally(() => {
        confirmBtn.disabled = false;
        confirmBtn.innerHTML = '<i class="fas fa-shield-virus"></i> <span>Yes, Revoke</span>';
    });
}

window.websocketConnected = false;

function updateEditModalUI() {
    const activationType = document.querySelector('#editModal input[name="activation_type_choice"]:checked').value;
    const isFlexible = activationType === 'flexible';

    document.getElementById('editExpiryDateContainer').style.display = isFlexible ? 'none' : 'block';
    document.getElementById('editPendingDaysContainer').style.display = isFlexible ? 'block' : 'none';
    document.getElementById('editUseFlexibleDaysCheckbox').checked = isFlexible;
}

document.addEventListener('DOMContentLoaded', () => {
    const adminSelector = document.getElementById('adminSelector');
    if (adminSelector) {
        adminSelector.addEventListener('change', (event) => {
            const selectedAdminId = event.target.value;
            const currentUrl = new URL(window.location.href);
            
            if (selectedAdminId === 'main') {
                currentUrl.searchParams.delete('view_as_admin');
            } else {
                currentUrl.searchParams.set('view_as_admin', selectedAdminId);
            }
            window.location.href = currentUrl.toString();
        });
    }
});

const MOTHER_OVPN_NAME = "{{ mother_ovpn_name }}";

var adminPanelPath = "{{ admin_panel_path | default('') }}";

function _trimTrailingZeros(s) {
    return s.includes('.') ? s.replace(/0+$/, '').replace(/\.$/, '') : s;
}

function formatBytes(bytes) {
    if (bytes === null || bytes === 0 || isNaN(bytes)) {
        return "0 B";
    }

    const gbInBytes = 1024 ** 3;
    if (bytes >= 1000 * gbInBytes) {
        const tbValue = bytes / (1024 ** 4);
        return _trimTrailingZeros(tbValue.toFixed(2)) + " TB";
    }

    const units = ['B', 'KB', 'MB', 'GB'];
    let unitIndex = 0;
    let tempBytes = parseFloat(bytes);

    while (tempBytes >= 1024 && unitIndex < units.length - 1) {
        tempBytes /= 1024;
        unitIndex++;
    }

    if (unitIndex === 0) {
        return Math.trunc(tempBytes) + " " + units[unitIndex];
    }
    return _trimTrailingZeros(tempBytes.toFixed(2)) + " " + units[unitIndex];
}

function _pyRound(x) {
    const floor = Math.floor(x);
    const diff = x - floor;
    const EPS = 1e-9;
    if (diff < 0.5 - EPS) return floor;
    if (diff > 0.5 + EPS) return floor + 1;
    return (floor % 2 === 0) ? floor : floor + 1;
}

function computeUsageBarInfo(totalBytes, dataLimit, dataLimitUnit) {
    if (!dataLimit) {
        return { pct: 100, color: '74,222,128', color_light: '22,163,74' };
    }
    const unitBytes = dataLimitUnit === 'MB' ? 1024 * 1024 : 1024 ** 3;
    const limitBytes = parseFloat(dataLimit) * unitBytes;
    const usedBytes = totalBytes || 0;

    let pct = 0;
    if (limitBytes > 0) {
        pct = Math.min(100, _pyRound((usedBytes / limitBytes) * 100));
    }

    function interpolate(p, ok, warn, bad) {
        let t, frm, to;
        if (p <= 50) { t = p / 50; frm = ok; to = warn; }
        else { t = (p - 50) / 50; frm = warn; to = bad; }
        return [0, 1, 2].map(i => _pyRound(frm[i] + (to[i] - frm[i]) * t)).join(',');
    }

    const color = interpolate(pct, [74, 222, 128], [251, 191, 36], [248, 113, 113]);
    const color_light = interpolate(pct, [22, 163, 74], [234, 88, 12], [220, 38, 38]);

    return { pct, color, color_light };
}

function applyUsageBarInfo(username, totalBytes, dataLimit, dataLimitUnit) {
    const info = computeUsageBarInfo(totalBytes, dataLimit, dataLimitUnit);
    document.querySelectorAll(`.usage-chip[data-username="${username}"]`).forEach(chip => {
        chip.style.setProperty('--stat-rgb', info.color);
        chip.style.setProperty('--stat-rgb-light', info.color_light);
        const fill = chip.querySelector('.usage-bar-fill');
        if (fill) fill.style.width = `${info.pct}%`;
    });
}

function loadUserNodes(e) {
    fetch(`/get_user_nodes/${e}`).then((e => e.json())).then((e => {
        if (e.success) {
            fetchNodesForEdit(e.allowed_nodes)
        }
    })).catch((e => {
        console.error("Error fetching user nodes:", e)
    }))
}

function fetchNodesForAdd() {
    fetch("/get_nodes_for_user_management").then((e => e.json())).then((data => {
        const container = document.getElementById("addNodesContainer");
        if (!container) return;
        container.innerHTML = "";
        
        if (data.success && data.nodes.length > 0) {
            container.className = "grid grid-cols-1 gap-2 bg-gray-900/50 p-2 rounded-lg h-full max-h-54 overflow-y-auto custom-scroll border border-gray-600";
            
            data.nodes.forEach((node => {
                const isOnline = "online" === node.status;
                const labelElement = document.createElement("label");
                labelElement.className = 'server-select-label';
                
                labelElement.innerHTML = `
                    <input type="checkbox" name="selected_nodes" value="${node.id}" 
                           class="absolute opacity-0" 
                           ${isOnline ? "" : "disabled"}>
                    <div class="server-select-card ${isOnline ? "" : "opacity-50 cursor-not-allowed"}">
                         <i class="fas fa-network-wired icon"></i>
                         <span class="name text-sm">${node.name} ${isOnline ? "" : "(Offline)"}</span>
                    </div>
                `;
                container.appendChild(labelElement);
            }));
        } else {
            container.innerHTML = '<p class="text-sm text-gray-400 text-center col-span-full">No nodes available. Add nodes first.</p>';
        }

    })).catch((e => {
        console.error("Error fetching nodes:", e);
        document.getElementById("addNodesContainer").innerHTML = '<p class="text-sm text-red-400 text-center col-span-full">Error loading nodes</p>';
    }));
}

function fetchNodesForEdit(allowedNodes = []) {
    const submitButton = document.querySelector('#editForm button[type="submit"]');

    fetch("/get_nodes_for_user_management")
        .then(response => response.json())
        .then(allNodesData => {
            const container = document.getElementById("editNodesContainer");
            if(!container) return;
            container.innerHTML = ""; 

            if (allNodesData.success && allNodesData.nodes.length > 0) {
                container.className = "grid grid-cols-1 gap-2 bg-gray-900/50 p-2 rounded-lg h-full max-h-54 overflow-y-auto custom-scroll border border-gray-600";

                allNodesData.nodes.forEach(node => {
                    const isAllowed = allowedNodes.includes(node.id.toString());
                    const isOnline = "online" === node.status;
                    const labelElement = document.createElement("label");
                    labelElement.className = 'server-select-label';
                    
                    labelElement.innerHTML = `
                        <input type="checkbox" name="selected_nodes" value="${node.id}"
                               class="absolute opacity-0"
                               ${isAllowed ? "checked" : ""}
                               ${isOnline ? "" : "disabled"}>
                        <div class="server-select-card ${isOnline ? "" : "opacity-50 cursor-not-allowed"}">
                            <i class="fas fa-network-wired icon"></i>
                            <span class="name text-sm">${node.name} ${isOnline ? "" : "(Offline)"}</span>
                        </div>
                    `;
                    container.appendChild(labelElement);
                });
            } else {
                container.innerHTML = '<p class="text-sm text-gray-400 text-center col-span-full">No nodes available.</p>';
            }
            
            submitButton.disabled = false;
            submitButton.classList.remove('opacity-50', 'cursor-not-allowed');

        })
        .catch(error => {
            console.error("Error fetching nodes for edit modal:", error);
            document.getElementById("editNodesContainer").innerHTML = '<p class="text-sm text-red-400 text-center col-span-full">Error loading nodes list.</p>';
        });
}

const wgPickerCtxAdd = {
    containerId: 'wgInstancesHiddenAdd',
    fieldName: 'selected_wg_instances',
    summaryId: 'wgSummaryAdd',
    wg1CheckboxId: 'enable_wg1_add',
    baseLabel: 'wg1'
};

const wgPickerCtxEdit = {
    containerId: 'wgInstancesHiddenEdit',
    fieldName: 'selected_wg_instances',
    summaryId: 'wgSummaryEdit',
    wg1CheckboxId: 'edit_enable_wg1',
    baseLabel: 'wg1'
};

function resetWgInstancesForAddUser() {
    const container = document.getElementById(wgPickerCtxAdd.containerId);
    if (container) container.innerHTML = '';
    refreshWgSummary(wgPickerCtxAdd);
}

function populateWgInstancesForEditUser(userAllowedWgInstancesJson, allowedScope) {
    let userWgInstances = [];
    try {
        userWgInstances = JSON.parse(userAllowedWgInstancesJson || '[]');
    } catch (e) {
        userWgInstances = [];
    }
    const container = document.getElementById(wgPickerCtxEdit.containerId);
    if (container) {
        container.innerHTML = '';
        userWgInstances
            .filter(name => name !== 'wg1')
            .forEach(name => {
                const hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = wgPickerCtxEdit.fieldName;
                hidden.value = name;
                container.appendChild(hidden);
            });
    }
    refreshWgSummary(wgPickerCtxEdit);
}

const singboxPickerCtxAdd = {
    containerId: 'singboxInboundsHiddenAdd',
    fieldName: 'selected_singbox_inbounds',
    summaryId: 'singboxSummaryAdd',
    checkboxId: 'enable_singbox_add'
};

const singboxPickerCtxEdit = {
    containerId: 'singboxInboundsHiddenEdit',
    fieldName: 'selected_singbox_inbounds',
    summaryId: 'singboxSummaryEdit',
    checkboxId: 'edit_enable_singbox'
};

function resetSingboxInboundsForAddUser() {
    const container = document.getElementById(singboxPickerCtxAdd.containerId);
    if (container) container.innerHTML = '';
    refreshSingboxSummary(singboxPickerCtxAdd);
}

function populateSingboxInboundsForEditUser(userAllowedSingboxInboundsJson) {
    let userSingboxInbounds = [];
    try {
        userSingboxInbounds = JSON.parse(userAllowedSingboxInboundsJson || '[]');
    } catch (e) {
        userSingboxInbounds = [];
    }
    const container = document.getElementById(singboxPickerCtxEdit.containerId);
    if (container) {
        container.innerHTML = '';
        userSingboxInbounds.forEach(tag => {
            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = singboxPickerCtxEdit.fieldName;
            hidden.value = tag;
            container.appendChild(hidden);
        });
    }
    refreshSingboxSummary(singboxPickerCtxEdit);
}



function openEditModal(buttonElement) {
    const username = buttonElement.dataset.username;
    const modal = document.getElementById('editModal');
    const form = document.getElementById('editForm');
    if (!modal || !form) {
        console.error('openEditModal: #editModal or #editForm not found in DOM');
        return;
    }
    const submitButton = document.getElementById('editFormSubmitBtn');

    modal.dataset.username = username;
    const titleSpan = document.getElementById("editUserModalTitleText");
    if (titleSpan) titleSpan.textContent = `Edit User: ${username}`;
    form.reset();

    const selectAllCheck = document.getElementById('selectAllNodesEdit');
    if(selectAllCheck) selectAllCheck.checked = false;

    const loadingOverlay = document.getElementById('editModalLoadingOverlay');
    if (loadingOverlay) loadingOverlay.classList.remove('hidden');
    modal.classList.remove("hidden");

    fetch(`${adminPanelPath}/get_user_details_for_edit/${username}`)
    .then(res => {
        const contentType = res.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            return res.text().then(text => {
                if (res.status === 200 && /<title>\s*Login/i.test(text)) {
                    throw new Error('Your session has expired. Please refresh the page and log in again.');
                }
                throw new Error(`Server returned an unexpected response (HTTP ${res.status}). Check the panel server log for the real error.`);
            });
        }
        if (!res.ok) {
            return res.json().then(err => { throw new Error(err.message || 'Server responded with an error') });
        }
        return res.json();
    })
    .then(data => {
        if (!data.success) {
            throw new Error(data.message || "Failed to load data.");
        }

        const user = data.user;
        const allNodes = data.all_nodes;

        document.getElementById('edit_max_clients').value = user.max_clients || "1";
        document.getElementById('edit_data_limit').value = user.data_limit || "";
        document.getElementById('edit_data_limit_unit').value = user.data_limit_unit || "GB";
        document.getElementById('edit_user_notes').value = user.notes || "";

        const pendingDaysInput = document.getElementById('edit_pending_activation_days_form');
        const radioFixed = document.querySelector('#editModal input[name="activation_type_choice"][value="fixed"]');
        const radioFlexible = document.querySelector('#editModal input[name="activation_type_choice"][value="flexible"]');
        
        if (fp_edit) fp_edit.clear();
        pendingDaysInput.value = "";

        if (user.activation_type === 'flexible_days' && !user.first_connection_at) {
            radioFlexible.checked = true;
            pendingDaysInput.value = user.pending_activation_days || "";
        } else {
            radioFixed.checked = true;
            if (user.expiry_date) {
                fp_edit.setDate(user.expiry_date, false);
            }
        }
        updateEditModalUI();

        const l2tpCheckbox = document.getElementById('edit_enable_l2tp');
        const l2tpPassInput = document.getElementById('edit_l2tp_password');
        
        if (l2tpCheckbox) {
            l2tpCheckbox.checked = !!user.enable_l2tp;
        }
        if (l2tpPassInput) {
            l2tpPassInput.value = user.l2tp_password || '';
        }

        const ciscoCheckbox = document.getElementById('edit_enable_cisco');
        const ciscoPassInput = document.getElementById('edit_cisco_password');
        
        if (ciscoCheckbox) {
            ciscoCheckbox.checked = !!user.enable_cisco;
        }
        if (ciscoPassInput) {
            ciscoPassInput.value = user.cisco_password || '';
        }

        const wg1Checkbox = document.getElementById('edit_enable_wg1');
        if (wg1Checkbox) {
            wg1Checkbox.checked = !!user.enable_wg1;
        }

        const openvpnCheckbox = document.getElementById('edit_enable_openvpn');
        if (openvpnCheckbox) {
            openvpnCheckbox.checked = !!user.enable_openvpn;
			console.log('OpenVPN checkbox set to:', openvpnCheckbox.checked);
        }

        if (l2tpCheckbox) toggleProtocolInput(l2tpCheckbox, 'edit_l2tpInputParams');
        if (ciscoCheckbox) toggleProtocolInput(ciscoCheckbox, 'edit_ciscoInputParams');

        if (typeof populateWgInstancesForEditUser === 'function') {
            populateWgInstancesForEditUser(user.allowed_wg_instances, data.allowed_wg_instances_scope);
        }

        if (typeof populateSingboxInboundsForEditUser === 'function') {
            populateSingboxInboundsForEditUser(user.allowed_singbox_inbounds);
        }

        document.getElementById("edit-upload").textContent = formatBytes(user.upload_bytes || 0);
        document.getElementById("edit-download").textContent = formatBytes(user.download_bytes || 0);
        document.getElementById("edit-total").textContent = formatBytes((user.upload_bytes || 0) + (user.download_bytes || 0));
        document.getElementById("edit_data_limit_used_badge").textContent = "Used: " + formatBytes((user.upload_bytes || 0) + (user.download_bytes || 0));

        const nodesContainer = document.getElementById("editNodesContainer");
        if (nodesContainer) {
            nodesContainer.innerHTML = "";
            const allowedNodes = user.allowed_nodes || [];

            if (allNodes.length > 0) {
                nodesContainer.className = "grid grid-cols-1 gap-2 bg-gray-900/50 p-2 rounded-lg h-full max-h-54 overflow-y-auto custom-scroll border border-gray-600";
                allNodes.forEach(node => {
                    const isAllowed = allowedNodes.includes(String(node.id));
                    const isOnline = node.status === "online";
                    const labelElement = document.createElement("label");
                    labelElement.className = 'server-select-label';
                    labelElement.innerHTML = `
                        <input type="checkbox" name="selected_nodes" value="${node.id}" class="absolute opacity-0" ${isAllowed ? "checked" : ""} ${isOnline ? "" : "disabled"}>
                        <div class="server-select-card ${isOnline ? "" : "opacity-50 cursor-not-allowed"}">
                            <i class="fas fa-network-wired icon"></i>
                            <span class="name text-sm">${node.name} ${isOnline ? "" : "(Offline)"}</span>
                        </div>`;
                    nodesContainer.appendChild(labelElement);
                });
            } else {
                nodesContainer.innerHTML = '<p class="text-sm text-gray-400 text-center col-span-full">No nodes available.</p>';
            }
        }

        if (loadingOverlay) loadingOverlay.classList.add('hidden');
    })
    .catch(error => {
        console.error("Error fetching data for edit modal:", error);
        showAlert('error', error.message || 'Could not load user data. Please try again.');
        closeEditModal();
    });

    form.action = adminPanelPath ? `${adminPanelPath}/edit_user/${username}` : `/edit_user/${username}`;
}


function handleEditUserFormSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const submitButton = document.getElementById('editFormSubmitBtn');
    const formData = new FormData(form);

    if (!submitButton) {
        console.error('handleEditUserFormSubmit: #editFormSubmitBtn not found in DOM');
        return;
    }
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Saving...';

    fetch(form.action, { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeEditModal();
            showAlert('success', data.message);

            const userRowDesktop = document.querySelector(`#userListDesktop tr[data-username="${data.username}"]`);
            const userCardMobile = document.querySelector(`#userListMobile div[data-username="${data.username}"]`);
            
            const tempDiv = document.createElement('div');

            if (userRowDesktop && data.updated_html.desktop) {
                tempDiv.innerHTML = `<table><tbody>${data.updated_html.desktop}</tbody></table>`;
                const newRow = tempDiv.querySelector('tr');
                if (newRow) {
                    userRowDesktop.parentNode.replaceChild(newRow, userRowDesktop);
                }
            }
            if (userCardMobile && data.updated_html.mobile) {
                tempDiv.innerHTML = data.updated_html.mobile;
                const newCard = tempDiv.firstChild;
                if (newCard) {
                    userCardMobile.parentNode.replaceChild(newCard, userCardMobile);
                }
            }
            
            setupConnectionTooltips();
            processLastSeenTooltips();

        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        showAlert('error', 'An unexpected network error occurred.');
    })
    .finally(() => {
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-save mr-2"></i> Save Changes';
    });
}

let currentDeleteUsername = "";

function openDeleteConfirmModal(e) {
    currentDeleteUsername = e, document.getElementById("deleteConfirmText").textContent = `Are you sure you want to delete user ${e}?`, document.getElementById("deleteConfirmModal").classList.remove("hidden")
}

function closeDeleteConfirmModal() {
    document.getElementById("deleteConfirmModal").classList.add("hidden")
}

function confirmDelete() {
    if (!currentDeleteUsername) {
        closeDeleteConfirmModal();
        return;
    }

    const usernameToDelete = currentDeleteUsername;
    const deleteButtonInModal = document.querySelector('#deleteConfirmModal button[onclick="confirmDelete()"]');

    deleteButtonInModal.disabled = true;
    deleteButtonInModal.innerHTML = `<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>Deleting...`;

    fetch(`${adminPanelPath}/delete_user/${usernameToDelete}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const userRowDesktop = document.querySelector(`#userListDesktop tr.user-item[data-username="${usernameToDelete}"]`);
            const userCardMobile = document.querySelector(`#userListMobile div.user-item[data-username="${usernameToDelete}"]`);

            if (userRowDesktop) {
                userRowDesktop.style.transition = 'opacity 0.5s ease';
                userRowDesktop.style.opacity = '0';
                setTimeout(() => userRowDesktop.remove(), 500);
            }
            if (userCardMobile) {
                userCardMobile.style.transition = 'opacity 0.5s ease';
                userCardMobile.style.opacity = '0';
                setTimeout(() => userCardMobile.remove(), 500);
            }

            showAlert('success', data.message);
        } else {
            showAlert('error', data.message || 'An unknown error occurred.');
        }
    })
    .catch(error => {
        showAlert('error', 'Could not connect to the server.');
        console.error('Error:', error);
    })
    .finally(() => {
        deleteButtonInModal.disabled = false;
        deleteButtonInModal.innerHTML = `Delete`;
        closeDeleteConfirmModal();
    });
}

function getUserConnections(e) {
    return fetch(`/get_user_connections/${e}`).then((e => e.json())).then((e => e.connections)).catch((e => (console.error("Error fetching user connections:", e), [])))
}

function connectionProtocolBadge(protocol, protocolLabel, transportType, inboundTag) {
    const p = String(protocol || '').toLowerCase();
    let icon = 'fa-network-wired', rgb = '156,163,175', labelOverride = null;
    let showTransport = false;

    if (p === 'singbox') {
        icon = 'fa-bolt';
        rgb = '251,191,36';
        labelOverride = 'sing-box';
        showTransport = true;
    } else if (p === 'openvpn') {
        icon = 'fa-shield-alt';
        rgb = '129,140,248';
        labelOverride = 'OpenVPN';
    } else if (p === 'l2tp') {
        icon = 'fa-layer-group';
        rgb = '167,139,250';
        labelOverride = 'L2TP';
    } else if (p === 'cisco') {
        icon = 'fa-globe';
        rgb = '45,212,191';
        labelOverride = 'Cisco';
    } else if (p.startsWith('wg')) {
        icon = 'fa-network-wired';
        rgb = '74,222,128';
        labelOverride = protocolLabel || 'WireGuard';
    }

    let label = escapeHtml(labelOverride || protocolLabel || protocol || '?');

    if (showTransport) {
        if (transportType) {
            const transportDisplay = String(transportType).toUpperCase();
            if (!label.toUpperCase().includes(transportDisplay)) {
                label += ' · ' + escapeHtml(transportDisplay);
            }
        } else if (inboundTag) {
            label += ' · ' + escapeHtml(inboundTag);
        }
    }

    return `<span class="inline-flex items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded flex-shrink-0" 
                 style="background-color:rgba(${rgb},0.18); color:rgb(${rgb});">
        <i class="fas ${icon}"></i>${label}
    </span>`;
}


function setupConnectionTooltips() {
    document.querySelectorAll(".connection-badge").forEach((badge) => {
        const username = badge.getAttribute("data-username");
        const tooltip = document.createElement("div");
        tooltip.className = "connection-tooltip";
        badge.appendChild(tooltip);

        badge.addEventListener("mouseenter", async () => {
            try {
                const response = await fetch(`/get_user_connections/${username}`);
                const data = await response.json();
                const connData = data.connections || [];

                if (connData.length > 0) {
                    let htmlContent = '<div class="flex flex-col gap-1">';
                    connData.forEach((conn) => {
                        const badgeHtml = connectionProtocolBadge(
                            conn.protocol,
                            conn.protocol_label,
                            conn.transport_type,
                            conn.inbound_tag
                        );
                        const content = conn.name ? escapeHtml(conn.name) : '';
                        htmlContent += `
                            <div class="flex items-center gap-2">
                                ${badgeHtml}
                                ${content ? `<span>${content}</span>` : ''}
                            </div>
                        `;
                    });
                    htmlContent += "</div>";
                    tooltip.innerHTML = htmlContent;
                } else {
                    tooltip.innerHTML = "No active connections";
                }
            } catch (error) {
                console.error("Error loading connections:", error);
                tooltip.innerHTML = "Error loading connections";
            }
        });

        badge.addEventListener("mouseleave", () => {
            tooltip.innerHTML = "";
        });
    });
}



function openDownloadOptionsModal(e) {
    fetch(`/get_download_options/${e}`).then((e => e.json())).then((e => {
        const t = document.getElementById("downloadOptionsList");
        t.innerHTML = "", e.options.forEach((e => {
            const n = document.createElement("div");
            n.className = "mb-4", n.innerHTML = `\n                    <a href="${e.download_url}" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-3 rounded-lg flex items-center justify-between gap-2 w-full">\n                        <div class="flex items-center gap-2">\n                            <span class="server-icon ${"main"===e.server?"main":"node"}">\n                                ${"main"===e.server?'<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>':'<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle></svg>'}\n                            </span>\n                            <span>${e.server === "main" ? MOTHER_OVPN_NAME : `Node: ${e.name}`}</span>
\n                        </div>\n                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">\n                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />\n                        </svg>\n                    </a>\n                `, t.appendChild(n)
        })), document.getElementById("downloadOptionsModal").classList.remove("hidden")
    })).catch((e => {
        console.error("Error fetching download options:", e)
    }))
}

function closeDownloadOptionsModal() {
    document.getElementById("downloadOptionsModal").classList.add("hidden")
}

function filterUsers() {
    const e = document.getElementById("searchInput").value.toLowerCase();
    document.querySelectorAll(".user-item").forEach((t => {
        t.querySelector(".username").textContent.toLowerCase().includes(e) ? t.style.display = "" : t.style.display = "none"
    }))
}

function openAddUserModal() {
    const addUserForm = document.querySelector('#addUserModal form');
    if (addUserForm) {
        addUserForm.reset();
    }

    const bulkCheckbox = document.getElementById('bulkAddCheckbox');
    if (bulkCheckbox) {
        bulkCheckbox.checked = false;
    }
	const selectAllCheck = document.getElementById('selectAllNodesAdd');
    if(selectAllCheck) selectAllCheck.checked = false;

    document.getElementById('singleUsernameContainer').style.display = '';
    document.getElementById('bulkAddContainer').style.display = '';

    toggleBulkAdd();

    document.getElementById("addUserModal").classList.remove("hidden");
    fetchNodesForAdd();
    resetWgInstancesForAddUser();
    resetSingboxInboundsForAddUser();
}

function closeAddUserModal() {
    document.getElementById("addUserModal").classList.add("hidden")
}
document.addEventListener("DOMContentLoaded", (() => {
    document.querySelectorAll('a[href^="/delete_user/"]').forEach((e => {
        e.addEventListener("click", (function(e) {
            e.preventDefault();
            openDeleteConfirmModal(this.getAttribute("href").split("/")[2])
        }))
    }))
})), document.addEventListener("DOMContentLoaded", (() => {
    setupConnectionTooltips()
}))
let currentResetUsername = "";

function openResetConfirmModal(e) {
    currentResetUsername = e, document.getElementById("resetConfirmText").textContent = `Are you sure you want to reset traffic for ${e}?`, document.getElementById("resetConfirmModal").classList.remove("hidden")
}

function closeResetConfirmModal() {
    document.getElementById("resetConfirmModal").classList.add("hidden")
}

function confirmResetTraffic() {
    if (!currentResetUsername) {
        closeResetConfirmModal();
        return;
    }

    const usernameToReset = currentResetUsername;
    const resetButtonInModal = document.querySelector('#resetConfirmModal button[onclick="confirmResetTraffic()"]');
    
    resetButtonInModal.disabled = true;
    resetButtonInModal.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Resetting...';

    fetch(`/reset_traffic/${usernameToReset}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert("success", data.message + (data.user_re_enabled ? " User has been re-enabled." : ""));
            
            if (data.updated_user_status) {
                updateUserRowRealtime(data.updated_user_status);
            }
            document.getElementById("edit-download").textContent = "0 B";
            document.getElementById("edit-upload").textContent = "0 B";
            document.getElementById("edit-total").textContent = "0 B";

        } else {
            showAlert("error", `Failed to reset traffic: ${data.message}`);
        }
    })
    .catch(error => {
        console.error("Error resetting traffic:", error);
        showAlert("error", "An error occurred while resetting traffic.");
    })
    .finally(() => {
        resetButtonInModal.disabled = false;
        resetButtonInModal.innerHTML = 'Reset';
        closeResetConfirmModal();
    });
}

function resetUserTraffic() {
    const e = document.getElementById("editModal").dataset.username;
    e && openResetConfirmModal(e)
}

// ---------- HWID Devices ----------
let currentHwidUsername = null;
let currentHwidDeleteId = null;

function hwidOsIcon(os) {
    const o = (os || "").toLowerCase();
    if (o.includes("ios") || o.includes("iphone") || o.includes("ipad") || o.includes("mac")) return "fa-apple";
    if (o.includes("android")) return "fa-android";
    if (o.includes("windows")) return "fa-windows";
    if (o.includes("linux")) return "fa-linux";
    return "fa-mobile-alt";
}

function renderHwidList(hwids) {
    const container = document.getElementById("hwidDevicesList");
    if (!container) return;

    if (!hwids || hwids.length === 0) {
        container.innerHTML = `
            <div class="hwid-empty-state">
                <i class="fas fa-mobile-alt"></i>
                <span>No devices registered yet</span>
            </div>`;
        return;
    }

    container.innerHTML = hwids.map(d => {
        const model = escapeHtml(d.device_model || "Unknown device");
        const osLine = [d.device_os, d.ver_os].filter(Boolean).map(escapeHtml).join(" ");
        const iconClass = hwidOsIcon(d.device_os);
        return `
        <div class="hwid-device-row">
            <div class="hwid-device-icon"><i class="fab ${iconClass}"></i></div>
            <div class="hwid-device-info">
                <div class="hwid-device-model">${model}</div>
                <div class="hwid-device-meta">${osLine || "&mdash;"} &middot; last seen ${escapeHtml(d.last_seen || "?")}</div>
            </div>
            <button type="button" class="hwid-device-delete" onclick="openDeleteHwidConfirm(${d.id})" title="Remove device">
                <i class="fas fa-times"></i>
            </button>
        </div>`;
    }).join("");
}

function loadUserHwids(username, maxClients) {
    currentHwidUsername = username;
    fetch(`${adminPanelPath}/get_user_hwids/${username}`)
        .then(res => res.json())
        .then(data => {
            if (!data.success) return;
            renderHwidList(data.hwids);
            const badge = document.getElementById("hwidCountBadge");
            if (badge) {
                const limit = data.max_clients || maxClients || 0;
                badge.textContent = `${data.hwids.length} / ${limit || "∞"}`;
            }
        })
        .catch(err => console.error("loadUserHwids failed:", err));
}

function openDeleteHwidConfirm(hwidId) {
    currentHwidDeleteId = hwidId;
    document.getElementById("deleteHwidConfirmModal").classList.remove("hidden");
}

function closeDeleteHwidConfirm() {
    document.getElementById("deleteHwidConfirmModal").classList.add("hidden");
}

function confirmDeleteHwid() {
    if (!currentHwidUsername || !currentHwidDeleteId) {
        closeDeleteHwidConfirm();
        return;
    }
    fetch(`/delete_user_hwid/${currentHwidUsername}/${currentHwidDeleteId}`, { method: "POST" })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                loadUserHwids(currentHwidUsername);
            } else {
                showAlert("error", data.message || "Failed to remove device.");
            }
        })
        .catch(() => showAlert("error", "An error occurred while removing the device."))
        .finally(() => closeDeleteHwidConfirm());
}

function openResetHwidsConfirm() {
    if (!currentHwidUsername) return;
    document.getElementById("resetHwidsConfirmModal").classList.remove("hidden");
}

function closeResetHwidsConfirm() {
    document.getElementById("resetHwidsConfirmModal").classList.add("hidden");
}

function confirmResetHwids() {
    if (!currentHwidUsername) {
        closeResetHwidsConfirm();
        return;
    }
    fetch(`/reset_user_hwids/${currentHwidUsername}`, { method: "POST" })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                loadUserHwids(currentHwidUsername);
            } else {
                showAlert("error", data.message || "Failed to reset devices.");
            }
        })
        .catch(() => showAlert("error", "An error occurred while resetting devices."))
        .finally(() => closeResetHwidsConfirm());
}

function closeEditModal() {
    document.getElementById("editModal").classList.add("hidden")
}

function updateTrafficUsage(username) {
    fetch(`/get_traffic_usage/${username}`)
    .then(response => response.json())
    .then(data => {
        if (!data) return;

        const totalFormatted = formatBytes(data.total || 0);
        const downloadFormatted = formatBytes(data.download || 0);
        const uploadFormatted = formatBytes(data.upload || 0);

        const limitBytes = data.limit ? data.limit * (data.limit_unit === 'MB' ? 1024 * 1024 : 1024 ** 3) : 0;
        const limitFormatted = data.limit ? formatBytes(limitBytes) : null;

        applyUsageBarInfo(username, data.total || 0, data.limit, data.limit_unit);

        const totalDesktopEl = document.getElementById(`total-${username}`);
        if (totalDesktopEl) {
            const limitText = limitFormatted ? `/ ${limitFormatted}` : '/ Unlimited';
            totalDesktopEl.innerHTML = `${totalFormatted} ${limitText}`;
        }

        const totalMobileEl = document.getElementById(`total-mobile-${username}`);
        if (totalMobileEl) {
            const limitText = limitFormatted ? `/ ${limitFormatted}` : '/ Unlimited';
            totalMobileEl.innerHTML = `${totalFormatted} ${limitText}`;
        }

        const downloadIconSvg = '<svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"/></svg>';
        const uploadIconSvg = '<svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"/></svg>';

        const desktopDownload = document.getElementById(`download-details-${username}`);
        if(desktopDownload) {
             desktopDownload.innerHTML = `${downloadIconSvg}${downloadFormatted}`;
        }
        const desktopUpload = document.getElementById(`upload-details-${username}`);
        if(desktopUpload) {
            desktopUpload.innerHTML = `${uploadIconSvg}${uploadFormatted}`;
        }

        const mobileDownload = document.getElementById(`download-details-mobile-${username}`);
        if(mobileDownload) {
            mobileDownload.innerHTML = `${downloadIconSvg}${downloadFormatted}`;
        }
        const mobileUpload = document.getElementById(`upload-details-mobile-${username}`);
        if(mobileUpload) {
            mobileUpload.innerHTML = `${uploadIconSvg}${uploadFormatted}`;
        }
    })
    .catch(error => {
        console.error("Error updating traffic usage:", error);
    });
}

document.addEventListener('mouseover', function (e) {
    const chip = e.target.closest('.hover-traffic');
    if (!chip) return;
    if (chip.contains(e.relatedTarget)) return;
    const username = chip.dataset.username;
    if (username) updateTrafficUsage(username);
});

function syncUserToNodes(e, t) {
    fetch(`/sync_user_to_nodes/${e}?action=${t}`, {
        method: "POST"
    }).then((e => e.json())).then((t => {
        t.success ? showAlert("success", `User ${e} synced to all nodes`) : showAlert("error", `Failed to sync user: ${t.message}`)
    })).catch((e => {
        showAlert("error", `Error syncing user: ${e.message}`)
    }))
}

function handleAddUserSuccess(e) {
    showAlert("success", `User ${e} added successfully`), syncUserToNodes(e, "add"), closeAddUserModal(), window.location.reload()
}

function updateDashboard() {
    const urlParams = new URLSearchParams(window.location.search);
    const adminId = urlParams.get('view_as_admin');
    
    let fetchUrl = "/get_dashboard_stats";
    
    if (adminId) {
        fetchUrl += `?admin_id=${adminId}`;
    }

    fetch(fetchUrl)
    .then(response => response.json())
    .then(data => {
        if (!data || !data.success) {
            console.error("Failed to fetch dashboard stats:", data.message);
            return;
        }

        const stats = {
            onlineUsersCount: data.onlineUsersCount,
            totalUsersCount: data.totalUsersCount,
            expiredUsersCount: data.expiredUsersCount,
            disabledUsersCount: data.disabledUsersCount,
            totalTraffic: formatBytes(data.totalTraffic),
            uploadTraffic: formatBytes(data.totalUpload),
            downloadTraffic: formatBytes(data.totalDownload)
        };
        
        if (document.getElementById('activeNodesCount')) {
            stats.activeNodesCount = data.activeNodesCount;
        }

        for (const [key, value] of Object.entries(stats)) {
            const element = document.getElementById(key);
            if (element) {
                element.textContent = value;
            }
        }
        
        if (data.sub_admin_stats && Object.keys(data.sub_admin_stats).length > 0) {
            const sa_stats = data.sub_admin_stats;
            
            const userCountEl = document.getElementById('subAdminUserCount');
            if (userCountEl) {
                const maxUsersText = sa_stats.max_users ? `/ ${sa_stats.max_users}` : '/ ∞';
                userCountEl.textContent = `${sa_stats.current_users} ${maxUsersText}`;
            }

            if (sa_stats.mode === 'credit') {
                const walletEl = document.getElementById('subAdminWalletBalance');
                const walletIconEl = document.getElementById('subAdminBalanceIcon');

                if (walletEl) {
                    let balanceHtml = '';
                    if (sa_stats.currency_unit === 'DOLLAR') {
                        const val = parseFloat(sa_stats.balance).toFixed(4).replace(/\.?0+$/, "");
                        balanceHtml = `$ ${val}`;
                    } else {
                        const val = Math.round(sa_stats.balance).toLocaleString();
                        balanceHtml = `${val} <span class="text-xs">T</span>`;
                    }
                    walletEl.innerHTML = balanceHtml;

                    
                    
                    
                    
                    const walletCard = walletEl.closest('.mini-stat-card');
                    if (walletCard) {
                        if (sa_stats.balance > 0) {
                            walletCard.style.setProperty('--stat-rgb', '74,222,128');
                            walletCard.style.setProperty('--stat-rgb-light', '22,163,74');
                        } else {
                            walletCard.style.setProperty('--stat-rgb', '248,113,113');
                            walletCard.style.setProperty('--stat-rgb-light', '220,38,38');
                        }
                    }
                }
                
                const totalUsageEl = document.getElementById('subAdminTotalUsage');
                if (totalUsageEl) {
                    totalUsageEl.textContent = formatBytes(sa_stats.used_bytes);
                }
            } else {
                const dataQuotaEl = document.getElementById('subAdminDataQuota');
                if (dataQuotaEl) {
                    const maxGbText = (sa_stats.max_gb && sa_stats.max_gb > 0) ? `${sa_stats.max_gb} GB` : '<span class="text-xl">∞</span>';
                    const usageText = formatBytes(sa_stats.used_bytes);
                    dataQuotaEl.innerHTML = `${usageText} / ${maxGbText}`;
                }
            }
        }

        if (data.users) {
            data.users.forEach(userStatus => {
                updateUserRowUI(userStatus);
            });
        }
    })
    .catch(error => {
        console.error("Error updating dashboard:", error);
    });
}

document.addEventListener("DOMContentLoaded", (() => {
    ["onlineUsersCount", "totalUsersCount", "expiredUsersCount", "disabledUsersCount", "totalTraffic", "uploadTraffic", "downloadTraffic", "activeNodesCount"].forEach((e => {
        const t = localStorage.getItem(e);
        t && document.getElementById(e) && (document.getElementById(e).textContent = t)
    })), updateDashboard(), setInterval(updateDashboard, 5e3)
}))

function toggleBulkAdd() {
  const bulkCheckbox = document.getElementById('bulkAddCheckbox');
  const singleUsernameContainer = document.getElementById('singleUsernameContainer');
  const bulkContainer = document.getElementById('bulkAddContainer');
  const usernameInput = document.getElementById('addUsernameInput');
  const userCountInput = document.getElementById('userCountInput');

  if (bulkCheckbox.checked) {
    singleUsernameContainer.classList.add('hidden');
    usernameInput.required = false;
    usernameInput.value = '';

    bulkContainer.classList.remove('hidden');
    userCountInput.required = true;
  } else {
    singleUsernameContainer.classList.remove('hidden');
    usernameInput.required = true;

    bulkContainer.classList.add('hidden');
    userCountInput.required = false;
    userCountInput.value = '';
  }
}

function toggleExpiryFields() {
    const useFlexibleDaysCheckbox = document.getElementById('useFlexibleDaysCheckbox');
    const expiryDateContainer = document.getElementById('expiryDateContainer');
    const pendingDaysContainer = document.getElementById('pendingDaysContainer');
    const expiryDateInput = document.getElementById('add_expiry_date');
    const pendingDaysInput = document.getElementById('pending_activation_days_form');

    if (useFlexibleDaysCheckbox.checked) {
        expiryDateContainer.classList.add('hidden');
        expiryDateInput.value = ''; 
        expiryDateInput.required = false;

        pendingDaysContainer.classList.remove('hidden');
        pendingDaysInput.required = true;
    } else {
        expiryDateContainer.classList.remove('hidden');
        pendingDaysContainer.classList.add('hidden');
        pendingDaysInput.value = ''; 
        pendingDaysInput.required = false;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('useFlexibleDaysCheckbox')) {
         toggleExpiryFields();
    }
});

function toggleEditExpiryFields() {
    const useFlexibleDaysCheckbox = document.getElementById('editUseFlexibleDaysCheckbox');
    const expiryDateContainer = document.getElementById('editExpiryDateContainer');
    const pendingDaysContainer = document.getElementById('editPendingDaysContainer');
    const expiryDateInput = document.getElementById('edit_expiry_date');
    const pendingDaysInput = document.getElementById('edit_pending_activation_days_form');
    const activationInfo = document.getElementById('editActivationInfo');

    if (useFlexibleDaysCheckbox.checked) {
        expiryDateContainer.classList.add('hidden');
        expiryDateInput.required = false;

        pendingDaysContainer.classList.remove('hidden');
        pendingDaysInput.required = true;
        activationInfo.classList.add('hidden');

    } else {
        expiryDateContainer.classList.remove('hidden');
        pendingDaysContainer.classList.add('hidden');
        pendingDaysInput.required = false;
    }
}





const SYS_HISTORY_MAX = 60;
const sysHistoryBuffers = { cpu: [], ram: [], swap: [], disk: [] };

function sysSmoothPath(points, w, h, scaleMin, scaleMax, padTop, padBottom) {
    const n = points.length;
    const usableH = h - padTop - padBottom;
    const range = (scaleMax - scaleMin) || 1;
    const toY = (v) => padTop + usableH - ((Math.max(scaleMin, Math.min(scaleMax, v)) - scaleMin) / range) * usableH;
    if (n === 0) {
        const y = padTop + usableH;
        return { d: '', last: [w, y] };
    }
    if (n === 1) {
        const y = toY(points[0]);
        return { d: `M 0,${y} L ${w},${y}`, last: [w, y] };
    }
    const stepX = w / (n - 1);
    const xy = points.map((v, i) => [i * stepX, toY(v)]);
    let d = `M ${xy[0][0]},${xy[0][1]}`;
    for (let i = 0; i < n - 1; i++) {
        const p0 = xy[i - 1] || xy[i];
        const p1 = xy[i];
        const p2 = xy[i + 1];
        const p3 = xy[i + 2] || p2;
        const c1x = p1[0] + (p2[0] - p0[0]) / 6;
        const c1y = p1[1] + (p2[1] - p0[1]) / 6;
        const c2x = p2[0] - (p3[0] - p1[0]) / 6;
        const c2y = p2[1] - (p3[1] - p1[1]) / 6;
        d += ` C ${c1x},${c1y} ${c2x},${c2y} ${p2[0]},${p2[1]}`;
    }
    return { d, last: xy[xy.length - 1] };
}

function sysHistoryScale(buf) {
    // به‌جای مقیاس ثابت ۰ تا ۱۰۰، بازه رو بر اساس خودِ داده‌های فعلی
    // تنظیم می‌کنیم -- وگرنه وقتی مصرف واقعی مثلاً بین ۸ تا ۱۵ درصده،
    // نوسانش روی مقیاس ۰-۱۰۰ به یه خط تقریباً صاف و نامرئی توی پایین
    // باکس تبدیل می‌شد.
    if (!buf.length) return { min: 0, max: 100 };
    const dataMin = Math.min(...buf);
    const dataMax = Math.max(...buf);
    const span = dataMax - dataMin;
    const headroom = Math.max(span * 0.2, 2);
    let min = Math.max(0, dataMin - headroom);
    let max = Math.min(100, dataMax + headroom);
    if (max - min < 6) {
        const mid = (max + min) / 2;
        min = Math.max(0, mid - 3);
        max = Math.min(100, mid + 3);
    }
    return { min, max };
}

function sysRedrawHistory(metric) {
    const buf = sysHistoryBuffers[metric];
    const w = 320, h = 84, padTop = 10, padBottom = 6;
    const { min: scaleMin, max: scaleMax } = sysHistoryScale(buf);
    const { d: linePath, last } = sysSmoothPath(buf, w, h, scaleMin, scaleMax, padTop, padBottom);
    const areaPath = linePath ? `${linePath} L ${w},${h} L 0,${h} Z` : '';

    const lineEl = document.getElementById(`${metric}-hist-line`);
    const areaEl = document.getElementById(`${metric}-hist-area`);
    const dotEl = document.getElementById(`${metric}-hist-dot`);
    const haloEl = document.getElementById(`${metric}-hist-halo`);
    if (lineEl) lineEl.setAttribute('d', linePath);
    if (areaEl) areaEl.setAttribute('d', areaPath);
    if (dotEl) { dotEl.setAttribute('cx', last[0]); dotEl.setAttribute('cy', last[1]); }
    if (haloEl) { haloEl.setAttribute('cx', last[0]); haloEl.setAttribute('cy', last[1]); }
}



function sysSeedHistory(metric, arr) {
    const buf = sysHistoryBuffers[metric];
    buf.length = 0;
    (arr || []).slice(-SYS_HISTORY_MAX).forEach(v => buf.push(v));
    if (buf.length) sysRedrawHistory(metric);
}

function sysRenderHistory(metric, percent) {
    const buf = sysHistoryBuffers[metric];
    buf.push(percent);
    if (buf.length > SYS_HISTORY_MAX) buf.shift();
    sysRedrawHistory(metric);
}

function updateSystemStats() {
    const loader = document.getElementById('system-status-loader');

    const getUsageColor = (percent) => {
        if (percent >= 80) {
            return '#ef4444';
        } else if (percent >= 50) {
            return '#fbbf24';
        } else {
            return '#4ade80';
        }
    };

    
    
    const setMeter = (metric, percent) => {
        sysRenderHistory(metric, percent);
        const color = getUsageColor(percent);
        const dotEl = document.getElementById(`${metric}-hist-dot`);
        const haloEl = document.getElementById(`${metric}-hist-halo`);
        if (dotEl) dotEl.style.fill = color;
        if (haloEl) haloEl.style.fill = color;
        const percentEl = document.getElementById(`${metric}-usage-percent`);
        if (percentEl) percentEl.style.color = color;
    };

    fetch('/system_stats')
        .then(response => response.ok ? response.json() : Promise.reject('Network response was not ok.'))
        .then(data => {
            if (!data || !data.success) {
                if (loader) loader.innerHTML = '<span class="text-sm text-red-400">Failed to load</span>';
                return;
            };

            if (loader && loader.style.opacity !== '0') {
                loader.style.opacity = '0';
                setTimeout(() => { loader.style.display = 'none'; }, 300);
            }

            if (data.cpu && data.cpu.usage !== undefined) {
                const percent = data.cpu.usage;
                if (document.getElementById('cpu-usage-percent')) {
                    document.getElementById('cpu-usage-percent').textContent = `${Math.round(percent)}%`;
                }
                setMeter('cpu', percent);

                if (document.getElementById('cpu-frequency-text')) {
                    const freq_mhz = data.cpu.frequency_mhz;
                    const cores = data.cpu.cores;
                    let freqHtml = '';
                    if (freq_mhz > 0) {
                        freqHtml += (freq_mhz >= 1000)
                            ? `${(freq_mhz / 1000).toFixed(2)} GHz`
                            : `${Math.round(freq_mhz)} MHz`;
                    }
                    if (cores > 0) {
                        freqHtml += (freqHtml ? '<br>' : '') + `${cores} cores`;
                    }
                    document.getElementById('cpu-frequency-text').innerHTML = freqHtml;
                }
            }

            if (data.ram && data.ram.total_mb > 0) {
                const percent = data.ram.percentage;
                if(document.getElementById('ram-usage-percent')) document.getElementById('ram-usage-percent').textContent = `${Math.round(percent)}%`;
                if(document.getElementById('ram-usage-text')) document.getElementById('ram-usage-text').textContent = `${data.ram.used_mb}MB / ${data.ram.total_mb}MB`;
                setMeter('ram', percent);
            }

            if (data.swap && data.swap.total_mb > 0) {
                const percent = data.swap.percentage;
                if(document.getElementById('swap-usage-percent')) document.getElementById('swap-usage-percent').textContent = `${Math.round(percent)}%`;
                if(document.getElementById('swap-usage-text')) document.getElementById('swap-usage-text').textContent = `${data.swap.used_mb}MB / ${data.swap.total_mb}MB`;
                setMeter('swap', percent);
            } else {
                if(document.getElementById('swap-usage-percent')) document.getElementById('swap-usage-percent').textContent = 'N/A';
                if(document.getElementById('swap-usage-text')) document.getElementById('swap-usage-text').textContent = 'No Swap';
                setMeter('swap', 0);
            }

            if (data.disk && data.disk.total_gb > 0) {
                const percent = data.disk.percentage;
                if(document.getElementById('disk-usage-percent')) document.getElementById('disk-usage-percent').textContent = `${Math.round(percent)}%`;
                if(document.getElementById('disk-usage-text')) document.getElementById('disk-usage-text').textContent = `${data.disk.used_gb}GB / ${data.disk.total_gb}GB`;
                setMeter('disk', percent);
            }
        })
        .catch(error => {
            console.error('Error fetching system stats:', error);
            if (loader) loader.innerHTML = '<span class="text-sm text-red-400">Error</span>';
        });
}

document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('.system-stats-grid')) {
        // این دو تا درخواست کاملاً مستقلن (یکی گراف تاریخچه، یکی عدد لحظه‌ای) --
        // قبلاً پشت‌سرهم زنجیر شده بودن (اولی باید کامل تموم می‌شد تا دومی
        // حتی شروع بشه)، که یعنی عددهای اصلی بی‌دلیل معطلِ گراف می‌موندن.
        // الان هم‌زمان اجرا میشن.
        fetch('/system_stats_history')
            .then(response => response.ok ? response.json() : Promise.reject('history fetch failed'))
            .then(data => {
                if (data && data.success) {
                    sysSeedHistory('cpu', data.cpu);
                    sysSeedHistory('ram', data.ram);
                    sysSeedHistory('swap', data.swap);
                    sysSeedHistory('disk', data.disk);
                }
            })
            .catch(() => {});

        updateSystemStats();
        setInterval(updateSystemStats, 5000);
    }
});

function updateServiceStatus() {
        if (!document.getElementById('service-control-pod')) return;

        fetch('/service_status')
            .then(res => res.ok ? res.json() : Promise.reject('Service status endpoint failed'))
            .then(data => {
                if (!data.success) return;

                const updateIndicator = (indicatorId, serviceShortName, status) => {
                    const indicator = document.getElementById(indicatorId);
                    if (!indicator) return;
                    const startBtn = document.getElementById(`${serviceShortName}-start-btn`);
                    const stopBtn = document.getElementById(`${serviceShortName}-stop-btn`);

                    indicator.classList.remove('bg-green-500', 'bg-red-500', 'bg-yellow-500', 'bg-gray-500');

                    if (status === 'active') {
                        indicator.classList.add('bg-green-500');
                        indicator.title = 'Active';
                        if (startBtn) startBtn.style.display = 'none';
                        if (stopBtn) stopBtn.style.display = 'flex';
                    } else if (status === 'inactive' || status === 'failed') {
                        indicator.classList.add(status === 'failed' ? 'bg-red-500' : 'bg-yellow-500');
                        indicator.title = status.charAt(0).toUpperCase() + status.slice(1);
                        if (startBtn) startBtn.style.display = 'flex';
                        if (stopBtn) stopBtn.style.display = 'none';
                    } else {
                        indicator.classList.add('bg-gray-500');
                        indicator.title = 'Unknown';
                    }
                };
                
                updateIndicator('openvpn-status-indicator', 'openvpn', data.statuses.openvpn);
                updateIndicator('panel-status-indicator', 'panel', data.statuses.panel);
				if(data.statuses.cisco) updateIndicator('cisco-status-indicator', 'cisco', data.statuses.cisco);
                if(data.statuses.l2tp) updateIndicator('l2tp-status-indicator', 'l2tp', data.statuses.l2tp);

                const l2tpUpdateBtn = document.getElementById('l2tp-update-btn');
                if (l2tpUpdateBtn) {
                    const available = !!(data.updates_available && data.updates_available.l2tp);
                    l2tpUpdateBtn.classList.toggle('hidden', !available);
                    l2tpUpdateBtn.classList.toggle('flex', available);
                }

                const singboxUpdateBtn = document.getElementById('singbox-update-btn');
                if (singboxUpdateBtn) {
                    const available = !!(data.updates_available && data.updates_available.singbox);
                    singboxUpdateBtn.classList.toggle('hidden', !available);
                    singboxUpdateBtn.classList.toggle('flex', available);
                }

                if(data.statuses.wireguard) updateIndicator('wireguard-status-indicator', 'wireguard', data.statuses.wireguard);
                if(data.statuses.singbox) updateIndicator('singbox-status-indicator', 'singbox', data.statuses.singbox);
}).catch(err => console.error("Failed to fetch service status:", err));
    }

    function controlService(serviceName, action) {
    const buttons = document.querySelectorAll(`#${serviceName}-controls button, button[onclick*="'${serviceName}'"]`);
    buttons.forEach(b => {
        b.disabled = true;
        b.classList.add('opacity-50', 'pointer-events-none');
        const icon = b.querySelector('i');
        if (icon && b.onclick.toString().includes(action)) {
            icon.classList.add('fa-spin');
        }
    });

    fetch(`/service_control/${serviceName}/${action}`, { method: 'POST' })
        .then(res => res.ok ? res.json() : Promise.reject('Failed to execute command.'))
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                
                if (serviceName === 'panel' && action === 'restart') {
                    document.body.innerHTML = `<div class="min-h-screen bg-gray-900 flex items-center justify-center text-white text-xl animate-pulse">Panel is restarting... Page will refresh automatically.</div>`;
                    setTimeout(() => {
                        window.location.reload();
                    }, 4000);
                } else {
                    
                    setTimeout(() => {
                        buttons.forEach(b => {
                           const icon = b.querySelector('i');
                           if(icon) icon.classList.remove('fa-spin');
                           b.disabled = false;
                           b.classList.remove('opacity-50', 'pointer-events-none');
                        });
                        updateServiceStatus();
                    }, 7000);
                }
            } else {
                showAlert('error', data.message);
                buttons.forEach(b => {
                    const icon = b.querySelector('i');
                    if(icon) icon.classList.remove('fa-spin');
                    b.disabled = false;
                    b.classList.remove('opacity-50', 'pointer-events-none');
                });
            }
        })
        .catch(err => {
            showAlert('error', 'An error occurred. Could not connect to the server.');
            buttons.forEach(b => {
                const icon = b.querySelector('i');
                if(icon) icon.classList.remove('fa-spin');
                b.disabled = false;
                b.classList.remove('opacity-50', 'pointer-events-none');
            });
        });
}

function updateL2tpConfig() {
    const btn = document.getElementById('l2tp-update-btn');
    if (!btn || btn.disabled) return;

    if (!confirm("Update this server's L2TP config for wider device compatibility (MikroTik/Windows/newer Android)?\n\nOnly /etc/ipsec.conf changes and strongSwan restarts briefly. Existing users and the PSK are not touched.")) {
        return;
    }

    btn.disabled = true;
    const originalHtml = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin fa-xs"></i> Updating...';

    fetch('/update_l2tp_config', { method: 'POST' })
        .then(res => res.json().then(data => ({ ok: res.ok, data })))
        .then(({ ok, data }) => {
            if (data.success) {
                showAlert('success', data.message);
                btn.classList.add('hidden');
                btn.classList.remove('flex');
                setTimeout(updateServiceStatus, 2000);
            } else {
                showAlert('error', data.message);
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            }
        })
        .catch(() => {
            showAlert('error', 'Network error while updating L2TP config.');
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        });
}

function updateSingboxLogrotate() {
    const btn = document.getElementById('singbox-update-btn');
    if (!btn || btn.disabled) return;

    if (!confirm("Install automatic hourly log-size capping for sing-box on this server?\n\nOnly the logrotate config (and an hourly cron check) are added; sing-box itself is not restarted and no inbounds/users are touched. If the log is already oversized, it's cleared immediately too.")) {
        return;
    }

    btn.disabled = true;
    const originalHtml = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin fa-xs"></i> Updating...';

    fetch('/update_singbox_logrotate', { method: 'POST' })
        .then(res => res.json().then(data => ({ ok: res.ok, data })))
        .then(({ ok, data }) => {
            if (data.success) {
                showAlert('success', data.message);
                btn.classList.add('hidden');
                btn.classList.remove('flex');
                setTimeout(updateServiceStatus, 2000);
            } else {
                showAlert('error', data.message);
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            }
        })
        .catch(() => {
            showAlert('error', 'Network error while updating sing-box log rotation.');
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        });
}

    document.addEventListener('DOMContentLoaded', () => {
        if (document.getElementById('service-control-pod')) {
            updateServiceStatus();
            setInterval(updateServiceStatus, 7000);
        }
    });

document.addEventListener('DOMContentLoaded', () => {
    const addUserFab = document.getElementById('floating-add-user-btn');
    const scrollTopBtn = document.getElementById('scroll-to-top-btn');

    const handleScrollButtons = () => {
        if (!addUserFab && !scrollTopBtn) return;

        const scrollY = window.scrollY;

        if (addUserFab) {
            if (scrollY > 200) {
                addUserFab.classList.add('visible');
            } else {
                addUserFab.classList.remove('visible');
            }
        }
        
        if (scrollTopBtn) {
             if (scrollY > 400) {
                scrollTopBtn.classList.add('visible');
            } else {
                scrollTopBtn.classList.remove('visible');
            }
        }
    };

    if (scrollTopBtn) {
        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
    
    window.addEventListener('scroll', handleScrollButtons);
    handleScrollButtons();
});

document.addEventListener('DOMContentLoaded', () => {
    const tableHeaders = document.querySelectorAll('.sortable-header');
    let sortState = {};

    tableHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const sortKey = header.dataset.sortKey;
            const currentDirection = sortState[sortKey] === 'asc' ? 'desc' : 'asc';
            sortTableByColumn(sortKey, currentDirection);
            Object.keys(sortState).forEach(key => {
                if (key !== sortKey) sortState[key] = null;
            });
            sortState[sortKey] = currentDirection;
            updateHeaderIcons();
        });
    });

    function updateHeaderIcons() {
        tableHeaders.forEach(header => {
            const key = header.dataset.sortKey;
            const icon = header.querySelector('i');
            icon.className = 'fas ml-1 ';
            if (sortState[key] === 'asc') icon.classList.add('fa-sort-up');
            else if (sortState[key] === 'desc') icon.classList.add('fa-sort-down');
            else icon.classList.add('fa-sort');
        });
    }

    function sortTableByColumn(key, direction) {
        const tbody = document.getElementById('userListDesktop');
        const rows = Array.from(tbody.querySelectorAll('tr.user-item'));
        rows.sort((a, b) => {
            let valA = a.dataset[key];
            let valB = b.dataset[key];
            if (key === 'status' || key === 'connection' || key === 'traffic') {
                valA = parseFloat(valA) || 0;
                valB = parseFloat(valB) || 0;
            }
            if (valA < valB) return direction === 'asc' ? -1 : 1;
            if (valA > valB) return direction === 'asc' ? 1 : -1;
            return 0;
        });
        rows.forEach(row => tbody.appendChild(row));
    }
    
    const mobileSortSelect = document.getElementById('mobileSortSelect');
    const mobileSortDirectionBtn = document.getElementById('mobileSortDirection');
    let mobileSortDirection = 'asc';

    function sortMobileView() {
        if (!mobileSortSelect) return;
        
        const key = mobileSortSelect.value;
        const direction = mobileSortDirection;
        const container = document.getElementById('userListMobile');
        const items = Array.from(container.querySelectorAll('div.user-item'));

        items.sort((a, b) => {
            let valA = a.dataset[key];
            let valB = b.dataset[key];

            if (key === 'status' || key === 'connection' || key === 'traffic') {
                valA = parseFloat(valA) || 0;
                valB = parseFloat(valB) || 0;
            }

            if (valA < valB) return direction === 'asc' ? -1 : 1;
            if (valA > valB) return direction === 'asc' ? 1 : -1;
            return 0;
        });
        
        items.forEach(item => container.appendChild(item));
    }

    if (mobileSortSelect) {
        mobileSortSelect.addEventListener('change', sortMobileView);
    }

    if (mobileSortDirectionBtn) {
        mobileSortDirectionBtn.addEventListener('click', () => {
            mobileSortDirection = mobileSortDirection === 'asc' ? 'desc' : 'asc';
            const icon = mobileSortDirectionBtn.querySelector('i');
            icon.className = `fas ${mobileSortDirection === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'}`;
            icon.title = mobileSortDirection === 'asc' ? 'Ascending' : 'Descending';
            
            sortMobileView();
        });
    }
});

document.addEventListener('DOMContentLoaded', () => {
    const currentStatus = "{{ status or 'all' }}";
    const filterRadios = document.querySelectorAll('.filter-radio');
    
    function handleFilterChange(selectedValue) {
        const currentUrl = new URL(window.location.href);
        currentUrl.searchParams.set('status', selectedValue);
        currentUrl.searchParams.set('page', '1');
        window.location.href = currentUrl.toString();
    }

    filterRadios.forEach(radio => {
        if (radio.value === currentStatus) {
            radio.checked = true;
            const cardLabel = radio.closest('.filter-card-label');
            if(cardLabel) {
                 cardLabel.classList.add('filter-card-active');
            }
        }

        radio.addEventListener('change', (event) => {
            handleFilterChange(event.target.value);
        });
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const userListDesktop = document.getElementById('userListDesktop');
    const userListMobile = document.getElementById('userListMobile');
    const paginationContainer = document.getElementById('paginationContainer');
    const searchInput = document.getElementById('searchInput');
    const filterControls = document.getElementById('filterControls');
    const protocolFilterControls = document.getElementById('protocolFilterControls');
    const tableContainer = document.querySelector('.bg-gray-800.p-6.rounded-lg.shadow-lg');
    const tableHeaders = document.querySelectorAll('.sortable-header');
    const mobileSortSelect = document.getElementById('mobileSortSelect');
    const mobileSortDirectionBtn = document.getElementById('mobileSortDirection');

    let currentSearch = new URLSearchParams(window.location.search).get('search') || '';
    let currentStatus = new URLSearchParams(window.location.search).get('status') || 'all';
    let currentProtocol = new URLSearchParams(window.location.search).get('protocol') || 'all';
    let viewAsAdmin = new URLSearchParams(window.location.search).get('view_as_admin') || '';
    let currentSortKey = 'id';
    let currentSortDirection = 'desc';
    let lastCheckedRadio = null;

    const debounce = (func, delay) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => func(...a), delay); } };
    const formatTraffic = b => { if(b==null||isNaN(b)||b==0)return'0 B';const k=1024,m=1048576,g=1073741824;if(b<m)return(b/k).toFixed(1)+' KB';if(b<g)return(b/m).toFixed(1)+' MB';return(b/g).toFixed(1)+' GB'; };

    async function fetchAndUpdateView(page = 1, search = currentSearch, status = currentStatus, sortBy = currentSortKey, sortDir = currentSortDirection, protocol = currentProtocol) {
        tableContainer.style.opacity = '0.5';
        const params = new URLSearchParams({ page, search, status, sort_by: sortBy, sort_direction: sortDir, protocol });
        if (viewAsAdmin) params.set('view_as_admin', viewAsAdmin);

        try {
            const response = await fetch(`/api/v1/users/list?${params.toString()}`);
            if (!response.ok) throw new Error('API request failed');

            const data = await response.json();
            userListDesktop.innerHTML = data.desktop_html;
            userListMobile.innerHTML = data.mobile_html;
            paginationContainer.innerHTML = data.pagination_html;

            currentSearch = search;
            currentStatus = status;
            currentSortKey = sortBy;
            currentSortDirection = sortDir;
            currentProtocol = protocol;

            updateActiveFilterCard();
            updateActiveProtocolFilter();
            updateHeaderIcons();
            setupConnectionTooltips();
			processLastSeenTooltips();

        } catch (error) {
            console.error('Fetch error:', error);
            userListDesktop.innerHTML = '<tr><td colspan="7" class="text-center py-5 text-red-400">Error loading users.</td></tr>';
            userListMobile.innerHTML = '<div class="text-center py-4 text-red-400">Error loading users.</div>';
        } finally {
            tableContainer.style.opacity = '1';
        }
    }

window.updateUserRowUI = (d) => {
    const u = d.username; 

    const userItems = document.querySelectorAll(`.user-item[data-username="${u}"]`);
    if (!userItems.length) return;

    userItems.forEach(item => {
        item.dataset.active = d.is_active ? 'true' : 'false';
        item.dataset.datalimited = d.is_data_limited ? 'true' : 'false';
    });

    const canBeActive = !d.is_expired && !d.is_data_limited;
    const isEffectivelyActive = d.is_active && canBeActive;

    document.querySelectorAll(`#status-controls-${u}, #status-controls-mobile-${u}`).forEach(container => {
        const checkbox = container.querySelector('input[type="checkbox"]');
        const slider = container.querySelector('.slider.round');
        const statusText = container.querySelector('.user-status-text');

        if (checkbox && slider) {
            checkbox.checked = isEffectivelyActive;
            checkbox.disabled = !canBeActive;
            slider.classList.toggle('disabled', !canBeActive);
        }
        
        if (statusText) {
            if (d.is_expired) { statusText.innerHTML = '<span class="user-status-pill is-bad"><i class="fas fa-lock"></i> Expired</span>'; }
            else if (d.is_data_limited) { statusText.innerHTML = '<span class="user-status-pill is-warn"><i class="fas fa-lock"></i> Data Limit</span>'; }
            else if (!d.is_active) { statusText.innerHTML = '<span class="user-status-pill is-warn"><i class="fas fa-lock"></i> Disabled</span>'; }
            else { statusText.innerHTML = '<span class="user-status-pill is-ok"><i class="fas fa-check-circle"></i> Active</span>'; }
        }
    });

    document.querySelectorAll(`#status-icon-${u}, #status-icon-mobile-${u}`).forEach(iconContainer => {
        if (d.is_expired) { iconContainer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>'; }
        else if (d.is_data_limited || !d.is_active) { iconContainer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>'; }
        else { iconContainer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293z" clip-rule="evenodd" /></svg>'; }
    });

    let expiryHTML = '';
    if (d.activation_type === 'flexible_days' && !d.first_connection_at) {
        expiryHTML = `<i class="fas fa-hourglass-start" title="Activation after first connection"></i><span>Pending (${d.pending_activation_days}d)</span>`;
    } else {
        const expiryText = (d.expiry_date && d.expiry_date !== 'Unlimited') ? JalaliCalendar.formatDateDisplay(d.expiry_date, { dateOnly: true }) : 'Unlimited';
        expiryHTML = `<i class="fas fa-calendar-alt"></i><span>${expiryText}</span>`;
    }
    document.querySelectorAll(`#expiry-td-${u} > div, #expiry-div-${u}`).forEach(el => {
        el.innerHTML = expiryHTML;
    });

    let tooltipText = 'Never connected';
if (d.active > 0) {
    tooltipText = 'Online';
} else if (d.last_connection_at) {
    const lastSeenDate = new Date(d.last_connection_at);
    tooltipText = `Last Seen: ${JalaliCalendar.formatDateDisplay(lastSeenDate)}`;
}

    document.querySelectorAll(`.status-circle-${u}`).forEach(e => {
        e.classList.toggle('online', d.active > 0);
        e.classList.toggle('offline', d.active <= 0);
    });
    document.querySelectorAll(`.user-connections-${u}`).forEach(e => {
        e.textContent = `${d.max_clients}/${d.active}`;
    });
    document.querySelectorAll(`.connection-badge[data-username="${u}"]`).forEach(badge => {
        badge.classList.toggle('user-chip-danger', d.disable_reason === 'CONNECTION_LIMIT');
    });
    document.querySelectorAll(`#username-box-${u}, #username-box-mobile-${u}`).forEach(box => {
        box.setAttribute('data-tooltip-text', tooltipText);
    });

    const total_traffic_bytes = (d.bytes_received || 0) + (d.bytes_sent || 0);
    const total_traffic_formatted = formatBytes(total_traffic_bytes);
    const limit_bytes = d.data_limit ? d.data_limit * (d.data_limit_unit === 'MB' ? 1024 * 1024 : 1024 ** 3) : 0;
    const limit_desktop_formatted = d.data_limit ? `/ ${formatBytes(limit_bytes)}` : `/ Unlimited`;
    const limit_mobile_formatted = d.data_limit ? `/ ${formatBytes(limit_bytes)}` : `/ Unlimited`;

    applyUsageBarInfo(u, total_traffic_bytes, d.data_limit, d.data_limit_unit);

    const total_desktop_el = document.getElementById(`total-${u}`);
    if (total_desktop_el) { total_desktop_el.innerHTML = `${total_traffic_formatted} ${limit_desktop_formatted}`; }
    const total_mobile_el = document.getElementById(`total-mobile-${u}`);
    if (total_mobile_el) { total_mobile_el.innerHTML = `${total_traffic_formatted} ${limit_mobile_formatted}`; }

    const downloadFormatted = formatBytes(d.bytes_received || 0);
    const uploadFormatted = formatBytes(d.bytes_sent || 0);
    document.querySelectorAll(`#download-details-${u}, #download-details-mobile-${u}`).forEach(el => { el.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"></path></svg>${downloadFormatted}`; });
    document.querySelectorAll(`#upload-details-${u}, #upload-details-mobile-${u}`).forEach(el => { el.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"></path></svg>${uploadFormatted}`; });
};

    const updateActiveFilterCard = ()=>{document.querySelectorAll('.filter-card-label').forEach(c=>{const r=c.querySelector('input[type="radio"]');c.classList.toggle('filter-card-active', !!(r&&r.value===currentStatus&&currentStatus!=='all'))})};
    const updateActiveProtocolFilter = ()=>{ if(!protocolFilterControls) return; protocolFilterControls.querySelectorAll('.filter-card-label').forEach(c=>{const cb=c.querySelector('input[type="checkbox"]'); if(!cb) return; cb.checked = currentProtocol!=='all' && currentProtocol.split(',').includes(cb.value); c.classList.toggle('filter-card-active', cb.checked);}) };
    const updateHeaderIcons = () => { tableHeaders.forEach(h => { const k = h.dataset.sortKey, i = h.querySelector('i'); i.className = 'fas ml-1 '; if(k === currentSortKey) i.classList.add(currentSortDirection === 'asc' ? 'fa-sort-up' : 'fa-sort-down'); else i.classList.add('fa-sort'); }); };

    searchInput.addEventListener('input', debounce(e => fetchAndUpdateView(1, e.target.value, currentStatus, currentSortKey, currentSortDirection), 400));
    document.getElementById('searchForm').addEventListener('submit', e => e.preventDefault());
    filterControls.addEventListener('click', e => { const c = e.target.closest('.filter-card-label'); if(!c) return; e.preventDefault(); const r = c.querySelector('input[type="radio"]'); if(!r) return; const n = r.value; let t; if (r === lastCheckedRadio) { r.checked = false; lastCheckedRadio = null; t = 'all'; } else { if(lastCheckedRadio) lastCheckedRadio.checked = false; r.checked = true; lastCheckedRadio = r; t = n; } fetchAndUpdateView(1, currentSearch, t, currentSortKey, currentSortDirection); });
    const debouncedProtocolFetch = debounce((p) => { fetchAndUpdateView(1, currentSearch, currentStatus, currentSortKey, currentSortDirection, p); }, 350);
    if (protocolFilterControls) { protocolFilterControls.addEventListener('click', e => { const c = e.target.closest('.filter-card-label'); if(!c) return; const selected = Array.from(protocolFilterControls.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value); const p = selected.length ? selected.join(',') : 'all'; c.classList.toggle('filter-card-active', !!c.querySelector('input[type="checkbox"]').checked); debouncedProtocolFetch(p); }); }
    paginationContainer.addEventListener('click', e => { const l = e.target.closest('a.pagination-link'); if (!l || l.classList.contains('cursor-not-allowed')) return; e.preventDefault(); fetchAndUpdateView(l.dataset.page, currentSearch, currentStatus, currentSortKey, currentSortDirection); });
    tableHeaders.forEach(h => h.addEventListener('click', () => { const k = h.dataset.sortKey; const d = (k === currentSortKey && currentSortDirection === 'asc') ? 'desc' : 'asc'; fetchAndUpdateView(1, currentSearch, currentStatus, k, d); }));
    if(mobileSortSelect) mobileSortSelect.addEventListener('change', () => fetchAndUpdateView(1, currentSearch, currentStatus, mobileSortSelect.value, currentSortDirection));
    if(mobileSortDirectionBtn) mobileSortDirectionBtn.addEventListener('click', () => { const newDir = currentSortDirection === 'asc' ? 'desc' : 'asc'; const icon = mobileSortDirectionBtn.querySelector('i'); icon.className = `fas ${newDir === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'}`; fetchAndUpdateView(1, currentSearch, currentStatus, currentSortKey, newDir); });
    
    const initializeApp = () => {
        const params = new URLSearchParams(window.location.search);
        currentSortKey = params.get('sort_by') || 'id';
        currentSortDirection = params.get('sort_direction') || 'desc';
        updateActiveFilterCard();
        const initialActiveRadio = document.querySelector(`.filter-radio[value="${currentStatus}"]`);
        if(initialActiveRadio) { initialActiveRadio.checked = true; lastCheckedRadio = initialActiveRadio; }
        updateHeaderIcons();
        if(mobileSortSelect) { mobileSortSelect.value = currentSortKey; if (window.EylCustomSelect) window.EylCustomSelect.sync(mobileSortSelect); }
        if(mobileSortDirectionBtn) mobileSortDirectionBtn.querySelector('i').className = `fas ${currentSortDirection === 'asc' ? 'fa-arrow-up' : 'fa-arrow-down'}`;
    };
    
    initializeApp();
	processLastSeenTooltips();
});

function toggleUserStatus(username, desiredState) {
    const userRows = document.querySelectorAll(`.user-item[data-username="${username}"]`);
    if (!userRows.length) return;

    userRows.forEach(row => {
        const controls = row.querySelector('.user-status-controls');
        if (controls) {
            const statusText = controls.querySelector('.user-status-text');
            const checkbox = controls.querySelector('input[type="checkbox"]');
            
            controls.classList.add('processing');
            
            if (statusText) {
                statusText.innerHTML = '<span class="text-sm text-gray-400"><i class="fas fa-spinner fa-spin"></i></span>';
            }
            if(checkbox) {
                checkbox.checked = desiredState;
            }
        }
    });

    fetch(`/toggle_user_status/${username}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isActive: desiredState })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status && data.status.username) {
            updateUserRowRealtime(data.status);
        } else {
            showAlert('error', data.message || "Failed to toggle user status.");
            const revertState = {
                ...JSON.parse(JSON.stringify(userRows[0].dataset)),
                username: username,
                is_active: !desiredState,
                disable_reason: userRows[0].dataset.disableReason || null
            };
            updateUserRowRealtime(revertState);
        }
    })
    .catch(error => {
        showAlert('error', 'An error occurred while changing user status.');
        const revertState = {
            ...JSON.parse(JSON.stringify(userRows[0].dataset)),
            username: username,
            is_active: !desiredState,
            disable_reason: userRows[0].dataset.disableReason || null
        };
        updateUserRowRealtime(revertState);
    })
    .finally(() => {
        setTimeout(() => {
            userRows.forEach(row => {
                const controls = row.querySelector('.user-status-controls');
                if (controls) {
                    controls.classList.remove('processing');
                }
            });
        }, 500);
    });
}

function handleAddUserFormSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const submitButton = form.querySelector('button[type="submit"]');
    const formData = new FormData(form);
    
    const isBulk = document.getElementById('bulkAddCheckbox').checked;
    if (isBulk) {
        const userCountInput = document.getElementById('userCountInput');
        const userCount = parseInt(userCountInput.value || '0');
        
        if (userCount > 300) {
            showAlert('error', 'Maximum 300 users allowed per bulk creation.');
            userCountInput.value = 300;
            return;
        }
        if (userCount < 1) {
            showAlert('error', 'Minimum 1 user required.');
            return;
        }
    }
    
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Creating...';
    
    fetch(form.action, { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const desktopList = document.getElementById('userListDesktop');
            const mobileList = document.getElementById('userListMobile');
            if (desktopList && data.new_users_html.desktop) {
                desktopList.insertAdjacentHTML('afterbegin', data.new_users_html.desktop);
            }
            if (mobileList && data.new_users_html.mobile) {
                mobileList.insertAdjacentHTML('afterbegin', data.new_users_html.mobile);
            }
            document.querySelectorAll('.no-users-placeholder').forEach(function(el) { el.remove(); });
            showAlert('success', data.message);
            closeAddUserModal();
            updateDashboard();
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An unexpected error occurred.');
    })
    .finally(() => {
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-check mr-2"></i> Create User(s)';
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const addUserForm = document.querySelector('#addUserModal form');
    if (addUserForm) {
        addUserForm.addEventListener('submit', handleAddUserFormSubmit);
    }
});

function handleEditUserFormSubmit(event) {
    event.preventDefault();

    const form = event.target;
    const submitButton = document.getElementById('editFormSubmitBtn');
    const formData = new FormData(form);
    const username = document.getElementById('editModal').dataset.username;

    if (!submitButton) {
        console.error('handleEditUserFormSubmit: #editFormSubmitBtn not found in DOM');
        return;
    }
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Saving...';

    fetch(form.action, {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeEditModal();
            showAlert('success', data.message);

            const userRowDesktop = document.querySelector(`#userListDesktop tr[data-username="${data.username}"]`);
            const userCardMobile = document.querySelector(`#userListMobile div[data-username="${data.username}"]`);

            if (userRowDesktop && data.updated_html.desktop) {
                userRowDesktop.outerHTML = data.updated_html.desktop;
            }
            if (userCardMobile && data.updated_html.mobile) {
                userCardMobile.outerHTML = data.updated_html.mobile;
            }
            
            setupConnectionTooltips();

        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'An unexpected network error occurred.');
    })
    .finally(() => {
        submitButton.disabled = false;
        submitButton.innerHTML = '<i class="fas fa-save mr-2"></i> Save Changes';
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const editUserForm = document.getElementById('editForm');
    if (editUserForm) {
        editUserForm.addEventListener('submit', handleEditUserFormSubmit);
    }
});


function handleSubLinkClick(element, event) {
    event.preventDefault();
    const url = element.href;
    const originalHTML = element.innerHTML;

    function showFeedback() {
        if (originalHTML.includes('Sub')) {
            element.innerHTML = '<i class="fas fa-check"></i> Copied!';
        } else {
            element.innerHTML = '<i class="fas fa-check h-5 w-5"></i>';
        }
        setTimeout(() => {
            element.innerHTML = originalHTML;
        }, 2000);
    }

    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(url).then(() => {
            showFeedback();
            window.open(url, '_blank');
        }).catch(err => {
            console.error('Modern copy failed, opening link only. Error:', err);
            window.open(url, '_blank');
        });
    } else {
        console.warn('Clipboard API not available. Using fallback method.');
        const textArea = document.createElement("textarea");
        textArea.value = url;
        textArea.style.position = "absolute";
        textArea.style.left = "-9999px";
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            showFeedback();
            window.open(url, '_blank');
        } catch (err) {
            console.error('Fallback copy failed, opening link only. Error:', err);
            window.open(url, '_blank');
        } finally {
            document.body.removeChild(textArea);
        }
    }
}

let adminIdToReset = null;

function openResetAllConfirmModal() {
    const adminSelector = document.getElementById('adminSelector');
    const textElement = document.getElementById('resetAllConfirmText');
    let adminName;

    if (adminSelector) {
        const selectedOption = adminSelector.options[adminSelector.selectedIndex];
        adminIdToReset = selectedOption.value;
        adminName = selectedOption.text;
    } else if (typeof CURRENT_USER_ROLE !== 'undefined' && CURRENT_USER_ROLE === 'sub_admin') {
        adminIdToReset = CURRENT_SUB_ADMIN_ID;
        adminName = 'Your Users';
    } else {
        adminIdToReset = 'main';
        adminName = 'Main Admin Users';
    }

    textElement.innerHTML = `Are you sure you want to reset all user traffic for <strong class="text-yellow-400">${adminName}</strong>? This action cannot be undone.`;
    document.getElementById('resetAllConfirmModal').classList.remove('hidden');
}

function closeResetAllConfirmModal() {
    document.getElementById('resetAllConfirmModal').classList.add('hidden');
    adminIdToReset = null;
}

function confirmResetAll() {
    if (!adminIdToReset) return;

    const confirmBtn = document.getElementById('confirmResetAllBtn');
    confirmBtn.disabled = true;
    confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Resetting...';

    fetch(`${adminPanelPath}/reset_all_traffic`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ admin_id: adminIdToReset })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => window.location.reload(), 2000);
        } else {
            showAlert('error', data.message || 'An unknown error occurred.');
        }
    })
    .catch(error => {
        showAlert('error', 'Could not connect to the server.');
    })
    .finally(() => {
        confirmBtn.disabled = false;
        confirmBtn.innerHTML = 'Yes, Reset';
        closeResetAllConfirmModal();
    });
}

function fillRandomUsername() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let rnd = '';
    for (let i = 0; i < 6; i++) rnd += chars.charAt(Math.floor(Math.random() * chars.length));
    document.getElementById('addUsernameInput').value = 'user' + rnd;
}

function updateAddUserModalUI() {
    const creationType = document.querySelector('input[name="creation_type"]:checked').value;
    const isBulk = creationType === 'bulk';
    document.getElementById('singleUsernameContainer').style.display = isBulk ? 'none' : 'block';
    document.getElementById('addUsernameInput').required = !isBulk;
    document.getElementById('bulkAddContainer').style.display = isBulk ? 'block' : 'none';
    document.getElementById('userCountInput').required = isBulk;
    document.getElementById('bulkAddCheckbox').checked = isBulk;

    const userCountInput = document.getElementById('userCountInput');
    if (isBulk) {
        userCountInput.max = 300;
        userCountInput.placeholder = 'Number of Users (max 300)';
        if (parseInt(userCountInput.value || '0') > 300) {
            userCountInput.value = 300;
        }
    } else {
        userCountInput.max = '';
        userCountInput.placeholder = 'Number of Users (e.g., 10)';
    }

    const activationType = document.querySelector('#addUserModal input[name="activation_type_choice"]:checked').value;
    const isFlexible = activationType === 'flexible';
    
    const expiryDateContainer = document.getElementById('expiryDateContainer');
    const pendingDaysContainer = document.getElementById('pendingDaysContainer');
    const expiryDateInput = document.getElementById('add_expiry_date');
    const pendingDaysInput = document.getElementById('pending_activation_days_form');

    expiryDateContainer.style.display = isFlexible ? 'none' : 'block';
    pendingDaysContainer.style.display = isFlexible ? 'block' : 'none';
    
    if (isFlexible) {
        expiryDateInput.required = false;
        expiryDateInput.disabled = true;
        pendingDaysInput.required = true;
        pendingDaysInput.disabled = false;
    } else {
        expiryDateInput.required = true;
        expiryDateInput.disabled = false;
        pendingDaysInput.required = false;
        pendingDaysInput.disabled = true;
    }

    document.getElementById('useFlexibleDaysCheckbox').checked = isFlexible;
}

let fp_edit;

document.addEventListener('DOMContentLoaded', function() {
    let fp_add;

    const flatpickrConfig = {
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        disableMobile: true,
    };

    function initDatePickers() {
        if (fp_add) fp_add.destroy();
        if (fp_edit) fp_edit.destroy();

        fp_add = JalaliCalendar.initDatePicker("#add_expiry_date", flatpickrConfig);
        fp_edit = JalaliCalendar.initDatePicker("#edit_expiry_date", flatpickrConfig);
    }

    initDatePickers();

    const mainThemeToggleButton = document.getElementById('theme-toggle');
    if (mainThemeToggleButton) {
        mainThemeToggleButton.addEventListener('click', () => {
            setTimeout(initDatePickers, 50);
        });
    }
});

function closeSmartDownloadModal() {
    document.getElementById('smartDownloadModal').classList.add('hidden');
}

async function openSmartDownloadModal(username) {
    if (event) event.preventDefault();
    
    const modal = document.getElementById('smartDownloadModal');
    const modalBody = document.getElementById('downloadModalBody');
    const usernameSpan = document.getElementById('downloadModalUsername');

    usernameSpan.textContent = username;
    modalBody.innerHTML = `<div class="text-center p-8"><i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i></div>`;
    modal.style.zIndex = '11000';
    modal.classList.remove('hidden');

    try {
        const response = await fetch(`/get_download_options/${username}`);
        const data = await response.json();
        
        modalBody.innerHTML = ''; 

        if (data.success && data.groups.length > 0) {
            data.groups.forEach(group => {
                const groupContainer = document.createElement('div');
                groupContainer.className = 'mb-6 animate-fade-in';
                
                let endpointsHTML = '';
                group.endpoints.forEach(endpoint => {
                    if (endpoint.type === 'multi_server') {
if (endpoint.type === 'wg1' || endpoint.type === 'wireguard') {
    
    const dl = endpoint.download_url || '#';
    const title = `WireGuard (wg1) - ${endpoint.name}`;
    const cfg = endpoint.config_text || '';

    endpointsHTML += `
        <div class="download-modal-link bg-green-900 bg-opacity-20 border border-green-500 border-opacity-20 rounded-xl p-3 flex items-center justify-between gap-3">
            <div class="flex flex-col">
                <div class="text-sm font-bold text-white flex items-center gap-2">
                    <i class="fas fa-shield-alt text-green-400"></i>
                    <span>${endpoint.name}</span>
                </div>
                ${endpoint.address ? `<div class="text-xs text-gray-300 mt-1 font-mono">${endpoint.address}</div>` : ''}
            </div>
            <div class="flex items-center gap-2">
                <a href="${dl}" class="px-3 py-2 rounded-lg bg-green-600 hover:bg-green-500 text-white text-xs font-semibold flex items-center gap-2">
                    <i class="fas fa-download"></i><span>Download</span>
                </a>
                <button type="button" onclick="openWireGuardConfigModal('${title.replace(/'/g, "\\'")}', ${JSON.stringify(cfg)}, '${dl}')" class="px-3 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 text-white text-xs font-semibold flex items-center gap-2">
                    <i class="fas fa-qrcode"></i><span>QR</span>
                </button>
            </div>
        </div>
    `;
    return;
}
                        const url = `/download_multi_ovpn/${username}`;
                        endpointsHTML += `
                            <a href="${url}" class="download-modal-link multi-server-link">
                                <span><i class="fas fa-globe-americas"></i><strong>${endpoint.name}</strong></span>
                                <i class="fas fa-download opacity-70"></i>
                            </a>
                        `;
                        return;
                    }

                    let portsHTML = '';
                    (endpoint.ports || group.ports).forEach(portInfo => {
                        const url = `/download_specific_ovpn/${username}/${endpoint.type}/${endpoint.id}/${portInfo.port}/${portInfo.protocol}`;
                        portsHTML += `
                            <a href="${url}" class="download-modal-link">
                                <span><i class="fas fa-network-wired"></i>Port <strong>${portInfo.port}</strong> / ${portInfo.protocol.toUpperCase()} ${portInfo.is_default ? '<span class="default-badge">Default</span>' : ''}</span>
                                <i class="fas fa-download opacity-70"></i>
                            </a>
                        `;
                    });

                    endpointsHTML += `
                        <details class="download-group-details">
                            <summary class="download-group-summary">
                                <span><i class="fas fa-server"></i>${endpoint.name}</span>
                                <i class="fas fa-chevron-down details-arrow"></i>
                            </summary>
                            <div class="download-group-content">
                                ${portsHTML}
                            </div>
                        </details>
                    `;
                });

                groupContainer.innerHTML = `
                    <h3 class="download-group-title">${group.server_title}</h3>
                    <div class="space-y-2">${endpointsHTML}</div>
                `;
                modalBody.appendChild(groupContainer);
            });
        } else {
            modalBody.innerHTML = `<div class="text-center p-8 text-gray-400">No download options available for this user.</div>`;
        }

    } catch (error) {
        modalBody.innerHTML = `<div class="text-center p-8 text-red-400">Failed to load download options.</div>`;
        console.error("Error fetching download options:", error);
    }
}













function escapeHtml(value) {
    return String(value ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}

function jsString(value) {
    return String(value ?? '')
        .replaceAll('\\', '\\\\')
        .replaceAll("'", "\\'")
        .replaceAll('\n', '\\n')
        .replaceAll('\r', '');
}

function closeDownloadOptionsModal() {
    const modal = document.getElementById('downloadOptionsModal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

function closeWgAccessModal() {
    const modal = document.getElementById('wgAccessModal');
    if (modal) {
        modal.classList.add('hidden');
    }
}

function copyAccessText(text, button) {
    if (!text) return;

    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(function() {
            if (button) {
                const icon = button.querySelector('i');
                if (icon) {
                    const oldClass = icon.className;
                    icon.className = 'fas fa-check text-green-400';
                    setTimeout(function() {
                        icon.className = oldClass;
                    }, 1500);
                }
            }
        });
    } else {
        const area = document.createElement('textarea');
        area.value = text;
        document.body.appendChild(area);
        area.select();
        document.execCommand('copy');
        document.body.removeChild(area);
    }
}

function copyWgAccessConfig(button) {
    copyAccessText(currentWgAccessConfig, button);
}

function renderCopyBox(label, value, iconClass, colorClass) {
    if (!value) return '';

    const safeValue = escapeHtml(value);
    const rawValue = jsString(value);
    const safeLabel = escapeHtml(label);

    return `
        <div class="access-copy-box">
            <div class="text-[10px] text-gray-400 uppercase font-bold mb-2 flex items-center gap-2">
                <i class="${iconClass} ${colorClass}"></i>
                <span>${safeLabel}</span>
            </div>
            <div class="flex items-center justify-between gap-3">
                <div class="access-copy-value">${safeValue}</div>
                <button type="button" onclick="copyAccessText('${rawValue}', this)" class="w-8 h-8 rounded-lg bg-gray-700 hover:bg-indigo-600 text-gray-300 hover:text-white flex items-center justify-center flex-shrink-0">
                    <i class="far fa-copy"></i>
                </button>
            </div>
        </div>
    `;
}

function endpointVisual(serverType) {
    const t = serverType === 'main_config' ? 'main' : (serverType === 'node_config' ? 'node' : serverType);
    switch (t) {
        case 'main': return { icon: 'fa-server', color: 'text-blue-400' };
        case 'main_tunnel': return { icon: 'fa-shield-alt', color: 'text-green-400' };
        case 'node': return { icon: 'fa-hdd', color: 'text-red-400' };
        case 'node_tunnel': return { icon: 'fa-route', color: 'text-purple-400' };
        default: return { icon: 'fa-server', color: 'text-indigo-400' };
    }
}

function renderServerCards(servers) {
    if (!servers || !servers.length) {
        return `<div class="text-sm text-gray-400 p-3">No server available.</div>`;
    }

    return servers.map(function(server) {
        const name = escapeHtml(server.name || 'Server');
        const address = escapeHtml(server.address || server.host || server.ip || '');
        const rawAddress = jsString(server.address || server.host || server.ip || '');
        const visual = endpointVisual(server.server_type);

        return `
            <div class="access-server-card">
                <div class="min-w-0">
                    <div class="text-sm font-semibold text-white flex items-center gap-2">
                        <i class="fas ${visual.icon} ${visual.color}"></i>
                        <span class="truncate">${name}</span>
                    </div>
                    ${address ? `<div class="text-xs text-gray-400 mt-1 font-mono truncate">${address}</div>` : ''}
                </div>
                ${address ? `
                    <button type="button" onclick="copyAccessText('${rawAddress}', this)" class="w-9 h-9 rounded-lg bg-gray-700 hover:bg-indigo-600 text-gray-300 hover:text-white flex items-center justify-center flex-shrink-0">
                        <i class="far fa-copy"></i>
                    </button>
                ` : ''}
            </div>
        `;
    }).join('');
}

function renderSubscriptionSection(url) {
    if (!url) return '';

    const safeUrl = escapeHtml(url);
    const rawUrl = jsString(url);

    return `
        <div class="access-section-card">
            <div class="access-section-header">
                <div class="access-section-title">
                    <i class="fas fa-link text-green-400"></i>
                    <span>Subscription Link</span>
                </div>
                <span class="access-pill">Sub</span>
            </div>
            <div class="access-section-body">
                <div class="access-copy-box">
                    <div class="flex items-center justify-between gap-3">
                        <div class="access-copy-value">${safeUrl}</div>
                        <button type="button" onclick="copyAccessText('${rawUrl}', this)" class="w-9 h-9 rounded-lg bg-gray-700 hover:bg-green-600 text-gray-300 hover:text-white flex items-center justify-center flex-shrink-0">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function renderOpenVpnSection(groups, username) {
    if (!groups || !groups.length) return '';

    let html = '';

    groups.forEach(function(group) {
        let endpointsHtml = '';

        (group.endpoints || []).forEach(function(endpoint) {
            if (endpoint.type === 'multi_server') {
                const url = `/download_multi_ovpn/${encodeURIComponent(username)}`;
                endpointsHtml += `
                    <a href="${url}" class="access-action-link bg-gradient-to-r from-purple-700/60 to-blue-700/60">
                        <span class="flex items-center gap-2 min-w-0">
                            <i class="fas fa-globe-americas text-cyan-300"></i>
                            <span class="font-semibold truncate">${escapeHtml(endpoint.name || 'Multi Server')}</span>
                        </span>
                        <i class="fas fa-download opacity-80"></i>
                    </a>
                `;
                return;
            }

            let portsHtml = '';
            const endpointVisualInfo = endpointVisual(endpoint.type);

            (endpoint.ports || group.ports || []).forEach(function(portInfo) {
                const portStr = String(portInfo.port);
                const protocolStr = String(portInfo.protocol || '').toUpperCase();

                const url = `/download_specific_ovpn/${encodeURIComponent(username)}/${encodeURIComponent(endpoint.type)}/${endpoint.id}/${portStr}/${encodeURIComponent(protocolStr.toLowerCase())}`;

                const displayText = portInfo.display_name || `Port <strong>${escapeHtml(portStr)}</strong> / ${escapeHtml(protocolStr)}`;

                portsHtml += `
                    <a href="${url}" class="access-action-link">
                        <span class="flex items-center gap-2 min-w-0">
                            <i class="fas ${endpointVisualInfo.icon} ${endpointVisualInfo.color}"></i>
                            <span class="truncate">${displayText}</span>
                            ${portInfo.is_default ? '<span class="access-pill">Default</span>' : ''}
                        </span>
                        <i class="fas fa-download opacity-80"></i>
                    </a>
                `;
            });

            endpointsHtml += `
                <details class="bg-gray-900/40 border border-gray-700 rounded-xl overflow-hidden">
                    <summary class="p-3 cursor-pointer flex items-center justify-between text-white hover:bg-gray-700/40">
                        <span class="flex items-center gap-2 min-w-0">
                            <i class="fas ${endpointVisualInfo.icon} ${endpointVisualInfo.color}"></i>
                            <span class="font-semibold truncate">${escapeHtml(endpoint.name || 'Endpoint')}</span>
                        </span>
                        <i class="fas fa-chevron-down text-gray-400"></i>
                    </summary>
                    <div class="p-3 border-t border-gray-700 space-y-2">
                        ${portsHtml || '<div class="text-sm text-gray-400">No port available.</div>'}
                    </div>
                </details>
            `;
        });

        html += `
            <div class="access-section-card">
                <div class="access-section-header">
                    <div class="access-section-title">
                        <i class="fas fa-shield-alt text-blue-400"></i>
                        <span>${escapeHtml(group.server_title || 'OpenVPN')}</span>
                    </div>
                    <span class="access-pill">OpenVPN</span>
                </div>
                <div class="access-section-body space-y-2">
                    ${endpointsHtml || '<div class="text-sm text-gray-400">No OpenVPN option available.</div>'}
                </div>
            </div>
        `;
    });

    return html;
}

function renderL2tpSection(l2tp) {
    if (!l2tp || !l2tp.enabled) return '';

    return `
        <div class="access-section-card">
            <div class="access-section-header">
                <div class="access-section-title">
                    <i class="fas fa-layer-group text-blue-400"></i>
                    <span>L2TP / IPsec</span>
                </div>
                <span class="access-pill">Native VPN</span>
            </div>
            <div class="access-section-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    ${renderCopyBox('Username', l2tp.username, 'fas fa-user', 'text-white')}
                    ${renderCopyBox('Password', l2tp.password, 'fas fa-key', 'text-yellow-400')}
                    ${renderCopyBox('IPsec Secret', l2tp.psk, 'fas fa-lock', 'text-pink-400')}
                </div>
                <div class="space-y-2">
                    ${renderServerCards(l2tp.servers)}
                </div>
            </div>
        </div>
    `;
}

function renderCiscoSection(cisco) {
    if (!cisco || !cisco.enabled) return '';

    return `
        <div class="access-section-card">
            <div class="access-section-header">
                <div class="access-section-title">
                    <i class="fas fa-globe text-red-400"></i>
                    <span>Cisco AnyConnect</span>
                </div>
                <span class="access-pill">Cisco</span>
            </div>
            <div class="access-section-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    ${renderCopyBox('Username', cisco.username, 'fas fa-user', 'text-white')}
                    ${renderCopyBox('Password', cisco.password, 'fas fa-key', 'text-yellow-400')}
                </div>
                <div class="space-y-2">
                    ${renderServerCards(cisco.servers)}
                </div>
            </div>
        </div>
    `;
}




let currentWgAccessConfig = '';
let currentWgAccessDownloadUrl = '';
let currentWgAccessName = '';
let currentWgAccessAddress = '';

const WG_DASHBOARD_EMOJI_KEY = "wg_show_emoji_in_file";

function getWgDashboardEmojiPrefFromStorage() {
    const value = localStorage.getItem(WG_DASHBOARD_EMOJI_KEY);
    return value === null ? true : value === "1";
}

function setWgDashboardEmojiEnabled(enabled) {
    localStorage.setItem(WG_DASHBOARD_EMOJI_KEY, enabled ? "1" : "0");
}

function wgDashboardEmojiEnabled() {
    const checkbox = document.getElementById("wgDashboardShowEmojiInFile");
    if (checkbox) {
        return checkbox.checked;
    }
    return getWgDashboardEmojiPrefFromStorage();
}

function buildWgAccessUrlWithEmoji(url) {
    if (!url || url === "#") {
        return "#";
    }

    const useEmoji = wgDashboardEmojiEnabled() ? "1" : "0";
    const separator = url.includes("?") ? "&" : "?";
    return url + separator + "emoji=" + useEmoji;
}

function downloadWgAccessConfig() {
    if (!currentWgAccessDownloadUrl || currentWgAccessDownloadUrl === "#") {
        return;
    }

    window.location.assign(buildWgAccessUrlWithEmoji(currentWgAccessDownloadUrl));
}

function initWgDashboardEmojiCheckbox() {
    const checkbox = document.getElementById("wgDashboardShowEmojiInFile");
    if (!checkbox) {
        return;
    }

    checkbox.checked = getWgDashboardEmojiPrefFromStorage();

    if (checkbox.dataset.bound === "1") {
        return;
    }

    checkbox.addEventListener("change", function() {
        setWgDashboardEmojiEnabled(checkbox.checked);

        if (currentWgAccessDownloadUrl) {
            loadWgAccessConfig();
        }
    });

    checkbox.dataset.bound = "1";
}

async function loadWgAccessConfig() {
    const qr = document.getElementById('wgAccessQr');
    const textarea = document.getElementById('wgAccessConfigText');
    const dl = document.getElementById('wgAccessDownloadLink');

    if (!currentWgAccessDownloadUrl || currentWgAccessDownloadUrl === "#") {
        currentWgAccessConfig = '';
        if (textarea) textarea.value = '';
        if (qr) qr.innerHTML = '<div class="text-red-600 text-sm text-center">Download URL is missing.</div>';
        return;
    }

    currentWgAccessConfig = '';

    if (textarea) {
        textarea.value = 'Loading...';
    }

    if (qr) {
        qr.innerHTML = '<div class="text-gray-700 text-sm"><i class="fas fa-spinner fa-spin"></i></div>';
    }

    if (dl) {
        dl.dataset.downloadUrl = currentWgAccessDownloadUrl;
    }

    try {
        const response = await fetch(buildWgAccessUrlWithEmoji(currentWgAccessDownloadUrl));
        const text = await response.text();

        currentWgAccessConfig = text || '';

        if (textarea) {
            textarea.value = currentWgAccessConfig;
        }

        if (qr) {
            qr.innerHTML = '';

            if (window.QRCode && currentWgAccessConfig) {
                const holder = document.createElement('div');
                qr.appendChild(holder);

                new QRCode(holder, {
                    text: currentWgAccessConfig,
                    width: 220,
                    height: 220,
                    correctLevel: QRCode.CorrectLevel.M
                });
            } else {
                qr.innerHTML = '<div class="text-gray-700 text-sm text-center">QR library not loaded.<br>Use Download or Copy.</div>';
            }
        }
    } catch (error) {
        currentWgAccessConfig = '';

        if (textarea) {
            textarea.value = '';
        }

        if (qr) {
            qr.innerHTML = '<div class="text-red-600 text-sm text-center">Failed to load config.</div>';
        }
    }
}







async function openWgAccessModal(downloadUrl, name, address) {
    const modal = document.getElementById('wgAccessModal');
    const title = document.getElementById('wgAccessTitle');
    const addr = document.getElementById('wgAccessAddress');

    if (!modal) return;

    currentWgAccessDownloadUrl = downloadUrl || '#';
    currentWgAccessName = name || 'WireGuard';
    currentWgAccessAddress = address || '';

    if (title) {
        title.innerHTML = `<i class="fas fa-network-wired text-green-400"></i><span>${escapeHtml(currentWgAccessName)}</span>`;
    }

    if (addr) {
        addr.textContent = currentWgAccessAddress;
    }

    initWgDashboardEmojiCheckbox();

    modal.style.zIndex = '11000';
    modal.classList.remove('hidden');

    await loadWgAccessConfig();
}

function renderWireGuardSection(wireguard) {
    if (!wireguard || !wireguard.enabled) return '';

    const wg1DisplayName = escapeHtml(wireguard.display_name || 'wg1');
    const servers = wireguard.servers || [];
    let serverHtml = '';

    if (!servers.length) {
        serverHtml = '<div class="text-sm text-gray-400 p-3">No WireGuard server available.</div>';
    } else {
        serverHtml = servers.map(function(server) {
            const name = escapeHtml(server.name || 'WireGuard');
            const address = escapeHtml(server.address || '');
            const downloadUrl = escapeHtml(server.download_url || '#');
            const visual = endpointVisual(server.server_type);

            const rawName = jsString(server.name || 'WireGuard');
            const rawAddress = jsString(server.address || '');
            const rawDownloadUrl = jsString(server.download_url || '#');

            return `
                <div class="access-server-card">
                    <div class="min-w-0">
                        <div class="text-sm font-semibold text-white flex items-center gap-2">
                            <i class="fas ${visual.icon} ${visual.color}"></i>
                            <span class="truncate">${name}</span>
                        </div>
                        ${address ? `<div class="text-xs text-gray-400 mt-1 font-mono truncate">${address}</div>` : ''}
                    </div>

                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button type="button" onclick="currentWgAccessDownloadUrl='${rawDownloadUrl}'; downloadWgAccessConfig();" class="w-9 h-9 rounded-lg bg-green-600 hover:bg-green-500 text-white flex items-center justify-center" title="Download .conf">
                            <i class="fas fa-download"></i>
                        </button>

                        <button type="button" onclick="openWgAccessModal('${rawDownloadUrl}', '${rawName}', '${rawAddress}')" class="w-9 h-9 rounded-lg bg-gray-700 hover:bg-indigo-600 text-gray-300 hover:text-white flex items-center justify-center" title="QR / Config">
                            <i class="fas fa-qrcode"></i>
                        </button>
                    </div>
                </div>
            `;
        }).join('');
    }

    return `
        <div class="access-section-card">
            <div class="access-section-header">
                <div class="access-section-title">
                    <i class="fas fa-network-wired text-green-400"></i>
                    <span>WireGuard</span>
                </div>
                <span class="access-pill">${wg1DisplayName}</span>
            </div>
            <div class="access-section-body space-y-2">
                ${serverHtml}
            </div>
        </div>
    `;
}

function renderSingboxSection(singboxGroups) {
    if (!Array.isArray(singboxGroups) || !singboxGroups.length) return '';

    return singboxGroups.map(function(group) {
        if (!group || !group.servers || !group.servers.length) return '';

        const displayName = escapeHtml(group.display_name || group.tag || 'sing-box');
        const typeLabel = escapeHtml((group.type || '').toUpperCase());

        const serverHtml = group.servers.map(function(server) {
            const name = escapeHtml(server.name || displayName);
            const address = escapeHtml(server.address || '');
            const link = server.share_link || '';
            const visual = endpointVisual(server.server_type);

            const rawLink = jsString(link);
            const rawName = jsString(server.name || displayName);
            const rawAddress = jsString(server.address || '');

            return `
                <div class="access-server-card">
                    <div class="min-w-0">
                        <div class="text-sm font-semibold text-white flex items-center gap-2">
                            <i class="fas ${visual.icon} ${visual.color}"></i>
                            <span class="truncate">${name}</span>
                        </div>
                        ${address ? `<div class="text-xs text-gray-400 mt-1 font-mono truncate">${address}</div>` : ''}
                    </div>

                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button type="button" onclick="copyAccessText('${rawLink}', this)" class="w-9 h-9 rounded-lg bg-yellow-600 hover:bg-yellow-500 text-white flex items-center justify-center" title="Copy Link">
                            <i class="far fa-copy"></i>
                        </button>

                        <button type="button" onclick="openSingboxLinkModal('${rawLink}', '${rawName}', '${rawAddress}')" class="w-9 h-9 rounded-lg bg-gray-700 hover:bg-indigo-600 text-gray-300 hover:text-white flex items-center justify-center" title="QR / Link">
                            <i class="fas fa-qrcode"></i>
                        </button>
                    </div>
                </div>
            `;
        }).join('');

        return `
            <div class="access-section-card">
                <div class="access-section-header">
                    <div class="access-section-title">
                        <i class="fas fa-bolt text-yellow-400"></i>
                        <span>${displayName}</span>
                    </div>
                    <span class="access-pill">${typeLabel}</span>
                </div>
                <div class="access-section-body space-y-2">
                    ${serverHtml}
                </div>
            </div>
        `;
    }).join('');
}

function openSingboxLinkModal(link, name, address) {
    const modal = document.getElementById('singboxLinkModal');
    const title = document.getElementById('singboxLinkTitle');
    const addr = document.getElementById('singboxLinkAddress');
    const textarea = document.getElementById('singboxLinkText');
    const qr = document.getElementById('singboxLinkQr');

    if (!modal) return;

    if (title) title.querySelector('span').textContent = name || 'sing-box';
    if (addr) addr.textContent = address || '';
    if (textarea) textarea.value = link || '';
    if (textarea) textarea.dataset.link = link || '';

    if (qr) {
        qr.innerHTML = '';
        if (window.QRCode && link) {
            const holder = document.createElement('div');
            qr.appendChild(holder);
            new QRCode(holder, {
                text: link,
                width: 220,
                height: 220,
                correctLevel: QRCode.CorrectLevel.M
            });
        } else {
            qr.innerHTML = '<div class="text-gray-700 text-sm text-center">QR library not loaded.<br>Use Copy.</div>';
        }
    }

    modal.classList.remove('hidden');
}

function closeSingboxLinkModal() {
    const modal = document.getElementById('singboxLinkModal');
    if (modal) modal.classList.add('hidden');
}

function copySingboxLink(btn) {
    const textarea = document.getElementById('singboxLinkText');
    const link = textarea ? (textarea.dataset.link || textarea.value || '') : '';
    if (link) copyAccessText(link, btn);
}

function renderWgInstancesSection(wgInstances) {
    if (!Array.isArray(wgInstances) || !wgInstances.length) return '';

    return wgInstances.map(function(instance) {
        if (!instance || !instance.enabled) return '';

        const instanceName = escapeHtml(instance.name || 'wg');
        const instanceDisplayName = escapeHtml(instance.display_name || instance.name || 'wg');
        const servers = instance.servers || [];
        let serverHtml = '';

        if (!servers.length) {
            serverHtml = '<div class="text-sm text-gray-400 p-3">No WireGuard server available.</div>';
        } else {
            serverHtml = servers.map(function(server) {
                const name = escapeHtml(server.name || instanceName);
                const address = escapeHtml(server.address || '');
                const downloadUrl = escapeHtml(server.download_url || '#');
                const visual = endpointVisual(server.server_type);

                const rawName = jsString(server.name || instanceName);
                const rawAddress = jsString(server.address || '');
                const rawDownloadUrl = jsString(server.download_url || '#');

                return `
                    <div class="access-server-card">
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-white flex items-center gap-2">
                                <i class="fas ${visual.icon} ${visual.color}"></i>
                                <span class="truncate">${name}</span>
                            </div>
                            ${address ? `<div class="text-xs text-gray-400 mt-1 font-mono truncate">${address}</div>` : ''}
                        </div>

                        <div class="flex items-center gap-2 flex-shrink-0">
                            <button type="button" onclick="currentWgAccessDownloadUrl='${rawDownloadUrl}'; downloadWgAccessConfig();" class="w-9 h-9 rounded-lg bg-green-600 hover:bg-green-500 text-white flex items-center justify-center" title="Download .conf">
                                <i class="fas fa-download"></i>
                            </button>

                            <button type="button" onclick="openWgAccessModal('${rawDownloadUrl}', '${rawName}', '${rawAddress}')" class="w-9 h-9 rounded-lg bg-gray-700 hover:bg-indigo-600 text-gray-300 hover:text-white flex items-center justify-center" title="QR / Config">
                                <i class="fas fa-qrcode"></i>
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        }

        return `
            <div class="access-section-card">
                <div class="access-section-header">
                    <div class="access-section-title">
                        <i class="fas fa-network-wired text-green-400"></i>
                        <span>WireGuard</span>
                    </div>
                    <span class="access-pill">${instanceDisplayName}</span>
                </div>
                <div class="access-section-body space-y-2">
                    ${serverHtml}
                </div>
            </div>
        `;
    }).join('');
}

async function openSmartDownloadModal(username) {
    const modal = document.getElementById('downloadOptionsModal');
    const modalBody = document.getElementById('downloadOptionsList');
    const modalUsername = document.getElementById('downloadModalUsername');

    if (!modal || !modalBody) return;

    modal.classList.remove('hidden');

    if (modalUsername) {
        modalUsername.textContent = username ? `User: ${username}` : '';
    }

    modalBody.innerHTML = `
        <div class="flex items-center justify-center p-10 text-gray-300">
            <i class="fas fa-spinner fa-spin text-2xl mr-3"></i>
            <span>Loading access options...</span>
        </div>
    `;

    try {
        const response = await fetch(`/get_download_options/${encodeURIComponent(username)}`);
        const data = await response.json();

        if (!data.success) {
            modalBody.innerHTML = `<div class="text-center p-8 text-red-400">${escapeHtml(data.message || 'Failed to load access options.')}</div>`;
            return;
        }

        let html = '';

        html += renderSubscriptionSection(data.subscription_url);
        html += renderOpenVpnSection(data.groups || [], data.username || username);
        html += renderL2tpSection(data.l2tp);
        html += renderCiscoSection(data.cisco);
        html += renderWireGuardSection(data.wireguard);
        html += renderWgInstancesSection(data.wg_instances);
        html += renderSingboxSection(data.singbox);

        if (!html.trim()) {
            html = `<div class="text-center p-8 text-gray-400">No access option available for this user.</div>`;
        }

        modalBody.innerHTML = html;
    } catch (error) {
        modalBody.innerHTML = `<div class="text-center p-8 text-red-400">Failed to load access options.</div>`;
    }
}

function openDownloadOptionsModal(username) {
    openSmartDownloadModal(username);
}

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(event) {
        const downloadButton = event.target.closest('.open-download-modal-btn');

        if (downloadButton) {
            event.preventDefault();

            let username = downloadButton.dataset.username;

            if (!username) {
                const href = downloadButton.getAttribute('href') || '';
                const parts = href.split('/').filter(Boolean);
                username = parts.length ? parts[parts.length - 1] : '';
            }

            if (username) {
                openSmartDownloadModal(username);
            }
        }
    });
});

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeDownloadOptionsModal();
        closeWgAccessModal();
    }
});

function openBulkActionsModal() { document.getElementById('bulkActionsModal').classList.remove('hidden'); }
















function closeBulkActionsModal() { document.getElementById('bulkActionsModal').classList.add('hidden'); }
function openBulkEditModal() { document.getElementById('bulkEditModal').classList.remove('hidden'); }
function closeBulkEditModal() { document.getElementById('bulkEditModal').classList.add('hidden'); }
function closeBulkDeleteConfirmModal() { document.getElementById('bulkActionConfirmModal').classList.add('hidden'); }

function openBulkDeleteConfirmModal(deleteType) {
    const modal = document.getElementById('bulkActionConfirmModal');
    const title = document.getElementById('confirmModalTitle');
    const text = document.getElementById('confirmModalText');
    const confirmBtn = document.getElementById('confirmModalBtn');

    if (deleteType === 'disabled') {
        title.innerHTML = '<i class="fas fa-user-slash text-orange-400"></i> Confirm Deleting Disabled Users';
        text.innerHTML = 'Are you absolutely sure? This will permanently delete all users that have been <strong class="text-orange-400">manually disabled</strong>. This action cannot be undone.';
    } else if (deleteType === 'expired') {
        title.innerHTML = '<i class="fas fa-user-clock text-red-400"></i> Confirm Deleting Expired Users';
        text.innerHTML = 'Are you absolutely sure? This will permanently delete all users who are expired by <strong class="text-red-400">date or data limit</strong>. This action cannot be undone.';
    }

    confirmBtn.onclick = () => executeBulkDelete(deleteType);
    
    closeBulkActionsModal();
    modal.classList.remove('hidden');
}

function executeBulkDelete(deleteType) {
    const confirmBtn = document.getElementById('confirmModalBtn');
    confirmBtn.disabled = true;
    confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';

    fetch("{{ url_for('bulk_delete_users') }}", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ delete_type: deleteType })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => window.location.reload(), 2000);
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(err => showAlert('error', 'An error occurred.'))
    .finally(() => {
        closeBulkDeleteConfirmModal();
        confirmBtn.disabled = false;
        confirmBtn.textContent = 'Yes, Proceed';
    });
}

function confirmBulkEdit(event) {
    event.preventDefault();
    const form = document.getElementById('bulkEditForm');
    const days = form.elements['days_to_add'].value;
    const data = form.elements['data_to_add'].value;
    
    if (!days && !data) {
        showAlert('error', 'Please enter a value for days or data to add.');
        return;
    }

    const btn = document.getElementById('confirmBulkEditBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Applying...';

    fetch("{{ url_for('bulk_edit_users') }}", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ days_to_add: days, data_to_add: data })
    })
    .then(res => res.json())
    .then(result => {
        if (result.success) {
            showAlert('success', result.message);
            setTimeout(() => window.location.reload(), 2000);
        } else {
            showAlert('error', result.message);
        }
    })
    .catch(err => showAlert('error', 'An error occurred.'))
    .finally(() => {
        closeBulkEditModal();
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-check mr-2"></i> Apply Changes to All Users';
        form.reset();
    });
}

function processLastSeenTooltips() {
    document.querySelectorAll('.user-item[data-last-seen]').forEach(item => {
        const lastSeenISO = item.dataset.lastSeen;
        if (lastSeenISO) {
            const username = item.dataset.username;
            const usernameBoxDesktop = document.getElementById(`username-box-${username}`);
            const usernameBoxMobile = document.getElementById(`username-box-mobile-${username}`);

            const localDate = new Date(lastSeenISO);
            const formattedDate = JalaliCalendar.formatDateDisplay(localDate);

            const tooltipText = `Last Seen: ${formattedDate}`;

            if (usernameBoxDesktop && usernameBoxDesktop.dataset.tooltipText !== 'Online') {
                usernameBoxDesktop.dataset.tooltipText = tooltipText;
            }
            if (usernameBoxMobile && usernameBoxMobile.dataset.tooltipText !== 'Online') {
                usernameBoxMobile.dataset.tooltipText = tooltipText;
            }
        }
    });
}

function updateUserRowRealtime(userData) {
    const username = userData.username;
    const userItems = document.querySelectorAll(`.user-item[data-username="${username}"]`);

    if (!userItems.length) return;

    userItems.forEach(item => {
        item.dataset.active = userData.is_active ? 'true' : 'false';
        item.dataset.datalimited = userData.is_data_limited ? 'true' : 'false';
        item.dataset.lastSeen = userData.last_connection_at || '';

        item.querySelectorAll('.connection-badge').forEach(el => {
            el.classList.toggle('user-chip-danger', userData.disable_reason === 'CONNECTION_LIMIT');
        });

        const statusTextContainer = item.querySelector('.user-status-text');
        const switchInput = item.querySelector('.user-status-controls input[type="checkbox"]');

        if (statusTextContainer) {
             if (userData.disable_reason === 'CONNECTION_LIMIT') {
                statusTextContainer.innerHTML = '<span class="user-status-pill is-bad"><i class="fas fa-lock"></i> Cheater</span>';
            } else if (userData.is_expired) {
                statusTextContainer.innerHTML = '<span class="user-status-pill is-bad"><i class="fas fa-lock"></i> Expired</span>';
            } else if (userData.is_data_limited) {
                statusTextContainer.innerHTML = '<span class="user-status-pill is-warn"><i class="fas fa-lock"></i> Data Limit</span>';
            } else if (!userData.is_active) {
                statusTextContainer.innerHTML = '<span class="user-status-pill is-warn"><i class="fas fa-lock"></i> Disabled</span>';
            } else {
                statusTextContainer.innerHTML = '<span class="user-status-pill is-ok"><i class="fas fa-check-circle"></i> Active</span>';
            }
        }

        if (switchInput) {
            const canBeActive = !userData.is_expired && !userData.is_data_limited && userData.disable_reason !== 'CONNECTION_LIMIT';
            switchInput.checked = userData.is_active && canBeActive;
            switchInput.disabled = !canBeActive;
            const slider = switchInput.nextElementSibling;
            if(slider) slider.classList.toggle('disabled', !canBeActive);
        }

        const expiryDivs = item.querySelectorAll(`#expiry-td-${username} > div, #expiry-div-${username}`);
        expiryDivs.forEach(el => {
            let expiryHTML = '';
            if (userData.activation_type === 'flexible_days' && !userData.first_connection_at) {
                expiryHTML = `<i class="fas fa-hourglass-start" title="Activation after first connection"></i><span>Pending (${userData.pending_activation_days}d)</span>`;
            } else {
                const expiryText = userData.expiry_date && userData.expiry_date !== 'Unlimited' ? JalaliCalendar.formatDateDisplay(userData.expiry_date, { dateOnly: true }) : "Unlimited";
                expiryHTML = `<i class="fas fa-calendar-alt"></i><span>${expiryText}</span>`;
            }
            el.innerHTML = expiryHTML;
        });
        
        const editButtons = item.querySelectorAll(`button[onclick="openEditModal(this)"]`);
        editButtons.forEach(button => {
            button.dataset.expiryDate = userData.expiry_date && userData.expiry_date !== 'Unlimited' ? userData.expiry_date : '';
            button.dataset.activationType = userData.activation_type;
            button.dataset.firstConnectionAt = userData.first_connection_at || '';
            button.dataset.pendingDays = userData.pending_activation_days || '';
        });

    });

    processLastSeenTooltips();
}

document.addEventListener('DOMContentLoaded', function () {
    if (typeof io !== 'undefined') {
        const socket = io();

        socket.on('user_full_update', function(userData) {
            if (userData && userData.username) {
                updateUserRowRealtime(userData);
            }
        });
       
       socket.on('subscription_link_updated', function(data) {
            if (data && data.username && data.new_url) {
                console.log(`Received new sub link for ${data.username}: ${data.new_url}`);
                
                const subLinks = document.querySelectorAll(`.sub-link-btn[data-username="${data.username}"]`);
                
                subLinks.forEach(link => {
                    link.dataset.url = data.new_url;
                    
                    link.href = data.new_url;

                    link.classList.add('flash-success');
                    setTimeout(() => {
                        link.classList.remove('flash-success');
                    }, 1500);
                });
               
               const subModal = document.getElementById('subscriptionModal');
                if (subModal && !subModal.classList.contains('hidden') && document.getElementById('subModalUsername').textContent === data.username) {
                    openSubscriptionModal(data.username, data.new_url); 
                }
            }
        });
    }
});
</script>
<script>
function toggleProtocolInput(checkbox, targetId) {
    const target = document.getElementById(targetId);
    if (!target) {
        console.warn(`Element with id "${targetId}" not found for protocol input toggle.`);
        return;
    }
    if (checkbox.checked) {
        target.classList.remove('hidden');
    } else {
        target.classList.add('hidden');
    }
}	
	
	
	
	
let currentRenewUsername = null;
let currentRenewDuration = 1;

function openRenewModal(username) {
    currentRenewUsername = username;
    currentRenewDuration = 1;
    
    document.getElementById('renewUsernameDisplay').textContent = username;
    
    
    document.querySelectorAll('.renew-option-box').forEach(el => el.classList.remove('selected'));
    document.querySelector('.renew-option-box:first-child').classList.add('selected');
    
    document.getElementById('renewResetTraffic').checked = true;
    document.getElementById('renewResetExpiry').checked = false;
    
    document.getElementById('renewUserModal').classList.remove('hidden');
}

function closeRenewModal() {
    document.getElementById('renewUserModal').classList.add('hidden');
    currentRenewUsername = null;
}

function selectRenewDuration(months, element) {
    currentRenewDuration = months;
    document.querySelectorAll('.renew-option-box').forEach(el => el.classList.remove('selected'));
    element.classList.add('selected');
}

function submitRenewUser() {
    if (!currentRenewUsername) return;
    
    const resetTraffic = document.getElementById('renewResetTraffic').checked;
    const resetExpiry = document.getElementById('renewResetExpiry').checked;
    const btn = document.getElementById('btnConfirmRenew');
    
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    
    fetch(`/renew_user/${currentRenewUsername}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            duration_months: currentRenewDuration,
            reset_traffic: resetTraffic,
            reset_expiry: resetExpiry
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            closeRenewModal();
            
            
            if (data.updated_user_status) {
                updateUserRowRealtime(data.updated_user_status);
            }
            
            
            if (resetTraffic) {
                const totalEl = document.getElementById(`total-${currentRenewUsername}`);
                const totalMob = document.getElementById(`total-mobile-${currentRenewUsername}`);
                if (totalEl) totalEl.textContent = "0 B";
                if (totalMob) totalMob.textContent = "0 B";
            }
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(err => {
        showAlert('error', 'Network Error');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}	
	
	
	
	
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const socket = io(); 

        socket.on('bulk_progress', function(data) {
            const submitBtn = document.querySelector('#addUserForm button[type="submit"]');
            
            if (submitBtn && submitBtn.disabled) {
                submitBtn.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i> Creating... (${data.current} / ${data.total})`;
            }
        });
    });
	
	
	
	
	
	

function toggleAllNodes(sourceCheckbox, containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;

    const checkboxes = container.querySelectorAll('input[type="checkbox"]:not(:disabled)');

    checkboxes.forEach(checkbox => {
        checkbox.checked = sourceCheckbox.checked;
        
    });
}	
	
	
	
	
	
	
	
	
function getSubAdminAllowedProtocols(subAdminId) {
    return fetch(`/api/v1/sub-admin/allowed_protocols?sub_admin_id=${subAdminId}`)
        .then(res => res.json())
        .then(data => data.success ? data.allowed : null);
}

function applyProtocolRestrictions(containerId, allowed) {
    if (!allowed) return;
    const container = document.getElementById(containerId);
    if (!container) return;
    const items = container.querySelectorAll('.protocol-item-add, .protocol-item-edit');
    items.forEach(item => {
        const protocol = item.dataset.protocol;
        let isAllowed = allowed[protocol] !== undefined ? allowed[protocol] : true;
        if (protocol === 'wg1') {
            const extraWgAllowed = Array.isArray(allowed.allowed_wg_instances) ? allowed.allowed_wg_instances.length > 0 : true;
            isAllowed = !!allowed.wg1 || extraWgAllowed;
        }
        if (!isAllowed) {
            item.style.display = 'none';
            const checkbox = item.querySelector('input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = false;
                if (checkbox.name === 'enable_l2tp' || checkbox.name === 'enable_cisco' || checkbox.name === 'enable_wg1') {
                    const targetId = checkbox.name === 'enable_l2tp' ? 'l2tpInputParams' :
                                     checkbox.name === 'enable_cisco' ? 'ciscoInputParams' :
                                     'wg1InputParams';
                    const target = document.getElementById(targetId);
                    if (target) {
                        toggleProtocolInput(checkbox, targetId);
                    }
                }
            }
        } else {
            item.style.display = '';
        }
    });
}

const originalOpenAddUserModal = window.openAddUserModal;
window.openAddUserModal = function(subAdminId = null) {
    const modal = document.getElementById("addUserModal");
    if (!modal) return;
    const form = modal.querySelector('form');
    if (form) form.reset();

    const bulkCheckbox = document.getElementById('bulkAddCheckbox');
    if (bulkCheckbox) bulkCheckbox.checked = false;

    const selectAllCheck = document.getElementById('selectAllNodesAdd');
    if (selectAllCheck) selectAllCheck.checked = false;

    document.getElementById('singleUsernameContainer').style.display = '';
    document.getElementById('bulkAddContainer').style.display = '';

    toggleBulkAdd();
    modal.classList.remove("hidden");
    fetchNodesForAdd();
    resetWgInstancesForAddUser();
    resetSingboxInboundsForAddUser();

    document.querySelectorAll('#protocolCheckboxesAdd .protocol-item-add').forEach(el => el.style.display = '');

    let targetSubAdminId = subAdminId;
    if (!targetSubAdminId) {
        const adminSelector = document.getElementById('adminSelector');
        if (adminSelector && adminSelector.value && adminSelector.value !== 'main') {
            targetSubAdminId = adminSelector.value;
        }
    }

    if (targetSubAdminId && targetSubAdminId !== 'main') {
        getSubAdminAllowedProtocols(targetSubAdminId).then(allowed => {
            if (allowed) {
                applyProtocolRestrictions('protocolCheckboxesAdd', allowed);
            }
        });
    }
};
const originalOpenEditModal = window.openEditModal;
window.openEditModal = function(buttonElement) {
    const username = buttonElement.dataset.username;
    const modal = document.getElementById('editModal');
    const form = document.getElementById('editForm');
    if (!modal || !form) {
        console.error('openEditModal: #editModal or #editForm not found in DOM');
        return;
    }
    const submitButton = document.getElementById('editFormSubmitBtn');
    if (!submitButton) console.warn('openEditModal: #editFormSubmitBtn not found in DOM');

    modal.dataset.username = username;
    const titleSpan = document.getElementById("editUserModalTitleText");
    if (titleSpan) titleSpan.textContent = `Edit User: ${username}`;
    form.reset();

    const selectAllCheck = document.getElementById('selectAllNodesEdit');
    if(selectAllCheck) selectAllCheck.checked = false;

    const loadingOverlay = document.getElementById('editModalLoadingOverlay');
    if (loadingOverlay) loadingOverlay.classList.remove('hidden');
    modal.classList.remove("hidden");

    fetch(`${adminPanelPath}/get_user_details_for_edit/${username}`)
    .then(res => {
        const contentType = res.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            return res.text().then(text => {
                if (res.status === 200 && /<title>\s*Login/i.test(text)) {
                    throw new Error('Your session has expired. Please refresh the page and log in again.');
                }
                throw new Error(`Server returned an unexpected response (HTTP ${res.status}). Check the panel server log for the real error.`);
            });
        }
        if (!res.ok) {
            return res.json().then(err => { throw new Error(err.message || 'Server responded with an error') });
        }
        return res.json();
    })
    .then(data => {
        if (!data.success) {
            throw new Error(data.message || "Failed to load data.");
        }

        const user = data.user;
        const allNodes = data.all_nodes;

        document.getElementById('edit_max_clients').value = user.max_clients || "1";
        document.getElementById('edit_data_limit').value = user.data_limit || "";
        document.getElementById('edit_data_limit_unit').value = user.data_limit_unit || "GB";
        document.getElementById('edit_user_notes').value = user.notes || "";

        const pendingDaysInput = document.getElementById('edit_pending_activation_days_form');
        const radioFixed = document.querySelector('#editModal input[name="activation_type_choice"][value="fixed"]');
        const radioFlexible = document.querySelector('#editModal input[name="activation_type_choice"][value="flexible"]');

        if (fp_edit) fp_edit.clear();
        pendingDaysInput.value = "";

        if (user.activation_type === 'flexible_days' && !user.first_connection_at) {
            radioFlexible.checked = true;
            pendingDaysInput.value = user.pending_activation_days || "";
        } else {
            radioFixed.checked = true;
            if (user.expiry_date) {
                fp_edit.setDate(user.expiry_date, false);
            }
        }
        updateEditModalUI();

        const l2tpCheckbox = document.getElementById('edit_enable_l2tp');
        const l2tpPassInput = document.getElementById('edit_l2tp_password');

        if (l2tpCheckbox) {
            l2tpCheckbox.checked = !!user.enable_l2tp;
        }
        if (l2tpPassInput) {
            l2tpPassInput.value = user.l2tp_password || '';
        }

        const ciscoCheckbox = document.getElementById('edit_enable_cisco');
        const ciscoPassInput = document.getElementById('edit_cisco_password');

        if (ciscoCheckbox) {
            ciscoCheckbox.checked = !!user.enable_cisco;
        }
        if (ciscoPassInput) {
            ciscoPassInput.value = user.cisco_password || '';
        }

        const wg1Checkbox = document.getElementById('edit_enable_wg1');
        if (wg1Checkbox) {
            wg1Checkbox.checked = !!user.enable_wg1;
        }

        const openvpnCheckbox = document.getElementById('edit_enable_openvpn');
        if (openvpnCheckbox) {
            openvpnCheckbox.checked = !!user.enable_openvpn;
        }

        if (l2tpCheckbox) toggleProtocolInput(l2tpCheckbox, 'edit_l2tpInputParams');
        if (ciscoCheckbox) toggleProtocolInput(ciscoCheckbox, 'edit_ciscoInputParams');

        populateWgInstancesForEditUser(user.allowed_wg_instances, data.allowed_wg_instances_scope);
        populateSingboxInboundsForEditUser(user.allowed_singbox_inbounds);

        document.getElementById("edit-upload").textContent = formatBytes(user.upload_bytes || 0);
        document.getElementById("edit-download").textContent = formatBytes(user.download_bytes || 0);
        document.getElementById("edit-total").textContent = formatBytes((user.upload_bytes || 0) + (user.download_bytes || 0));
        document.getElementById("edit_data_limit_used_badge").textContent = "Used: " + formatBytes((user.upload_bytes || 0) + (user.download_bytes || 0));

        const hwidCard = document.getElementById('hwidDevicesCard');
        if (hwidCard) {
            if (user.enable_singbox) {
                hwidCard.classList.remove('hidden');
                loadUserHwids(username, user.max_clients || 0);
            } else {
                hwidCard.classList.add('hidden');
            }
        }

        const nodesContainer = document.getElementById("editNodesContainer");
        if (nodesContainer) {
            nodesContainer.innerHTML = "";
            const allowedNodes = user.allowed_nodes || [];

            if (allNodes.length > 0) {
                nodesContainer.className = "grid grid-cols-1 gap-2 bg-gray-900/50 p-2 rounded-lg h-full max-h-54 overflow-y-auto custom-scroll border border-gray-600";
                allNodes.forEach(node => {
                    const isAllowed = allowedNodes.includes(String(node.id));
                    const isOnline = node.status === "online";
                    const labelElement = document.createElement("label");
                    labelElement.className = 'server-select-label';
                    labelElement.innerHTML = `
                        <input type="checkbox" name="selected_nodes" value="${node.id}" class="absolute opacity-0" ${isAllowed ? "checked" : ""} ${isOnline ? "" : "disabled"}>
                        <div class="server-select-card ${isOnline ? "" : "opacity-50 cursor-not-allowed"}">
                            <i class="fas fa-network-wired icon"></i>
                            <span class="name text-sm">${node.name} ${isOnline ? "" : "(Offline)"}</span>
                        </div>`;
                    nodesContainer.appendChild(labelElement);
                });
            } else {
                nodesContainer.innerHTML = '<p class="text-sm text-gray-400 text-center col-span-full">No nodes available.</p>';
            }
        }

        document.querySelectorAll('#protocolCheckboxesEdit .protocol-item-edit').forEach(el => el.style.display = '');
        if (CURRENT_USER_ROLE !== 'sub_admin') {
            if (data.allowed_protocols) {
                applyProtocolRestrictions('protocolCheckboxesEdit', data.allowed_protocols);
            } else if (user.sub_admin_id) {
                getSubAdminAllowedProtocols(user.sub_admin_id).then(allowed => {
                    if (allowed) {
                        applyProtocolRestrictions('protocolCheckboxesEdit', allowed);
                    }
                });
            }
        }

        if (loadingOverlay) loadingOverlay.classList.add('hidden');

        form.action = adminPanelPath ? `${adminPanelPath}/edit_user/${username}` : `/edit_user/${username}`;
    })
    .catch(error => {
        console.error("Error fetching data for edit modal:", error);
        showAlert('error', error.message || 'Could not load user data. Please try again.');
        closeEditModal();
    });
};

</script>




{% endblock %}