Center modals vertically and position close buttons top right

templates/api_tokens.html

@@ -28,9 +28,10 @@
         .status-active { color: #065f46; font-weight: 500; }
         .status-inactive { color: #dc2626; font-weight: 500; }
         .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
-        .modal-content { background-color: white; margin: 15% auto; padding: 2rem; width: 90%; max-width: 500px; border-radius: 12px; }
-        .modal-header { margin-bottom: 1rem; }
+        .modal-content { background-color: white; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; width: 90%; max-width: 500px; border-radius: 12px; }
+        .modal-header { margin-bottom: 1rem; position: relative; }
         .modal-footer { text-align: right; margin-top: 1.5rem; }
+        .close { position: absolute; top: 0; right: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; }
     </style>
 {% endblock %}
 
@@ -92,7 +93,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3><i class="fas fa-plus"></i> Generate New API Token</h3>
-                <span onclick="closeAddTokenModal()" style="cursor: pointer; font-size: 1.5rem;">&times;</span>
+                <span class="close" onclick="closeAddTokenModal()">&times;</span>
             </div>
             <form method="post" action="/api_tokens/generate">
                 <div class="modal-body">
@@ -115,7 +116,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3>API Token Generated Successfully!</h3>
-                <span onclick="closeTokenModal()" style="cursor: pointer; font-size: 1.5rem;">&times;</span>
+                <span class="close" onclick="closeTokenModal()">&times;</span>
             </div>
             <div class="modal-body">
                 <p><strong>Token Name:</strong> {{ token_name }}</p>