Rename modal classes to custom-modal to avoid Bootstrap conflicts

Bootstrap's JavaScript modal system was interfering with our custom modals
because both used the .modal class. Renamed all modal-related classes to
use custom- prefix:
- .modal -> .custom-modal
- .modal-dialog -> .custom-modal-dialog
- .modal-header -> .custom-modal-header
- .modal-body -> .custom-modal-body
- .modal-footer -> .custom-modal-footer
- .modal-title -> .custom-modal-title

This prevents Bootstrap from trying to manage our custom modals.

app/templates/main/user_tokens.html

@@ -3,8 +3,8 @@
 {% block title %}API Tokens - Fixture Manager{% endblock %}
 
 {% block extra_css %}
-/* Modal styles */
-.modal {
+/* Custom Modal styles - using custom prefix to avoid Bootstrap conflicts */
+.custom-modal {
     display: none;
     position: fixed;
     z-index: 1000;
@@ -15,13 +15,13 @@
     background-color: rgba(0,0,0,0.5);
 }
 
-.modal.show {
+.custom-modal.show {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.modal-dialog {
+.custom-modal-dialog {
     background: white;
     border-radius: 8px;
     max-width: 500px;
@@ -31,7 +31,7 @@
     box-shadow: 0 4px 20px rgba(0,0,0,0.3);
 }
 
-.modal-header {
+.custom-modal-header {
     padding: 1rem;
     border-bottom: 1px solid #ddd;
     display: flex;
@@ -41,22 +41,22 @@
     border-radius: 8px 8px 0 0;
 }
 
-.modal-header.bg-success {
+.custom-modal-header.bg-success {
     background-color: #28a745;
     color: white;
 }
 
-.modal-title {
+.custom-modal-title {
     margin: 0;
     font-size: 1.2rem;
     font-weight: bold;
 }
 
-.modal-body {
+.custom-modal-body {
     padding: 1rem;
 }
 
-.modal-footer {
+.custom-modal-footer {
     padding: 1rem;
     border-top: 1px solid #ddd;
     display: flex;
@@ -451,14 +451,14 @@
 </div>
 
 <!-- Create Token Modal -->
-<div class="modal" id="createTokenModal">
-    <div class="modal-dialog">
-        <div class="modal-header">
-            <h5 class="modal-title">Create New API Token</h5>
+<div class="custom-modal" id="createTokenModal">
+    <div class="custom-modal-dialog">
+        <div class="custom-modal-header">
+            <h5 class="custom-modal-title">Create New API Token</h5>
             <button type="button" class="close-btn" onclick="hideCreateModal()">×</button>
         </div>
         <form id="createTokenForm">
-            <div class="modal-body">
+            <div class="custom-modal-body">
                 <div class="mb-3">
                     <label for="tokenName" class="form-label">Token Name</label>
                     <input type="text" class="form-control" id="tokenName" name="name" required
@@ -469,7 +469,7 @@
                     ⚠️ <strong>Important:</strong> The token will only be shown once after creation. Make sure to copy and store it securely.
                 </div>
             </div>
-            <div class="modal-footer">
+            <div class="custom-modal-footer">
                 <button type="button" class="btn btn-secondary" onclick="hideCreateModal()">Cancel</button>
                 <button type="submit" class="btn">
                     ➕ Create Token
@@ -480,15 +480,15 @@
 </div>
 
 <!-- Token Created Modal -->
-<div class="modal" id="tokenCreatedModal">
-    <div class="modal-dialog">
-        <div class="modal-header bg-success">
-            <h5 class="modal-title" style="color: white;">
+<div class="custom-modal" id="tokenCreatedModal">
+    <div class="custom-modal-dialog">
+        <div class="custom-modal-header bg-success">
+            <h5 class="custom-modal-title" style="color: white;">
                 ✅ Token Created Successfully
             </h5>
             <button type="button" class="close-btn white" onclick="hideTokenCreatedModal()">×</button>
         </div>
-        <div class="modal-body">
+        <div class="custom-modal-body">
             <div class="success-message">
                 <strong>Your new API token has been created!</strong>
             </div>
@@ -505,21 +505,21 @@
                 ⚠️ <strong>Warning:</strong> This token will not be shown again. Make sure to copy and store it in a secure location.
             </div>
         </div>
-        <div class="modal-footer">
+        <div class="custom-modal-footer">
             <button type="button" class="btn" onclick="hideTokenCreatedModal()">I've Saved the Token</button>
         </div>
     </div>
 </div>
 
 <!-- Extend Token Modal -->
-<div class="modal" id="extendTokenModal">
-    <div class="modal-dialog">
-        <div class="modal-header">
-            <h5 class="modal-title">Extend Token Expiration</h5>
+<div class="custom-modal" id="extendTokenModal">
+    <div class="custom-modal-dialog">
+        <div class="custom-modal-header">
+            <h5 class="custom-modal-title">Extend Token Expiration</h5>
             <button type="button" class="close-btn" onclick="hideExtendModal()">×</button>
         </div>
         <form id="extendTokenForm">
-            <div class="modal-body">
+            <div class="custom-modal-body">
                 <p>Extend the expiration date for token: <strong id="extendTokenName"></strong></p>
                 <div class="mb-3">
                     <label for="extensionDays" class="form-label">Extend by (days)</label>
@@ -531,7 +531,7 @@
                     </select>
                 </div>
             </div>
-            <div class="modal-footer">
+            <div class="custom-modal-footer">
                 <button type="button" class="btn btn-secondary" onclick="hideExtendModal()">Cancel</button>
                 <button type="submit" class="btn btn-outline-info">
                     🕒 Extend Token
@@ -759,8 +759,8 @@ function showAlert(message, type) {
 // Event listeners for token action buttons
 document.addEventListener('click', function(e) {
     // Only close modal if clicking directly on the modal backdrop element itself
-    // e.target is the actual element clicked - if it's the modal, the click was on the backdrop
-    if (e.target.classList.contains('modal') && e.target.classList.contains('show')) {
+    // e.target is the actual element clicked - if it's the custom-modal, the click was on the backdrop
+    if (e.target.classList.contains('custom-modal') && e.target.classList.contains('show')) {
         e.target.classList.remove('show');
     }