diff --git a/templates/users.bk.html b/templates/users.bk.html
deleted file mode 100644
index 512cb22..0000000
--- a/templates/users.bk.html
+++ /dev/null
@@ -1,2102 +0,0 @@
-{% extends "base.html" %} {% block title %}User Management - QR Code
-Management{% endblock %} {% block content %}
-<div class="users-page">
-  <div class="users-header">
-    <div class="header-content">
-      <h1>
-        <i class="fas fa-users"></i>
-        User Management
-      </h1>
-      <p>Manage system users and their access permissions</p>
-    </div>
-
-    <div class="header-actions">
-      <a href="{{ url_for('create_user') }}" class="btn btn-primary">
-        <i class="fas fa-user-plus"></i>
-        Add New User
-      </a>
-    </div>
-  </div>
-
-  <!-- User Statistics -->
-  <div class="users-stats">
-    <div class="stat-card">
-      <div class="stat-icon admin">
-        <i class="fas fa-crown"></i>
-      </div>
-      <div class="stat-info">
-        <h3>
-          {{ users|selectattr('role', 'equalto',
-          'admin')|selectattr('active_status', 'equalto', True)|list|length }}
-        </h3>
-        <p>Active Administrators</p>
-      </div>
-    </div>
-
-    <div class="stat-card">
-      <div class="stat-icon staff">
-        <i class="fas fa-users"></i>
-      </div>
-      <div class="stat-info">
-        <h3>
-          {{ users|selectattr('role', 'equalto',
-          'staff')|selectattr('active_status', 'equalto', True)|list|length }}
-        </h3>
-        <p>Active Staff Members</p>
-      </div>
-    </div>
-
-    <div class="stat-card">
-      <div class="stat-icon active">
-        <i class="fas fa-user-check"></i>
-      </div>
-      <div class="stat-info">
-        <h3>
-          {{ users|selectattr('active_status', 'equalto', True)|list|length }}
-        </h3>
-        <p>Total Active Users</p>
-      </div>
-    </div>
-
-    <div class="stat-card">
-      <div class="stat-icon inactive">
-        <i class="fas fa-user-times"></i>
-      </div>
-      <div class="stat-info">
-        <h3>
-          {{ users|selectattr('active_status', 'equalto', False)|list|length }}
-        </h3>
-        <p>Inactive Users</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Filters and Search -->
-  <div class="users-controls">
-    <div class="search-filters">
-      <div class="search-box">
-        <i class="fas fa-search"></i>
-        <input
-          type="text"
-          id="searchUsers"
-          placeholder="Search users by name, email, or username..."
-        />
-      </div>
-
-      <div class="filter-group">
-        <select id="roleFilter" class="filter-select">
-          <option value="">All Roles</option>
-          <option value="admin">Administrators</option>
-          <option value="staff">Staff Members</option>
-        </select>
-
-        <select id="statusFilter" class="filter-select">
-          <option value="">All Status</option>
-          <option value="active">Active</option>
-          <option value="inactive">Inactive</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="view-options">
-      <button class="btn btn-secondary btn-sm" onclick="refreshUserList()">
-        <i class="fas fa-sync-alt"></i>
-        Refresh
-      </button>
-    </div>
-  </div>
-
-  <!-- Users Table -->
-  <div class="users-container">
-    <div class="users-table">
-      <table>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>User Information</th>
-            <th>Contact</th>
-            <th>Role</th>
-            <th>Status</th>
-            <th>QR Codes</th>
-            <th>Created</th>
-            <th>Last Login</th>
-            <th style="width: 200px">Actions</th>
-          </tr>
-        </thead>
-        <tbody id="usersTableBody">
-          {% for user in users %}
-          <tr
-            class="user-row"
-            data-name="{{ user.full_name.lower() }}"
-            data-email="{{ user.email.lower() }}"
-            data-username="{{ user.username.lower() }}"
-            data-role="{{ user.role }}"
-            data-status="{{ 'active' if user.active_status else 'inactive' }}"
-            data-user-id="{{ user.id }}"
-          >
-            <td>{{ loop.index }}</td>
-
-            <!-- User Information -->
-            <td>
-              <div class="user-info">
-                <div class="user-avatar">
-                  <i class="fas fa-user"></i>
-                  {% if user.role == 'admin' %}
-                  <div class="avatar-badge admin">
-                    <i class="fas fa-crown"></i>
-                  </div>
-                  {% endif %}
-                </div>
-                <div class="user-details">
-                  <div class="user-name">{{ user.full_name }}</div>
-                  <div class="user-username">@{{ user.username }}</div>
-                  {% if user.id == session.user_id %}
-                  <span class="current-user-badge">You</span>
-                  {% endif %}
-                </div>
-              </div>
-            </td>
-
-            <!-- Contact Information -->
-            <td>
-              <div class="contact-info">
-                <div class="user-email">
-                  <i class="fas fa-envelope"></i>
-                  {{ user.email }}
-                </div>
-              </div>
-            </td>
-
-            <!-- Role -->
-            <td>
-              <span class="role-badge {{ user.role }}">
-                <i
-                  class="fas {{ 'fa-crown' if user.role == 'admin' else 'fa-user-tie' }}"
-                ></i>
-                {{ user.role.title() }}
-              </span>
-            </td>
-
-            <!-- Status -->
-            <td>
-              <span
-                class="status-badge {{ 'active' if user.active_status else 'inactive' }}"
-              >
-                <i
-                  class="fas {{ 'fa-check-circle' if user.active_status else 'fa-times-circle' }}"
-                ></i>
-                {{ 'Active' if user.active_status else 'Inactive' }}
-              </span>
-            </td>
-
-            <!-- QR Codes Count -->
-            <td>
-              <div class="qr-count">
-                <div class="qr-total">
-                  <strong>{{ user.created_qr_codes.count() }}</strong>
-                  <small>total</small>
-                </div>
-                <div class="qr-active">
-                  <span
-                    >{{
-                    user.created_qr_codes.filter_by(active_status=True).count()
-                    }}</span
-                  >
-                  <small>active</small>
-                </div>
-              </div>
-            </td>
-
-            <!-- Created Date -->
-            <td>
-              <div class="date-info">
-                <div class="date">
-                  {{ user.created_date.strftime('%Y-%m-%d') }}
-                </div>
-                <div class="time">
-                  {{ user.created_date.strftime('%H:%M') }}
-                </div>
-              </div>
-            </td>
-
-            <!-- Last Login -->
-            <td>
-              {% if user.last_login_date %}
-              <div class="date-info">
-                <div class="date">
-                  {{ user.last_login_date.strftime('%Y-%m-%d') }}
-                </div>
-                <div class="time">
-                  {{ user.last_login_date.strftime('%H:%M') }}
-                </div>
-              </div>
-              {% else %}
-              <span class="text-muted">
-                <i class="fas fa-minus-circle"></i>
-                Never
-              </span>
-              {% endif %}
-            </td>
-
-            <!-- Actions -->
-            <td>
-              <div class="user-actions">
-                <!-- Edit Button -->
-                <a
-                  href="{{ url_for('edit_user', user_id=user.id) }}"
-                  class="action-btn btn-edit"
-                  title="Edit User"
-                >
-                  <i class="fas fa-edit"></i>
-                </a>
-
-                <!-- Role Actions -->
-                {% if user.role == 'staff' %}
-                <a
-                  href="{{ url_for('promote_user', user_id=user.id) }}"
-                  class="action-btn btn-promote"
-                  title="Promote to Admin"
-                  onclick="return confirmPromoteUser('{{ user.full_name }}')"
-                >
-                  <i class="fas fa-arrow-up"></i>
-                </a>
-                {% elif user.role == 'admin' and user.id != session.user_id %}
-                <a
-                  href="{{ url_for('demote_user', user_id=user.id) }}"
-                  class="action-btn btn-demote"
-                  title="Demote to Staff"
-                  onclick="return confirmDemoteUser('{{ user.full_name }}')"
-                >
-                  <i class="fas fa-arrow-down"></i>
-                </a>
-                {% endif %}
-
-                <!-- Status Actions -->
-                {% if user.active_status %} {% if user.id != session.user_id %}
-                <a
-                  href="{{ url_for('delete_user', user_id=user.id) }}"
-                  class="action-btn btn-deactivate"
-                  title="Deactivate User"
-                  onclick="return confirmDeactivateUser('{{ user.full_name }}', '{{ user.role }}')"
-                >
-                  <i class="fas fa-user-times"></i>
-                </a>
-                {% else %}
-                <span
-                  class="action-btn btn-disabled"
-                  title="Cannot deactivate yourself"
-                >
-                  <i class="fas fa-lock"></i>
-                </span>
-                {% endif %} {% else %}
-                <a
-                  href="{{ url_for('reactivate_user', user_id=user.id) }}"
-                  class="action-btn btn-activate"
-                  title="Reactivate User"
-                  onclick="return confirm('Reactivate {{ user.full_name }}?')"
-                >
-                  <i class="fas fa-user-check"></i>
-                </a>
-                {% endif %}
-
-                <!-- Permanent Delete Action (Only for inactive users) -->
-                {% if not user.active_status and user.id != session.user_id %}
-                <a
-                  href="{{ url_for('permanently_delete_user', user_id=user.id) }}"
-                  class="action-btn btn-delete"
-                  title="Permanently Delete User"
-                  onclick="return confirmPermanentDelete('{{ user.full_name }}')"
-                >
-                  <i class="fas fa-trash"></i>
-                </a>
-                {% endif %}
-
-                <!-- More Options Dropdown -->
-                <div class="dropdown">
-                  <button
-                    class="action-btn btn-more dropdown-toggle"
-                    title="More Options"
-                    onclick="toggleDropdown(event, this)"
-                  >
-                    <i class="fas fa-ellipsis-v"></i>
-                  </button>
-                  <div class="dropdown-menu">
-                    <button
-                      onclick="viewUserDetails({{ user.id }})"
-                      class="dropdown-item"
-                    >
-                      <i class="fas fa-eye"></i> View Details
-                    </button>
-                    {% if user.id != session.user_id %}
-                    <button
-                      onclick="resetUserPassword({{ user.id }}, '{{ user.full_name }}')"
-                      class="dropdown-item"
-                    >
-                      <i class="fas fa-key"></i> Reset Password
-                    </button>
-                    <div class="dropdown-divider"></div>
-                    <button
-                      onclick="viewUserQRCodes({{ user.id }})"
-                      class="dropdown-item"
-                    >
-                      <i class="fas fa-qrcode"></i> View QR Codes
-                    </button>
-                    {% if not user.active_status %}
-                    <div class="dropdown-divider"></div>
-                    <a
-                      href="{{ url_for('permanently_delete_user', user_id=user.id) }}"
-                      class="dropdown-item danger-item"
-                      onclick="return confirmPermanentDelete('{{ user.full_name }}')"
-                    >
-                      <i class="fas fa-trash"></i> Permanently Delete
-                    </a>
-                    {% endif %} {% endif %}
-                  </div>
-                </div>
-              </div>
-            </td>
-          </tr>
-          {% endfor %} {% if not users %}
-          <tr>
-            <td colspan="9" style="text-align: center; padding: 3rem">
-              <div class="empty-icon">
-                <i
-                  class="fas fa-users"
-                  style="
-                    font-size: 3rem;
-                    color: var(--gray-400);
-                    margin-bottom: 1rem;
-                  "
-                ></i>
-              </div>
-              <h3 style="color: var(--gray-900); margin-bottom: 0.5rem">
-                No Users Found
-              </h3>
-              <p style="color: var(--gray-500); margin-bottom: 1rem">
-                There are no users in the system yet.
-              </p>
-              <a href="{{ url_for('create_user') }}" class="btn btn-primary">
-                <i class="fas fa-user-plus"></i>
-                Create First User
-              </a>
-            </td>
-          </tr>
-          {% endif %}
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <!-- Empty State for Filtered Results -->
-  <div class="empty-state" id="emptyState" style="display: none">
-    <div class="empty-icon">
-      <i class="fas fa-search"></i>
-    </div>
-    <h3>No Users Found</h3>
-    <p>Try adjusting your search criteria or filters</p>
-    <button onclick="clearFilters()" class="btn btn-secondary">
-      <i class="fas fa-refresh"></i>
-      Clear Filters
-    </button>
-  </div>
-</div>
-
-<!-- User Details Modal -->
-<div id="userDetailsModal" class="modal">
-  <div class="modal-content">
-    <div class="modal-header">
-      <h3 id="userModalTitle">User Details</h3>
-      <button class="modal-close" onclick="closeUserDetailsModal()">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-    <div class="modal-body" id="userModalBody">
-      <div class="loading-content">
-        <i class="fas fa-spinner fa-spin"></i>
-        Loading user details...
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button onclick="closeUserDetailsModal()" class="btn btn-secondary">
-        Close
-      </button>
-    </div>
-  </div>
-</div>
-
-<!-- Password Reset Modal -->
-<div id="passwordResetModal" class="modal">
-  <div class="modal-content">
-    <div class="modal-header">
-      <h3>Reset User Password</h3>
-      <button class="modal-close" onclick="closePasswordResetModal()">
-        <i class="fas fa-times"></i>
-      </button>
-    </div>
-    <div class="modal-body">
-      <p>
-        This feature would typically integrate with your password reset system.
-      </p>
-      <p>
-        For security, consider implementing email-based password reset instead
-        of direct admin reset.
-      </p>
-    </div>
-    <div class="modal-footer">
-      <button onclick="closePasswordResetModal()" class="btn btn-secondary">
-        Close
-      </button>
-    </div>
-  </div>
-</div>
-{% endblock %} {% block extra_scripts %}
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    initializeUserManagement();
-  });
-
-  function initializeUserManagement() {
-    initializeSearch();
-    initializeFilters();
-    setupEventListeners();
-  }
-
-  // Search and Filter Functions
-  function initializeSearch() {
-    const searchInput = document.getElementById("searchUsers");
-    let searchTimeout;
-
-    if (searchInput) {
-      searchInput.addEventListener("input", function () {
-        clearTimeout(searchTimeout);
-        searchTimeout = setTimeout(() => {
-          filterUsers();
-        }, 300);
-      });
-    }
-  }
-
-  function initializeFilters() {
-    const roleFilter = document.getElementById("roleFilter");
-    const statusFilter = document.getElementById("statusFilter");
-
-    if (roleFilter) roleFilter.addEventListener("change", filterUsers);
-    if (statusFilter) statusFilter.addEventListener("change", filterUsers);
-  }
-
-  function filterUsers() {
-    const searchTerm = document
-      .getElementById("searchUsers")
-      .value.toLowerCase();
-    const roleFilter = document.getElementById("roleFilter").value;
-    const statusFilter = document.getElementById("statusFilter").value;
-    const userRows = document.querySelectorAll(".user-row");
-    const emptyState = document.getElementById("emptyState");
-    const usersTable = document.querySelector(".users-table");
-
-    let visibleCount = 0;
-
-    userRows.forEach((row) => {
-      const name = row.dataset.name || "";
-      const email = row.dataset.email || "";
-      const username = row.dataset.username || "";
-      const role = row.dataset.role || "";
-      const status = row.dataset.status || "";
-
-      const matchesSearch =
-        !searchTerm ||
-        name.includes(searchTerm) ||
-        email.includes(searchTerm) ||
-        username.includes(searchTerm);
-      const matchesRole = !roleFilter || role === roleFilter;
-      const matchesStatus = !statusFilter || status === statusFilter;
-
-      if (matchesSearch && matchesRole && matchesStatus) {
-        row.style.display = "";
-        visibleCount++;
-      } else {
-        row.style.display = "none";
-      }
-    });
-
-    // Show/hide empty state
-    if (visibleCount === 0 && (searchTerm || roleFilter || statusFilter)) {
-      if (emptyState) emptyState.style.display = "block";
-      if (usersTable) usersTable.style.display = "none";
-    } else {
-      if (emptyState) emptyState.style.display = "none";
-      if (usersTable) usersTable.style.display = "block";
-    }
-  }
-
-  function clearFilters() {
-    document.getElementById("searchUsers").value = "";
-    document.getElementById("roleFilter").value = "";
-    document.getElementById("statusFilter").value = "";
-    filterUsers();
-  }
-
-  function refreshUserList() {
-    window.location.reload();
-  }
-
-  // Event Listeners
-  function setupEventListeners() {
-    // Close dropdowns when clicking outside
-    document.addEventListener("click", function (e) {
-      if (!e.target.closest(".dropdown")) {
-        document.querySelectorAll(".dropdown-menu.show").forEach((menu) => {
-          menu.classList.remove("show");
-        });
-      }
-    });
-
-    // Close modals when clicking outside
-    const modals = document.querySelectorAll(".modal");
-    modals.forEach((modal) => {
-      modal.addEventListener("click", function (e) {
-        if (e.target === this) {
-          this.style.display = "none";
-        }
-      });
-    });
-
-    // Keyboard shortcuts
-    document.addEventListener("keydown", function (e) {
-      // ESC to close modals
-      if (e.key === "Escape") {
-        closeUserDetailsModal();
-        closePasswordResetModal();
-      }
-
-      // Ctrl/Cmd + F to focus search
-      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
-        e.preventDefault();
-        const searchInput = document.getElementById("searchUsers");
-        if (searchInput) searchInput.focus();
-      }
-    });
-  }
-
-  // Dropdown Functions
-  function toggleDropdown(event, button) {
-    event.stopPropagation();
-
-    const dropdown = button.closest(".dropdown");
-    const menu = dropdown.querySelector(".dropdown-menu");
-
-    // Close all other dropdowns
-    document.querySelectorAll(".dropdown-menu").forEach((otherMenu) => {
-      if (otherMenu !== menu) {
-        otherMenu.classList.remove("show");
-      }
-    });
-
-    // Toggle current dropdown
-    menu.classList.toggle("show");
-  }
-
-  // Confirmation Functions
-  function confirmDeactivateUser(userName, userRole) {
-    let message = `Are you sure you want to deactivate ${userName}?\n\n`;
-
-    if (userRole === "admin") {
-      message += "This will:\n";
-      message += "• Remove admin privileges\n";
-      message += "• Disable their login access\n";
-      message += "• Preserve their data\n";
-      message += "• Allow reactivation later\n\n";
-      message +=
-        "Note: System will prevent deactivation if this is the last admin.";
-    } else {
-      message += "This will:\n";
-      message += "• Disable their login access\n";
-      message += "• Preserve their QR codes\n";
-      message += "• Allow reactivation later";
-    }
-
-    return confirm(message);
-  }
-
-  function confirmPromoteUser(userName) {
-    return confirm(
-      `Promote ${userName} to admin?\n\n` +
-        "This will give them full system access including:\n" +
-        "• User management\n" +
-        "• System settings\n" +
-        "• All QR code operations"
-    );
-  }
-
-  function confirmDemoteUser(userName) {
-    return confirm(
-      `Demote ${userName} from admin to staff?\n\n` +
-        "This will:\n" +
-        "• Remove admin privileges\n" +
-        "• Limit access to QR code management only\n" +
-        "• Preserve their account and data"
-    );
-  }
-
-  // Permanent Delete Functions
-  function confirmPermanentDelete(userName) {
-    return confirm(
-      `⚠️ PERMANENTLY DELETE ${userName}?\n\n` +
-        "This action CANNOT be undone and will:\n" +
-        "• Permanently remove the user account\n" +
-        "• Delete all associated QR codes\n" +
-        "• Remove all user data from database\n\n" +
-        "Are you absolutely sure?"
-    );
-  }
-
-  // Modal Functions
-  function viewUserDetails(userId) {
-    const modal = document.getElementById("userDetailsModal");
-    const modalTitle = document.getElementById("userModalTitle");
-    const modalBody = document.getElementById("userModalBody");
-
-    if (!modal || !modalTitle || !modalBody) return;
-
-    modalTitle.textContent = "User Details";
-    modalBody.innerHTML = `
-        <div class="loading-content">
-            <i class="fas fa-spinner fa-spin"></i>
-            Loading user information...
-        </div>
-    `;
-
-    modal.style.display = "flex";
-
-    // Find user data from the table
-    const userRow = document.querySelector(`[data-user-id="${userId}"]`);
-    if (userRow) {
-      const userName = userRow.querySelector(".user-name").textContent;
-      const userEmail = userRow
-        .querySelector(".user-email")
-        .textContent.replace(
-          /^\s*[\u2709\u2709\uFE0F\u2196\u2197\u2198\u2199]*\s*/,
-          ""
-        )
-        .trim();
-      const userRole = userRow.dataset.role;
-      const userStatus = userRow.dataset.status;
-      const qrCount = userRow.querySelector(".qr-total strong").textContent;
-      const activeQrCount =
-        userRow.querySelector(".qr-active span").textContent;
-
-      setTimeout(() => {
-        modalTitle.textContent = `User Details - ${userName}`;
-        modalBody.innerHTML = `
-                <div class="user-detail-view">
-                    <div class="detail-header">
-                        <div class="detail-avatar">
-                            <i class="fas fa-user"></i>
-                            ${
-                              userRole === "admin"
-                                ? '<div class="avatar-badge admin"><i class="fas fa-crown"></i></div>'
-                                : ""
-                            }
-                        </div>
-                        <div class="detail-info">
-                            <h3>${userName}</h3>
-                            <p>${userEmail}</p>
-                            <span class="role-badge ${userRole}">
-                                <i class="fas ${
-                                  userRole === "admin"
-                                    ? "fa-crown"
-                                    : "fa-user-tie"
-                                }"></i>
-                                ${
-                                  userRole.charAt(0).toUpperCase() +
-                                  userRole.slice(1)
-                                }
-                            </span>
-                        </div>
-                    </div>
-                    
-                    <div class="detail-sections">
-                        <div class="detail-section">
-                            <h4><i class="fas fa-info-circle"></i> Account Information</h4>
-                            <div class="detail-grid">
-                                <div class="detail-item">
-                                    <strong>Status:</strong>
-                                    <span class="status-badge ${userStatus}">
-                                        <i class="fas ${
-                                          userStatus === "active"
-                                            ? "fa-check-circle"
-                                            : "fa-times-circle"
-                                        }"></i>
-                                        ${
-                                          userStatus.charAt(0).toUpperCase() +
-                                          userStatus.slice(1)
-                                        }
-                                    </span>
-                                </div>
-                                <div class="detail-item">
-                                    <strong>Role:</strong>
-                                    <span>${
-                                      userRole.charAt(0).toUpperCase() +
-                                      userRole.slice(1)
-                                    }</span>
-                                </div>
-                                <div class="detail-item">
-                                    <strong>User ID:</strong>
-                                    <span>${userId}</span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="detail-section">
-                            <h4><i class="fas fa-qrcode"></i> QR Code Activity</h4>
-                            <div class="activity-stats">
-                                <div class="activity-item">
-                                    <span class="activity-number">${qrCount}</span>
-                                    <span class="activity-label">Total QR Codes</span>
-                                </div>
-                                <div class="activity-item">
-                                    <span class="activity-number">${activeQrCount}</span>
-                                    <span class="activity-label">Active QR Codes</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-      }, 500);
-    }
-  }
-
-  function closeUserDetailsModal() {
-    const modal = document.getElementById("userDetailsModal");
-    if (modal) modal.style.display = "none";
-  }
-
-  function resetUserPassword(userId, userName) {
-    const modal = document.getElementById("passwordResetModal");
-    if (modal) modal.style.display = "flex";
-  }
-
-  function closePasswordResetModal() {
-    const modal = document.getElementById("passwordResetModal");
-    if (modal) modal.style.display = "none";
-  }
-
-  function viewUserQRCodes(userId) {
-    // This would navigate to a page showing the user's QR codes
-    alert(
-      `This would show QR codes for user ID: ${userId}\nYou can implement this by creating a route like /users/${userId}/qr-codes`
-    );
-  }
-
-  // Utility Functions
-  function showToast(message, type = "info") {
-    const toast = document.createElement("div");
-    toast.className = `toast toast-${type}`;
-    toast.innerHTML = `
-        <div class="toast-content">
-            <i class="fas ${getToastIcon(type)}"></i>
-            <span>${message}</span>
-        </div>
-    `;
-
-    toast.style.cssText = `
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        padding: 1rem;
-        z-index: 1000;
-        opacity: 0;
-        transform: translateX(100%);
-        transition: all 0.3s ease;
-        border-left: 4px solid ${getToastColor(type)};
-        max-width: 400px;
-    `;
-
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-      toast.style.opacity = "1";
-      toast.style.transform = "translateX(0)";
-    }, 100);
-
-    setTimeout(() => {
-      toast.style.opacity = "0";
-      toast.style.transform = "translateX(100%)";
-      setTimeout(() => {
-        if (document.body.contains(toast)) {
-          document.body.removeChild(toast);
-        }
-      }, 300);
-    }, 4000);
-  }
-
-  function getToastIcon(type) {
-    const icons = {
-      success: "fa-check-circle",
-      error: "fa-exclamation-circle",
-      warning: "fa-exclamation-triangle",
-      info: "fa-info-circle",
-    };
-    return icons[type] || icons.info;
-  }
-
-  function getToastColor(type) {
-    const colors = {
-      success: "#059669",
-      error: "#dc2626",
-      warning: "#d97706",
-      info: "#0891b2",
-    };
-    return colors[type] || colors.info;
-  }
-</script>
-
-<style>
-  /* Users Page Styles */
-  .users-page {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 1rem;
-  }
-
-  .users-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 2rem;
-    padding: 2rem;
-    background: var(--white);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow);
-  }
-
-  .header-content h1 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--gray-900);
-    margin-bottom: 0.5rem;
-  }
-
-  .header-content p {
-    color: var(--gray-500);
-    font-size: 1rem;
-  }
-
-  .users-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-  }
-
-  .stat-card {
-    background: var(--white);
-    padding: 1.5rem;
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow);
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    transition: var(--transition);
-  }
-
-  .stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-  }
-
-  .stat-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: var(--radius-lg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.25rem;
-    color: var(--white);
-  }
-
-  .stat-icon.admin {
-    background: linear-gradient(135deg, #fbbf24, #f59e0b);
-  }
-
-  .stat-icon.staff {
-    background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
-  }
-
-  .stat-icon.active {
-    background: linear-gradient(135deg, var(--success-color), #047857);
-  }
-
-  .stat-icon.inactive {
-    background: linear-gradient(135deg, var(--danger-color), #b91c1c);
-  }
-
-  .stat-info h3 {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--gray-900);
-    margin-bottom: 0.25rem;
-  }
-
-  .stat-info p {
-    color: var(--gray-500);
-    font-size: 0.875rem;
-  }
-
-  .users-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    padding: 1.5rem;
-    background: var(--white);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow);
-  }
-
-  .search-filters {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-  }
-
-  .search-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .search-box i {
-    position: absolute;
-    left: 0.75rem;
-    color: var(--gray-400);
-    z-index: 1;
-  }
-
-  .search-box input {
-    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-    border: 2px solid var(--gray-200);
-    border-radius: var(--radius-lg);
-    font-size: 0.875rem;
-    width: 300px;
-    transition: var(--transition);
-  }
-
-  .search-box input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-  }
-
-  .filter-group {
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  .filter-select {
-    padding: 0.75rem 1rem;
-    border: 2px solid var(--gray-200);
-    border-radius: var(--radius-lg);
-    font-size: 0.875rem;
-    background-color: var(--white);
-    cursor: pointer;
-    transition: var(--transition);
-    min-width: 140px;
-  }
-
-  .filter-select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-  }
-
-  .users-container {
-    background: var(--white);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow);
-    overflow: hidden;
-  }
-
-  .users-table {
-    overflow-x: auto;
-  }
-
-  .users-table table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 1000px;
-  }
-
-  .users-table th,
-  .users-table td {
-    padding: 1rem;
-    text-align: left;
-    border-bottom: 1px solid var(--gray-200);
-    vertical-align: middle;
-  }
-
-  .users-table th {
-    background-color: var(--gray-50);
-    font-weight: 600;
-    color: var(--gray-700);
-    font-size: 0.875rem;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .users-table tbody tr {
-    transition: var(--transition);
-  }
-
-  .users-table tbody tr:hover {
-    background-color: var(--gray-50);
-  }
-
-  /* User Information Styles */
-  .user-info {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  .user-avatar {
-    position: relative;
-    width: 40px;
-    height: 40px;
-    background: var(--gray-200);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--gray-500);
-    font-size: 1.125rem;
-  }
-
-  .avatar-badge {
-    position: absolute;
-    bottom: -2px;
-    right: -2px;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.625rem;
-    border: 2px solid var(--white);
-  }
-
-  .avatar-badge.admin {
-    background: #fbbf24;
-    color: #92400e;
-  }
-
-  .user-details {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .user-name {
-    font-weight: 600;
-    color: var(--gray-900);
-    font-size: 0.875rem;
-    margin-bottom: 0.125rem;
-  }
-
-  .user-username {
-    font-size: 0.75rem;
-    color: var(--gray-500);
-    margin-bottom: 0.25rem;
-  }
-
-  .current-user-badge {
-    display: inline-block;
-    padding: 0.125rem 0.375rem;
-    background: rgba(37, 99, 235, 0.1);
-    color: var(--primary-color);
-    border-radius: var(--radius-sm);
-    font-size: 0.625rem;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-
-  /* Contact Information */
-  .contact-info {
-    min-width: 0;
-  }
-
-  .user-email {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--gray-600);
-  }
-
-  .user-email i {
-    color: var(--gray-400);
-    font-size: 0.75rem;
-  }
-
-  /* Role Badge */
-  .role-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--radius);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-
-  .role-badge.admin {
-    background: rgba(251, 191, 36, 0.1);
-    color: #d97706;
-  }
-
-  .role-badge.staff {
-    background: rgba(100, 116, 139, 0.1);
-    color: var(--gray-600);
-  }
-
-  /* Status Badge */
-  .status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--radius);
-    font-size: 0.75rem;
-    font-weight: 600;
-  }
-
-  .status-badge.active {
-    background: rgba(5, 150, 105, 0.1);
-    color: var(--success-color);
-  }
-
-  .status-badge.inactive {
-    background: rgba(220, 38, 38, 0.1);
-    color: var(--danger-color);
-  }
-
-  /* QR Count */
-  .qr-count {
-    text-align: center;
-  }
-
-  .qr-total {
-    margin-bottom: 0.25rem;
-  }
-
-  .qr-total strong {
-    display: block;
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: var(--gray-900);
-  }
-
-  .qr-total small,
-  .qr-active small {
-    font-size: 0.625rem;
-    color: var(--gray-500);
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
-  .qr-active span {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--success-color);
-  }
-
-  /* Date Information */
-  .date-info {
-    text-align: center;
-  }
-
-  .date {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--gray-900);
-    margin-bottom: 0.125rem;
-  }
-
-  .time {
-    font-size: 0.75rem;
-    color: var(--gray-500);
-  }
-
-  .text-muted {
-    color: var(--gray-400);
-    font-size: 0.875rem;
-  }
-
-  /* Action Buttons */
-  .user-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    justify-content: flex-end;
-  }
-
-  .action-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition: var(--transition);
-    text-decoration: none;
-    font-size: 0.875rem;
-  }
-
-  .action-btn:hover {
-    transform: translateY(-1px);
-  }
-
-  .btn-edit {
-    background: rgba(8, 145, 178, 0.1);
-    color: var(--info-color);
-  }
-
-  .btn-edit:hover {
-    background: rgba(8, 145, 178, 0.2);
-  }
-
-  .btn-promote {
-    background: rgba(5, 150, 105, 0.1);
-    color: var(--success-color);
-  }
-
-  .btn-promote:hover {
-    background: rgba(5, 150, 105, 0.2);
-  }
-
-  .btn-demote {
-    background: rgba(217, 119, 6, 0.1);
-    color: var(--warning-color);
-  }
-
-  .btn-demote:hover {
-    background: rgba(217, 119, 6, 0.2);
-  }
-
-  .btn-deactivate {
-    background: rgba(220, 38, 38, 0.1);
-    color: var(--danger-color);
-  }
-
-  .btn-deactivate:hover {
-    background: rgba(220, 38, 38, 0.2);
-  }
-
-  .btn-activate {
-    background: rgba(5, 150, 105, 0.1);
-    color: var(--success-color);
-  }
-
-  .btn-activate:hover {
-    background: rgba(5, 150, 105, 0.2);
-  }
-
-  .btn-more {
-    background: rgba(100, 116, 139, 0.1);
-    color: var(--gray-600);
-  }
-
-  .btn-more:hover {
-    background: rgba(100, 116, 139, 0.2);
-  }
-
-  .btn-disabled {
-    background: rgba(156, 163, 175, 0.1);
-    color: var(--gray-400);
-    cursor: not-allowed;
-  }
-
-  .btn-disabled:hover {
-    transform: none;
-  }
-
-  .btn-delete {
-    background: rgba(220, 38, 38, 0.1);
-    color: var(--danger-color);
-  }
-
-  .btn-delete:hover {
-    background: rgba(220, 38, 38, 0.2);
-  }
-
-  /* Dropdown Styles */
-  .dropdown {
-    position: relative;
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: var(--white);
-    border: 1px solid var(--gray-200);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-xl);
-    min-width: 180px;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: var(--transition);
-    padding: 0.5rem 0;
-  }
-
-  .dropdown-menu.show {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    color: var(--gray-700);
-    text-decoration: none;
-    font-size: 0.875rem;
-    transition: var(--transition);
-    border: none;
-    background: none;
-    width: 100%;
-    text-align: left;
-    cursor: pointer;
-  }
-
-  .dropdown-item:hover {
-    background-color: var(--gray-50);
-    color: var(--gray-900);
-  }
-
-  .dropdown-item i {
-    width: 16px;
-    color: var(--gray-400);
-  }
-
-  .dropdown-item.danger-item {
-    color: var(--danger-color);
-  }
-
-  .dropdown-item.danger-item:hover {
-    background-color: rgba(220, 38, 38, 0.1);
-    color: var(--danger-color);
-  }
-
-  .dropdown-item.danger-item i {
-    color: var(--danger-color);
-  }
-
-  .dropdown-divider {
-    height: 1px;
-    background: var(--gray-200);
-    margin: 0.5rem 0;
-  }
-
-  /* Modal Styles */
-  .modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-  }
-
-  .modal-content {
-    background: var(--white);
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-xl);
-    max-width: 600px;
-    width: 100%;
-    max-height: 90vh;
-    overflow-y: auto;
-    animation: modalSlideUp 0.3s ease-out;
-  }
-
-  @keyframes modalSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px) scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.5rem;
-    border-bottom: 1px solid var(--gray-200);
-  }
-
-  .modal-header h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--gray-900);
-  }
-
-  .modal-close {
-    background: none;
-    border: none;
-    padding: 0.5rem;
-    border-radius: var(--radius);
-    cursor: pointer;
-    color: var(--gray-500);
-    transition: var(--transition);
-  }
-
-  .modal-close:hover {
-    background-color: var(--gray-100);
-    color: var(--gray-700);
-  }
-
-  .modal-body {
-    padding: 1.5rem;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    padding: 1.5rem;
-    border-top: 1px solid var(--gray-200);
-  }
-
-  /* User Detail View */
-  .user-detail-view {
-    display: grid;
-    gap: 1.5rem;
-  }
-
-  .detail-header {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    background: var(--gray-50);
-    border-radius: var(--radius-lg);
-  }
-
-  .detail-avatar {
-    position: relative;
-    width: 60px;
-    height: 60px;
-    background: var(--gray-200);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--gray-500);
-    font-size: 1.5rem;
-  }
-
-  .detail-info h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: var(--gray-900);
-    margin-bottom: 0.25rem;
-  }
-
-  .detail-info p {
-    color: var(--gray-500);
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-  }
-
-  .detail-sections {
-    display: grid;
-    gap: 1.5rem;
-  }
-
-  .detail-section h4 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--gray-700);
-    margin-bottom: 1rem;
-  }
-
-  .detail-grid {
-    display: grid;
-    gap: 0.75rem;
-  }
-
-  .detail-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem;
-    background: var(--white);
-    border: 1px solid var(--gray-200);
-    border-radius: var(--radius);
-  }
-
-  .detail-item strong {
-    color: var(--gray-700);
-    font-weight: 500;
-    font-size: 0.875rem;
-  }
-
-  .activity-stats {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-  }
-
-  .activity-item {
-    text-align: center;
-    padding: 1rem;
-    background: var(--white);
-    border: 1px solid var(--gray-200);
-    border-radius: var(--radius);
-  }
-
-  .activity-number {
-    display: block;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    margin-bottom: 0.25rem;
-  }
-
-  .activity-label {
-    font-size: 0.75rem;
-    color: var(--gray-500);
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
-  .loading-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    padding: 2rem;
-    color: var(--gray-500);
-  }
-
-  .loading-content i {
-    font-size: 1.25rem;
-  }
-
-  /* Delete Warning Modal Styles */
-  .delete-warning {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-
-  .warning-icon {
-    width: 50px;
-    height: 50px;
-    background: rgba(220, 38, 38, 0.1);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--danger-color);
-    font-size: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  .warning-content {
-    flex: 1;
-  }
-
-  .warning-content h4 {
-    color: var(--danger-color);
-    font-size: 1.125rem;
-    font-weight: 700;
-    margin-bottom: 0.75rem;
-  }
-
-  .warning-content p {
-    color: var(--gray-700);
-    margin-bottom: 1rem;
-  }
-
-  .warning-details {
-    background: rgba(220, 38, 38, 0.05);
-    padding: 1rem;
-    border-radius: var(--radius);
-    border-left: 4px solid var(--danger-color);
-    margin-bottom: 1.5rem;
-  }
-
-  .warning-details h5 {
-    color: var(--danger-color);
-    font-size: 0.875rem;
-    font-weight: 600;
-    margin-bottom: 0.5rem;
-  }
-
-  .warning-details ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .warning-details li {
-    padding: 0.25rem 0;
-    color: var(--gray-700);
-    font-size: 0.875rem;
-    position: relative;
-    padding-left: 1rem;
-  }
-
-  .warning-details li::before {
-    content: "•";
-    position: absolute;
-    left: 0;
-    color: var(--danger-color);
-    font-weight: bold;
-  }
-
-  .confirmation-section {
-    background: var(--gray-50);
-    padding: 1rem;
-    border-radius: var(--radius);
-    border: 1px solid var(--gray-200);
-  }
-
-  .confirmation-section p {
-    margin-bottom: 0.75rem;
-    font-weight: 500;
-    color: var(--gray-700);
-  }
-
-  .delete-input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px solid var(--gray-300);
-    border-radius: var(--radius);
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    background: var(--white);
-  }
-
-  .delete-input:focus {
-    outline: none;
-    border-color: var(--danger-color);
-    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
-  }
-
-  .btn-danger {
-    background: var(--danger-color);
-    color: var(--white);
-    border: none;
-  }
-
-  .btn-danger:hover {
-    background: #b91c1c;
-  }
-
-  .btn-danger:disabled {
-    background: var(--gray-400);
-    cursor: not-allowed;
-  }
-
-  .btn-danger-enabled {
-    background: var(--danger-color) !important;
-    cursor: pointer !important;
-  }
-
-  /* Empty State */
-  .empty-state {
-    text-align: center;
-    padding: 3rem;
-    background: var(--white);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow);
-  }
-
-  .empty-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 80px;
-    height: 80px;
-    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
-    color: var(--gray-400);
-    border-radius: 50%;
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .empty-state h3 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--gray-900);
-    margin-bottom: 0.75rem;
-  }
-
-  .empty-state p {
-    color: var(--gray-500);
-    margin-bottom: 1.5rem;
-  }
-
-  /* Responsive Design */
-  @media (max-width: 1200px) {
-    .users-page {
-      padding: 0 0.5rem;
-    }
-
-    .search-box input {
-      width: 250px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .users-header {
-      flex-direction: column;
-      gap: 1rem;
-      text-align: center;
-    }
-
-    .users-stats {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .users-controls {
-      flex-direction: column;
-      gap: 1rem;
-      align-items: stretch;
-    }
-
-    .search-filters {
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .filter-group {
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .search-box input {
-      width: 100%;
-    }
-
-    .filter-select {
-      width: 100%;
-    }
-
-    .users-table {
-      font-size: 0.875rem;
-    }
-
-    .users-table th,
-    .users-table td {
-      padding: 0.75rem 0.5rem;
-    }
-
-    .user-actions {
-      flex-wrap: wrap;
-      gap: 0.25rem;
-    }
-
-    .action-btn {
-      width: 28px;
-      height: 28px;
-      font-size: 0.75rem;
-    }
-
-    .modal-content {
-      margin: 0.5rem;
-      max-height: calc(100vh - 1rem);
-    }
-
-    .detail-header {
-      flex-direction: column;
-      text-align: center;
-      gap: 0.75rem;
-    }
-
-    .activity-stats {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .users-stats {
-      grid-template-columns: 1fr;
-    }
-
-    .stat-card {
-      padding: 1rem;
-    }
-
-    .users-table table {
-      min-width: 800px;
-    }
-
-    .user-info {
-      flex-direction: column;
-      gap: 0.5rem;
-      text-align: center;
-    }
-  }
-
-  /* Accessibility and utility classes */
-  .text-center {
-    text-align: center;
-  }
-  .text-left {
-    text-align: left;
-  }
-  .text-right {
-    text-align: right;
-  }
-
-  .mb-1 {
-    margin-bottom: 0.25rem;
-  }
-  .mb-2 {
-    margin-bottom: 0.5rem;
-  }
-  .mb-3 {
-    margin-bottom: 0.75rem;
-  }
-  .mb-4 {
-    margin-bottom: 1rem;
-  }
-
-  .mt-1 {
-    margin-top: 0.25rem;
-  }
-  .mt-2 {
-    margin-top: 0.5rem;
-  }
-  .mt-3 {
-    margin-top: 0.75rem;
-  }
-  .mt-4 {
-    margin-top: 1rem;
-  }
-
-  .p-1 {
-    padding: 0.25rem;
-  }
-  .p-2 {
-    padding: 0.5rem;
-  }
-  .p-3 {
-    padding: 0.75rem;
-  }
-  .p-4 {
-    padding: 1rem;
-  }
-
-  /* Loading states */
-  .loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-  }
-
-  .loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid var(--gray-200);
-    border-top: 4px solid var(--primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Success/Error states */
-  .success {
-    color: var(--success-color);
-  }
-  .error {
-    color: var(--danger-color);
-  }
-  .warning {
-    color: var(--warning-color);
-  }
-  .info {
-    color: var(--info-color);
-  }
-
-  /* Hidden utility */
-  .hidden {
-    display: none !important;
-  }
-  .sr-only {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    white-space: nowrap !important;
-    border: 0 !important;
-  }
-
-  /* Focus states for accessibility */
-  .action-btn:focus,
-  .dropdown-toggle:focus,
-  .btn:focus {
-    outline: 2px solid var(--primary-color);
-    outline-offset: 2px;
-  }
-
-  /* High contrast mode support */
-  @media (prefers-contrast: high) {
-    .stat-icon.admin {
-      background: #000;
-      color: #fff;
-    }
-    .stat-icon.staff {
-      background: #666;
-      color: #fff;
-    }
-    .stat-icon.active {
-      background: #0a5a2e;
-      color: #fff;
-    }
-    .stat-icon.inactive {
-      background: #a01e1e;
-      color: #fff;
-    }
-
-    .role-badge.admin {
-      background: #000;
-      color: #fff;
-    }
-    .role-badge.staff {
-      background: #666;
-      color: #fff;
-    }
-
-    .status-badge.active {
-      background: #0a5a2e;
-      color: #fff;
-    }
-    .status-badge.inactive {
-      background: #a01e1e;
-      color: #fff;
-    }
-  }
-
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-    }
-
-    .stat-card:hover,
-    .action-btn:hover {
-      transform: none;
-    }
-  }
-
-  /* Print styles */
-  @media print {
-    .users-controls,
-    .header-actions,
-    .user-actions,
-    .modal,
-    .empty-state {
-      display: none !important;
-    }
-
-    .users-page {
-      max-width: none;
-      padding: 0;
-    }
-
-    .users-header {
-      box-shadow: none;
-      border: 1px solid #000;
-    }
-
-    .users-table {
-      box-shadow: none;
-      border: 1px solid #000;
-    }
-
-    .users-table th,
-    .users-table td {
-      border: 1px solid #000;
-      padding: 0.5rem;
-    }
-
-    .stat-card {
-      break-inside: avoid;
-      box-shadow: none;
-      border: 1px solid #000;
-    }
-  }
-
-  /* Dark mode support (if implemented) */
-  @media (prefers-color-scheme: light) {
-    :root {
-      --white: #1a1a1a;
-      --gray-50: #262626;
-      --gray-100: #2d2d2d;
-      --gray-200: #404040;
-      --gray-300: #525252;
-      --gray-400: #737373;
-      --gray-500: #a3a3a3;
-      --gray-600: #d4d4d4;
-      --gray-700: #e5e5e5;
-      --gray-800: #f5f5f5;
-      --gray-900: #ffffff;
-    }
-  }
-</style>
-{% endblock %}
diff --git a/templates/users.html b/templates/users.html
index cdcebd9..7e7b5e7 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -1,12 +1,11 @@
-{% extends "base_authenticated.html" %} 
-{% block title %}User Management - QR Code Management{% endblock %} 
-
-{% block extra_head %}
+{% extends "base_authenticated.html" %} {% block title %}User Management - QR
+Code Management{% endblock %} {% block extra_head %}
 <!-- Dedicated Users Page CSS -->
-<link rel="stylesheet" href="{{ url_for('static', filename='css/users.css') }}">
-{% endblock %}
-
-{% block content %}
+<link
+  rel="stylesheet"
+  href="{{ url_for('static', filename='css/users.css') }}"
+/>
+{% endblock %} {% block content %}
 <div class="users-page">
   <div class="users-header">
     <div class="header-content">
@@ -32,7 +31,10 @@
         <i class="fas fa-crown"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('role', 'equalto', 'admin')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('role', 'equalto',
+          'admin')|selectattr('active_status', 'equalto', True)|list|length }}
+        </h3>
         <p>Active Administrators</p>
       </div>
     </div>
@@ -42,7 +44,10 @@
         <i class="fas fa-users"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('role', 'equalto', 'staff')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('role', 'equalto',
+          'staff')|selectattr('active_status', 'equalto', True)|list|length }}
+        </h3>
         <p>Active Staff Members</p>
       </div>
     </div>
@@ -52,7 +57,10 @@
         <i class="fas fa-calculator"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('role', 'equalto', 'payroll')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('role', 'equalto',
+          'payroll')|selectattr('active_status', 'equalto', True)|list|length }}
+        </h3>
         <p>Payroll Specialists</p>
       </div>
     </div>
@@ -62,7 +70,11 @@
         <i class="fas fa-project-diagram"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('role', 'equalto', 'project_manager')|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('role', 'equalto',
+          'project_manager')|selectattr('active_status', 'equalto',
+          True)|list|length }}
+        </h3>
         <p>Project Managers</p>
       </div>
     </div>
@@ -72,7 +84,9 @@
         <i class="fas fa-user-check"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('active_status', 'equalto', True)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('active_status', 'equalto', True)|list|length }}
+        </h3>
         <p>Total Active Users</p>
       </div>
     </div>
@@ -82,7 +96,9 @@
         <i class="fas fa-user-times"></i>
       </div>
       <div class="stat-info">
-        <h3>{{ users|selectattr('active_status', 'equalto', False)|list|length }}</h3>
+        <h3>
+          {{ users|selectattr('active_status', 'equalto', False)|list|length }}
+        </h3>
         <p>Inactive Users</p>
       </div>
     </div>
@@ -152,7 +168,7 @@
           data-status="{{ 'active' if user.active_status else 'inactive' }}"
         >
           <td>{{ loop.index }}</td>
-          
+
           <!-- User Information -->
           <td>
             <div class="user-info">
@@ -178,28 +194,27 @@
           <td>
             <div class="user-role {{ user.role }}">
               {% if user.role == 'admin' %}
-                <i class="fas fa-crown"></i>
-                Administrator
-              {% elif user.role == 'staff' %}
-                <i class="fas fa-user"></i>
-                Staff User
-              {% elif user.role == 'payroll' %}
-                <i class="fas fa-calculator"></i>
-                Payroll Specialist
-              {% elif user.role == 'project_manager' %}
-                <i class="fas fa-project-diagram"></i>
-                Project Manager
-              {% else %}
-                <i class="fas fa-user"></i>
-                {{ user.role.title() }}
-              {% endif %}
+              <i class="fas fa-crown"></i>
+              Administrator {% elif user.role == 'staff' %}
+              <i class="fas fa-user"></i>
+              Staff User {% elif user.role == 'payroll' %}
+              <i class="fas fa-calculator"></i>
+              Payroll Specialist {% elif user.role == 'project_manager' %}
+              <i class="fas fa-project-diagram"></i>
+              Project Manager {% else %}
+              <i class="fas fa-user"></i>
+              {{ user.role.title() }} {% endif %}
             </div>
           </td>
 
           <!-- Status -->
           <td>
-            <div class="user-status {{ 'active' if user.active_status else 'inactive' }}">
-              <i class="fas fa-{{ 'check-circle' if user.active_status else 'times-circle' }}"></i>
+            <div
+              class="user-status {{ 'active' if user.active_status else 'inactive' }}"
+            >
+              <i
+                class="fas fa-{{ 'check-circle' if user.active_status else 'times-circle' }}"
+              ></i>
               {{ 'Active' if user.active_status else 'Inactive' }}
             </div>
           </td>
@@ -207,7 +222,10 @@
           <!-- QR Codes Count -->
           <td class="user-qr-count">
             <div class="qr-stats">
-              <span class="qr-count">{{ user.created_qr_codes.filter_by(active_status=True).count() }}</span>
+              <span class="qr-count"
+                >{{ user.created_qr_codes.filter_by(active_status=True).count()
+                }}</span
+              >
               <small>QR Codes</small>
             </div>
           </td>
@@ -215,24 +233,32 @@
           <!-- Created Date -->
           <td>
             {% if user.created_date %}
-              <div class="date-info">
-                <div class="date-main">{{ user.created_date.strftime('%m/%d/%Y') }}</div>
-                <div class="date-time">{{ user.created_date.strftime('%I:%M %p') }}</div>
+            <div class="date-info">
+              <div class="date-main">
+                {{ user.created_date.strftime('%m/%d/%Y') }}
               </div>
+              <div class="date-time">
+                {{ user.created_date.strftime('%I:%M %p') }}
+              </div>
+            </div>
             {% else %}
-              <span class="never-logged-in">Unknown</span>
+            <span class="never-logged-in">Unknown</span>
             {% endif %}
           </td>
 
           <!-- Last Login -->
           <td>
             {% if user.last_login_date %}
-              <div class="date-info">
-                <div class="date-main">{{ user.last_login_date.strftime('%m/%d/%Y') }}</div>
-                <div class="date-time">{{ user.last_login_date.strftime('%I:%M %p') }}</div>
+            <div class="date-info">
+              <div class="date-main">
+                {{ user.last_login_date.strftime('%m/%d/%Y') }}
               </div>
+              <div class="date-time">
+                {{ user.last_login_date.strftime('%I:%M %p') }}
+              </div>
+            </div>
             {% else %}
-              <span class="never-logged-in">Never</span>
+            <span class="never-logged-in">Never</span>
             {% endif %}
           </td>
 
@@ -240,50 +266,64 @@
           <td class="user-actions">
             <div class="action-buttons">
               <!-- Edit Button -->
-              <a href="{{ url_for('edit_user', user_id=user.id) }}" 
-                 class="btn btn-sm btn-primary" 
-                 title="Edit User">
+              <a
+                href="{{ url_for('edit_user', user_id=user.id) }}"
+                class="btn btn-sm btn-primary"
+                title="Edit User"
+              >
                 <i class="fas fa-edit"></i>
               </a>
 
               {% if user.role != 'admin' %}
-                <!-- Promote to Admin -->
-                <a href="{{ url_for('promote_user', user_id=user.id) }}" 
-                   class="btn btn-sm btn-success" 
-                   title="Promote to Admin"
-                   onclick="return confirm('Are you sure you want to promote {{ user.full_name }} to admin?')">
-                  <i class="fas fa-arrow-up"></i>
-                </a>
+              <!-- Promote to Admin -->
+              <a
+                href="{{ url_for('promote_user', user_id=user.id) }}"
+                class="btn btn-sm btn-success"
+                title="Promote to Admin"
+                onclick="return confirm('Are you sure you want to promote {{ user.full_name }} to admin?')"
+              >
+                <i class="fas fa-arrow-up"></i>
+              </a>
               {% else %}
-                <!-- Demote from Admin -->
-                {% if users|selectattr('role', 'equalto', 'admin')|selectattr('active_status', 'equalto', True)|list|length > 1 %}
-                  <a href="{{ url_for('demote_user', user_id=user.id) }}" 
-                     class="btn btn-sm btn-warning" 
-                     title="Demote from Admin"
-                     onclick="return confirm('Are you sure you want to demote {{ user.full_name }} from admin?')">
-                    <i class="fas fa-arrow-down"></i>
-                  </a>
-                {% else %}
-                  <button class="btn btn-sm btn-secondary" 
-                          title="Cannot demote last admin" disabled>
-                    <i class="fas fa-arrow-down"></i>
-                  </button>
-                {% endif %}
-              {% endif %}
+              <!-- Demote from Admin -->
+              {% if users|selectattr('role', 'equalto',
+              'admin')|selectattr('active_status', 'equalto', True)|list|length
+              > 1 %}
+              <a
+                href="{{ url_for('demote_user', user_id=user.id) }}"
+                class="btn btn-sm btn-warning"
+                title="Demote from Admin"
+                onclick="return confirm('Are you sure you want to demote {{ user.full_name }} from admin?')"
+              >
+                <i class="fas fa-arrow-down"></i>
+              </a>
+              {% else %}
+              <button
+                class="btn btn-sm btn-secondary"
+                title="Cannot demote last admin"
+                disabled
+              >
+                <i class="fas fa-arrow-down"></i>
+              </button>
+              {% endif %} {% endif %}
 
               <!-- Status Toggle -->
               {% if user.active_status %}
-                <button class="btn btn-sm btn-danger" 
-                        title="Deactivate User"
-                        onclick="toggleUserStatus({{ user.id }}, false)">
-                  <i class="fas fa-user-times"></i>
-                </button>
+              <button
+                class="btn btn-sm btn-danger"
+                title="Deactivate User"
+                onclick="toggleUserStatus({{ user.id }}, false)"
+              >
+                <i class="fas fa-user-times"></i>
+              </button>
               {% else %}
-                <button class="btn btn-sm btn-success" 
-                        title="Activate User"
-                        onclick="toggleUserStatus({{ user.id }}, true)">
-                  <i class="fas fa-user-check"></i>
-                </button>
+              <button
+                class="btn btn-sm btn-success"
+                title="Activate User"
+                onclick="toggleUserStatus({{ user.id }}, true)"
+              >
+                <i class="fas fa-user-check"></i>
+              </button>
               {% endif %}
             </div>
           </td>
@@ -308,15 +348,13 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
-
-{% block extra_scripts %}
+{% endblock %} {% block extra_scripts %}
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchUsers');
-    const roleFilter = document.getElementById('roleFilter');
-    const statusFilter = document.getElementById('statusFilter');
-    const userRows = document.querySelectorAll('.user-row');
+  document.addEventListener("DOMContentLoaded", function () {
+    const searchInput = document.getElementById("searchUsers");
+    const roleFilter = document.getElementById("roleFilter");
+    const statusFilter = document.getElementById("statusFilter");
+    const userRows = document.querySelectorAll(".user-row");
 
     // Search and filter functionality
     function filterUsers() {
@@ -324,25 +362,26 @@
       const selectedRole = roleFilter.value;
       const selectedStatus = statusFilter.value;
 
-      userRows.forEach(row => {
-        const name = row.dataset.name || '';
-        const email = row.dataset.email || '';
-        const username = row.dataset.username || '';
-        const role = row.dataset.role || '';
-        const status = row.dataset.status || '';
+      userRows.forEach((row) => {
+        const name = row.dataset.name || "";
+        const email = row.dataset.email || "";
+        const username = row.dataset.username || "";
+        const role = row.dataset.role || "";
+        const status = row.dataset.status || "";
 
-        const matchesSearch = !searchTerm || 
-          name.includes(searchTerm) || 
-          email.includes(searchTerm) || 
+        const matchesSearch =
+          !searchTerm ||
+          name.includes(searchTerm) ||
+          email.includes(searchTerm) ||
           username.includes(searchTerm);
 
         const matchesRole = !selectedRole || role === selectedRole;
         const matchesStatus = !selectedStatus || status === selectedStatus;
 
         if (matchesSearch && matchesRole && matchesStatus) {
-          row.style.display = '';
+          row.style.display = "";
         } else {
-          row.style.display = 'none';
+          row.style.display = "none";
         }
       });
 
@@ -350,9 +389,11 @@
     }
 
     function updateRowNumbers() {
-      const visibleRows = Array.from(userRows).filter(row => row.style.display !== 'none');
+      const visibleRows = Array.from(userRows).filter(
+        (row) => row.style.display !== "none"
+      );
       visibleRows.forEach((row, index) => {
-        const numberCell = row.querySelector('td:first-child');
+        const numberCell = row.querySelector("td:first-child");
         if (numberCell) {
           numberCell.textContent = index + 1;
         }
@@ -360,9 +401,9 @@
     }
 
     // Event listeners
-    searchInput.addEventListener('input', filterUsers);
-    roleFilter.addEventListener('change', filterUsers);
-    statusFilter.addEventListener('change', filterUsers);
+    searchInput.addEventListener("input", filterUsers);
+    roleFilter.addEventListener("change", filterUsers);
+    statusFilter.addEventListener("change", filterUsers);
 
     // Initial filter on page load
     filterUsers();
@@ -373,120 +414,129 @@
   }
 
   function toggleUserStatus(userId, newStatus) {
-    const action = newStatus ? 'activate' : 'deactivate';
+    const action = newStatus ? "activate" : "deactivate";
     const message = `Are you sure you want to ${action} this user?`;
-    
+
     if (confirm(message)) {
       // Show loading state
-      const button = event.target.closest('button');
+      const button = event.target.closest("button");
       const originalHTML = button.innerHTML;
       button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
       button.disabled = true;
-      
+
       // Make AJAX call to toggle status
-      fetch(`/users/${userId}/toggle_status`, {
-        method: 'POST',
+      fetch(`/users/${userId}/toggle-status`, {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
+          "Content-Type": "application/json",
+          "X-Requested-With": "XMLHttpRequest",
         },
         body: JSON.stringify({
-          new_status: newStatus
-        })
+          new_status: newStatus,
+        }),
       })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          // Update the UI immediately
-          const userRow = button.closest('.user-row');
-          const statusCell = userRow.querySelector('.user-status');
-          const statusToggleCell = userRow.querySelector('.user-actions');
-          
-          // Update status badge
-          if (data.new_status) {
-            statusCell.innerHTML = '<div class="user-status active"><i class="fas fa-check-circle"></i> Active</div>';
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.success) {
+            // Update the UI immediately
+            const userRow = button.closest(".user-row");
+            const statusCell = userRow.querySelector(".user-status");
+            const statusToggleCell = userRow.querySelector(".user-actions");
+
+            // Update status badge
+            if (data.new_status) {
+              statusCell.innerHTML =
+                '<div class="user-status active"><i class="fas fa-check-circle"></i> Active</div>';
+            } else {
+              statusCell.innerHTML =
+                '<div class="user-status inactive"><i class="fas fa-times-circle"></i> Inactive</div>';
+            }
+
+            // Update the button
+            if (data.new_status) {
+              button.className = "btn btn-sm btn-danger";
+              button.title = "Deactivate User";
+              button.setAttribute(
+                "onclick",
+                `toggleUserStatus(${userId}, false)`
+              );
+              button.innerHTML = '<i class="fas fa-user-times"></i>';
+            } else {
+              button.className = "btn btn-sm btn-success";
+              button.title = "Activate User";
+              button.setAttribute(
+                "onclick",
+                `toggleUserStatus(${userId}, true)`
+              );
+              button.innerHTML = '<i class="fas fa-user-check"></i>';
+            }
+
+            button.disabled = false;
+
+            // Show success message
+            showNotification(data.message, "success");
           } else {
-            statusCell.innerHTML = '<div class="user-status inactive"><i class="fas fa-times-circle"></i> Inactive</div>';
+            // Show error message
+            showNotification(data.message, "error");
+            button.innerHTML = originalHTML;
+            button.disabled = false;
           }
-          
-          // Update the button
-          if (data.new_status) {
-            button.className = 'btn btn-sm btn-danger';
-            button.title = 'Deactivate User';
-            button.setAttribute('onclick', `toggleUserStatus(${userId}, false)`);
-            button.innerHTML = '<i class="fas fa-user-times"></i>';
-          } else {
-            button.className = 'btn btn-sm btn-success';
-            button.title = 'Activate User';
-            button.setAttribute('onclick', `toggleUserStatus(${userId}, true)`);
-            button.innerHTML = '<i class="fas fa-user-check"></i>';
-          }
-          
-          button.disabled = false;
-          
-          // Show success message
-          showNotification(data.message, 'success');
-          
-        } else {
-          // Show error message
-          showNotification(data.message, 'error');
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+          showNotification("Network error. Please try again.", "error");
           button.innerHTML = originalHTML;
           button.disabled = false;
-        }
-      })
-      .catch(error => {
-        console.error('Error:', error);
-        showNotification('Network error. Please try again.', 'error');
-        button.innerHTML = originalHTML;
-        button.disabled = false;
-      });
+        });
     }
   }
-  
+
   function showNotification(message, type) {
     // Create notification element
-    const notification = document.createElement('div');
+    const notification = document.createElement("div");
     notification.className = `alert alert-${type} notification`;
     notification.innerHTML = `
-      <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
+      <i class="fas ${
+        type === "success" ? "fa-check-circle" : "fa-exclamation-circle"
+      }"></i>
       ${message}
       <button class="alert-close" onclick="this.parentElement.remove()">
         <i class="fas fa-times"></i>
       </button>
     `;
-    
+
     // Add notification to page
     document.body.appendChild(notification);
-    
+
     // Style the notification
     Object.assign(notification.style, {
-      position: 'fixed',
-      top: '20px',
-      right: '20px',
-      zIndex: '9999',
-      minWidth: '300px',
-      padding: '12px 16px',
-      borderRadius: '8px',
-      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-      backgroundColor: type === 'success' ? '#10b981' : '#ef4444',
-      color: 'white',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px',
-      animation: 'slideInRight 0.3s ease-out'
+      position: "fixed",
+      top: "20px",
+      right: "20px",
+      zIndex: "9999",
+      minWidth: "300px",
+      padding: "12px 16px",
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      backgroundColor: type === "success" ? "#10b981" : "#ef4444",
+      color: "white",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      animation: "slideInRight 0.3s ease-out",
     });
-    
+
     // Auto remove after 5 seconds
     setTimeout(() => {
       if (notification.parentElement) {
-        notification.style.animation = 'slideOutRight 0.3s ease-out';
+        notification.style.animation = "slideOutRight 0.3s ease-out";
         setTimeout(() => notification.remove(), 300);
       }
     }, 5000);
   }
 
   // Add CSS animations for notifications
-  const style = document.createElement('style');
+  const style = document.createElement("style");
   style.textContent = `
     @keyframes slideInRight {
       from { transform: translateX(100%); opacity: 0; }
@@ -507,4 +557,4 @@
   `;
   document.head.appendChild(style);
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}