Accessibility pass: ARIA roles, label associations, CSS class migrations

- Add role=dialog/aria-modal/aria-labelledby to all 12 modal overlays (JS + PHP)
- Add aria-label="Close" to all 14 modal close buttons
- Add full ARIA combobox pattern to @mention autocomplete (listbox, option, aria-selected, aria-expanded)
- Add for= attributes to admin filter form labels (AuditLog, UserActivity, ApiKeys)
- Remove dead closeOnAdvancedSearchBackdropClick() from advanced-search.js

CSS/JS style cleanup:
- Move .ascii-banner static styles from JS inline to CSS class; add .ascii-banner--glow
- Add .ascii-banner-cursor, .loading-overlay--hiding, .has-overlay, tr[data-clickable]
- Add .animate-fadein/.animate-fadeout/.comment--deleting to ticket.css
- Add .lt-toast--hiding to base.css; remove opacity/transition inline JS
- Remove redundant cursor:pointer JS (already in th{} CSS rule)
- Remove trailing space in lt-select class attributes

Bug fixes:
- base.js: boot overlay opacity inline style was overriding .fade-out class opacity via
  specificity (1000 vs 20), preventing the fade-out animation — removed
- ascii-banner.js: cursor used blink-caret (border-color only) instead of blink-cursor
  (opacity-based), so the █ cursor never actually blinked — fixed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

views/admin/TemplatesView.php

@@ -13,9 +13,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     <title>Template Management - Admin</title>
     <link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
     <link rel="stylesheet" href="/assets/css/base.css">
-    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css">
-    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260320">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260320">
     <script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
+    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/utils.js?v=20260320"></script>
     <script nonce="<?php echo $nonce; ?>">
         window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
     </script>
@@ -24,7 +25,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     <div class="user-header">
         <div class="user-header-left">
             <a href="/" class="back-link">[ ← DASHBOARD ]</a>
-            <span style="margin-left: 1rem; color: var(--terminal-amber);">Admin: Templates</span>
+            <span class="admin-page-title">Admin: Templates</span>
         </div>
         <div class="user-header-right">
             <?php if (isset($GLOBALS['currentUser'])): ?>
@@ -34,23 +35,24 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         </div>
     </div>
 
-    <div class="ascii-frame-outer" style="max-width: 1200px; margin: 2rem auto;">
+    <div class="ascii-frame-outer admin-container">
         <span class="bottom-left-corner">╚</span>
         <span class="bottom-right-corner">╝</span>
 
         <div class="ascii-section-header">Ticket Template Management</div>
         <div class="ascii-content">
             <div class="ascii-frame-inner">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                    <h2 style="margin: 0;">Ticket Templates</h2>
+                <div class="admin-header-row">
+                    <h2>Ticket Templates</h2>
                     <button data-action="show-create-modal" class="btn">+ NEW TEMPLATE</button>
                 </div>
 
-                <p style="color: var(--terminal-green-dim); margin-bottom: 1rem;">
+                <p class="text-muted-green mb-1">
                     Templates pre-fill ticket creation forms with standard content for common ticket types.
                 </p>
 
-                <table style="width: 100%;">
+                <div class="table-wrapper">
+                <table>
                     <thead>
                         <tr>
                             <th>Template Name</th>
@@ -64,9 +66,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     <tbody>
                         <?php if (empty($templates)): ?>
                             <tr>
-                                <td colspan="6" style="text-align: center; padding: 2rem; color: var(--terminal-green-dim);">
-                                    No templates defined. Create templates to speed up ticket creation.
-                                </td>
+                                <td colspan="6" class="empty-state">No templates defined. Create templates to speed up ticket creation.</td>
                             </tr>
                         <?php else: ?>
                             <?php foreach ($templates as $tpl): ?>
@@ -76,7 +76,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                     <td><?php echo htmlspecialchars($tpl['type'] ?? 'Any'); ?></td>
                                     <td>P<?php echo $tpl['default_priority'] ?? '4'; ?></td>
                                     <td>
-                                        <span style="color: <?php echo ($tpl['is_active'] ?? 1) ? 'var(--status-open)' : 'var(--status-closed)'; ?>;">
+                                        <span class="<?php echo ($tpl['is_active'] ?? 1) ? 'text-open' : 'text-closed'; ?>">
                                             <?php echo ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive'; ?>
                                         </span>
                                     </td>
@@ -89,33 +89,34 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         <?php endif; ?>
                     </tbody>
                 </table>
+                </div>
             </div>
         </div>
     </div>
 
     <!-- Create/Edit Modal -->
-    <div class="lt-modal-overlay" id="templateModal" aria-hidden="true">
-        <div class="lt-modal" style="max-width: 800px; width: 90%;">
+    <div class="lt-modal-overlay" id="templateModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+        <div class="lt-modal lt-modal-lg">
             <div class="lt-modal-header">
                 <span class="lt-modal-title" id="modalTitle">Create Template</span>
-                <button class="lt-modal-close" data-modal-close>✕</button>
+                <button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
             </div>
             <form id="templateForm">
                 <input type="hidden" id="template_id" name="template_id">
                 <div class="lt-modal-body">
                     <div class="setting-row">
                         <label for="template_name">Template Name *</label>
-                        <input type="text" id="template_name" name="template_name" required style="width: 100%;">
+                        <input type="text" id="template_name" name="template_name" required>
                     </div>
                     <div class="setting-row">
                         <label for="title_template">Title Template</label>
-                        <input type="text" id="title_template" name="title_template" style="width: 100%;" placeholder="Pre-filled title text">
+                        <input type="text" id="title_template" name="title_template" placeholder="Pre-filled title text">
                     </div>
                     <div class="setting-row">
                         <label for="description_template">Description Template</label>
-                        <textarea id="description_template" name="description_template" rows="10" style="width: 100%; min-height: 200px;" placeholder="Pre-filled description content"></textarea>
+                        <textarea id="description_template" name="description_template" rows="10" placeholder="Pre-filled description content"></textarea>
                     </div>
-                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
+                    <div class="setting-grid-3">
                         <div class="setting-row setting-row-compact">
                             <label for="category">Category</label>
                             <select id="category" name="category">
@@ -162,7 +163,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         </div>
     </div>
 
-    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
     <script nonce="<?php echo $nonce; ?>">
         const templates = <?php echo json_encode($templates ?? []); ?>;
 
@@ -217,25 +217,15 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 is_active: document.getElementById('is_active').checked ? 1 : 0
             };
 
-            const method = data.template_id ? 'PUT' : 'POST';
             const url = '/api/manage_templates.php' + (data.template_id ? '?id=' + data.template_id : '');
-
-            fetch(url, {
-                method: method,
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-Token': window.CSRF_TOKEN
-                },
-                body: JSON.stringify(data)
-            })
-            .then(r => r.json())
-            .then(result => {
+            const apiCall = data.template_id ? lt.api.put(url, data) : lt.api.post(url, data);
+            apiCall.then(result => {
                 if (result.success) {
                     window.location.reload();
                 } else {
                     lt.toast.error(result.error || 'Failed to save');
                 }
-            });
+            }).catch(err => lt.toast.error('Failed to save'));
         }
 
         function editTemplate(id) {
@@ -255,14 +245,12 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         }
 
         function deleteTemplate(id) {
-            if (!confirm('Delete this template?')) return;
-            fetch('/api/manage_templates.php?id=' + id, {
-                method: 'DELETE',
-                headers: { 'X-CSRF-Token': window.CSRF_TOKEN }
-            })
-            .then(r => r.json())
-            .then(data => {
-                if (data.success) window.location.reload();
+            showConfirmModal('Delete Template', 'Delete this template?', 'error', function() {
+                lt.api.delete('/api/manage_templates.php?id=' + id)
+                .then(data => {
+                    if (data.success) window.location.reload();
+                    else lt.toast.error(data.error || 'Failed to delete');
+                }).catch(err => lt.toast.error('Failed to delete'));
             });
         }
     </script>