subtle aesthetic updates

assets/css/dashboard.css

@@ -34,16 +34,18 @@
     /* Terminal Font Stack */
     --font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
 
-    /* Glow Effects */
+    /* Glow Effects - Enhanced for stronger phosphor effect */
-    --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41;
+    --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
-    --glow-red: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d;
+    --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41, 0 0 32px rgba(0, 255, 65, 0.5);
-    --glow-blue: 0 0 5px #42a5f5, 0 0 10px #42a5f5;
+    --glow-red: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d;
-    --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000;
+    --glow-blue: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5;
-    --glow-priority-1: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d;
+    --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
-    --glow-priority-2: 0 0 5px #ffa726, 0 0 10px #ffa726;
+    --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000;
-    --glow-priority-3: 0 0 5px #42a5f5, 0 0 10px #42a5f5;
+    --glow-priority-1: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #ff4d4d;
-    --glow-priority-4: 0 0 5px #66bb6a, 0 0 10px #66bb6a;
+    --glow-priority-2: 0 0 5px #ffa726, 0 0 10px #ffa726, 0 0 15px #ffa726;
-    --glow-priority-5: 0 0 5px #9e9e9e, 0 0 10px #9e9e9e;
+    --glow-priority-3: 0 0 5px #42a5f5, 0 0 10px #42a5f5, 0 0 15px #42a5f5;
+    --glow-priority-4: 0 0 5px #66bb6a, 0 0 10px #66bb6a, 0 0 15px #66bb6a;
+    --glow-priority-5: 0 0 5px #9e9e9e, 0 0 10px #9e9e9e, 0 0 15px #9e9e9e;
 
     /* Spacing */
     --spacing-xs: 0.5rem;
@@ -75,6 +77,86 @@ body {
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: var(--transition-default);
+    position: relative;
+}
+
+/* CRT Scanline Effect - Subtle retro terminal look */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.15),
+        rgba(0, 0, 0, 0.15) 1px,
+        transparent 1px,
+        transparent 2px
+    );
+    pointer-events: none;
+    z-index: 9999;
+    animation: scanline 8s linear infinite;
+}
+
+@keyframes scanline {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(4px);
+    }
+}
+
+/* Screen Flicker Effect */
+@keyframes flicker {
+    0% { opacity: 1; }
+    10% { opacity: 0.95; }
+    20% { opacity: 1; }
+    30% { opacity: 0.97; }
+    40% { opacity: 1; }
+}
+
+@keyframes glitch {
+    0% { transform: translate(0); }
+    20% { transform: translate(-2px, 2px); }
+    40% { transform: translate(-2px, -2px); }
+    60% { transform: translate(2px, 2px); }
+    80% { transform: translate(2px, -2px); }
+    100% { transform: translate(0); }
+}
+
+.ascii-frame-outer:hover {
+    animation: flicker 0.15s ease-in-out 1;
+}
+
+/* Random screen glitch every 30 seconds */
+body {
+    animation: flicker 0.2s ease-in-out 30s infinite;
+}
+
+/* Subtle data stream effect in corner */
+body::after {
+    content: '10101010';
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    font-family: var(--font-mono);
+    font-size: 0.6rem;
+    color: var(--terminal-green);
+    opacity: 0.1;
+    pointer-events: none;
+    letter-spacing: 2px;
+    animation: data-stream 3s linear infinite;
+}
+
+@keyframes data-stream {
+    0% { content: '10101010'; opacity: 0.1; }
+    25% { content: '01010101'; opacity: 0.15; }
+    50% { content: '11001100'; opacity: 0.1; }
+    75% { content: '00110011'; opacity: 0.15; }
+    100% { content: '10101010'; opacity: 0.1; }
 }
 
 body.menu-open {
@@ -95,8 +177,25 @@ h1 {
     justify-content: space-between;
     align-items: center;
     border-bottom: 2px solid var(--terminal-green);
+    box-shadow: 0 2px 20px rgba(0, 255, 65, 0.2);
     box-sizing: border-box;
     font-family: var(--font-mono);
+    position: relative;
+}
+
+.user-header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--terminal-green) 20%,
+        var(--terminal-green) 80%,
+        transparent 100%);
+    box-shadow: var(--glow-green);
 }
 
 .user-header-left,
@@ -112,8 +211,15 @@ h1 {
     font-weight: bold;
     font-size: 1rem;
     color: var(--terminal-amber);
-    text-shadow: var(--glow-amber);
+    text-shadow: var(--glow-amber-intense);
     white-space: nowrap;
+    animation: subtle-pulse 3s ease-in-out infinite;
+}
+
+.app-title::before {
+    content: '>> ';
+    color: var(--terminal-green);
+    text-shadow: var(--glow-green);
 }
 
 .back-link {
@@ -251,15 +357,22 @@ h1 {
     z-index: 10;
 }
 
-/* Bottom corners as separate elements */
+/* Bottom corners as separate elements with enhanced glow */
 .bottom-left-corner,
 .bottom-right-corner {
     position: absolute;
     bottom: -3px;
     font-size: 1.5rem;
     color: var(--terminal-green);
+    text-shadow: var(--glow-green);
     line-height: 1;
     z-index: 10;
+    animation: corner-pulse 4s ease-in-out infinite;
+}
+
+@keyframes corner-pulse {
+    0%, 100% { text-shadow: var(--glow-green); }
+    50% { text-shadow: var(--glow-green-intense); }
 }
 
 .bottom-left-corner {
@@ -308,9 +421,15 @@ h1 {
     font-family: var(--font-mono);
     font-weight: bold;
     color: var(--terminal-amber);
-    text-shadow: var(--glow-amber);
+    text-shadow: var(--glow-amber-intense);
     text-transform: uppercase;
     letter-spacing: 0.1em;
+    animation: subtle-pulse 3s ease-in-out infinite;
+}
+
+@keyframes subtle-pulse {
+    0%, 100% { text-shadow: var(--glow-amber); }
+    50% { text-shadow: var(--glow-amber-intense); }
 }
 
 .ascii-section-header::before {
@@ -363,21 +482,25 @@ h1 {
 }
 
 .ascii-divider::before {
-    content: '╞';
+    content: '╞═══';
     position: absolute;
     left: -2px;
     top: -11px;
     color: var(--terminal-green);
     font-size: 1.2rem;
+    text-shadow: var(--glow-green);
+    letter-spacing: -2px;
 }
 
 .ascii-divider::after {
-    content: '╡';
+    content: '═══╡';
     position: absolute;
     right: -2px;
     top: -11px;
     color: var(--terminal-green);
     font-size: 1.2rem;
+    text-shadow: var(--glow-green);
+    letter-spacing: -2px;
 }
 
 /* Content wrapper inside frames */
@@ -714,18 +837,37 @@ button::after {
 .btn:hover,
 .btn-base:hover,
 button:hover {
-    background: rgba(0, 255, 65, 0.1);
+    background: rgba(0, 255, 65, 0.15);
     color: var(--terminal-amber);
     border-color: var(--terminal-amber);
-    text-shadow: var(--glow-amber);
+    text-shadow: var(--glow-amber-intense);
+    box-shadow: var(--glow-amber-intense);
     transform: translateY(-2px);
+    animation: pulse-glow 1.5s ease-in-out infinite;
 }
 
 .btn:active,
 .btn-base:active,
 button:active {
     transform: translateY(0);
-    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
+    box-shadow: var(--glow-green-intense);
+}
+
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
+    50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 32px currentColor; }
+}
+
+/* Terminal prompt for primary action buttons */
+.btn.create-ticket::before,
+.btn.primary::before {
+    content: '> ';
+    margin-right: 4px;
+}
+
+.btn.create-ticket::after,
+.btn.primary::after {
+    content: '';
 }
 
 .btn-primary,
@@ -775,7 +917,7 @@ table {
     position: relative;
 }
 
-/* ASCII corner decorations */
+/* ASCII corner decorations with glow */
 table::before {
     content: '┌';
     position: absolute;
@@ -783,6 +925,7 @@ table::before {
     left: -2px;
     font-size: 1.2rem;
     color: var(--terminal-green);
+    text-shadow: var(--glow-green);
     line-height: 1;
     z-index: 10;
 }
@@ -794,6 +937,7 @@ table::after {
     right: -2px;
     font-size: 1.2rem;
     color: var(--terminal-green);
+    text-shadow: var(--glow-green);
     line-height: 1;
     z-index: 10;
 }
@@ -816,6 +960,12 @@ th {
     cursor: pointer;
     color: var(--terminal-amber);
     text-shadow: var(--glow-amber);
+    transition: all 0.3s ease;
+}
+
+th:hover {
+    text-shadow: var(--glow-amber-intense);
+    background-color: rgba(255, 176, 0, 0.05);
 }
 
 /* Add terminal prompt to headers */
@@ -826,7 +976,8 @@ th::before {
 }
 
 tr:hover {
-    background-color: rgba(0, 255, 65, 0.05);
+    background-color: rgba(0, 255, 65, 0.08);
+    box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
 }
 
 tbody tr td:first-child {
@@ -870,24 +1021,55 @@ td:nth-child(2) span::after {
 .priority-1 td:nth-child(2) {
     color: var(--priority-1);
     text-shadow: var(--glow-priority-1);
+    font-weight: bold;
 }
+
+.priority-1 td:nth-child(2)::after {
+    content: ' ▲▲';
+    font-size: 0.7em;
+}
+
 .priority-2 td:nth-child(2) {
     color: var(--priority-2);
     text-shadow: var(--glow-priority-2);
+    font-weight: bold;
 }
+
+.priority-2 td:nth-child(2)::after {
+    content: ' ▲';
+    font-size: 0.7em;
+}
+
 .priority-3 td:nth-child(2) {
     color: var(--priority-3);
     text-shadow: var(--glow-priority-3);
 }
+
+.priority-3 td:nth-child(2)::after {
+    content: ' ●';
+    font-size: 0.7em;
+}
+
 .priority-4 td:nth-child(2) {
     color: var(--priority-4);
     text-shadow: var(--glow-priority-4);
 }
+
+.priority-4 td:nth-child(2)::after {
+    content: ' ▼';
+    font-size: 0.7em;
+}
+
 .priority-5 td:nth-child(2) {
     color: var(--priority-5);
     text-shadow: var(--glow-priority-5);
 }
 
+.priority-5 td:nth-child(2)::after {
+    content: ' ▼▼';
+    font-size: 0.7em;
+}
+
 /* ===== STATUS STYLES - TERMINAL EDITION ===== */
 .status-Open {
     background-color: transparent !important;
@@ -902,7 +1084,7 @@ td:nth-child(2) span::after {
 }
 
 .status-Open::before {
-    content: '[';
+    content: '[●';
     margin-right: 4px;
 }
 
@@ -927,8 +1109,17 @@ td:nth-child(2) span::after {
 }
 
 .status-In-Progress::before {
-    content: '[';
+    content: '[◐';
     margin-right: 4px;
+    animation: spin-status 2s linear infinite;
+}
+
+@keyframes spin-status {
+    0% { content: '[◐'; }
+    25% { content: '[◓'; }
+    50% { content: '[◑'; }
+    75% { content: '[◒'; }
+    100% { content: '[◐'; }
 }
 
 .status-In-Progress::after {
@@ -949,7 +1140,7 @@ td:nth-child(2) span::after {
 }
 
 .status-Closed::before {
-    content: '[';
+    content: '[✓';
     margin-right: 4px;
 }
 
@@ -971,7 +1162,7 @@ td:nth-child(2) span::after {
 }
 
 .status-Resolved::before {
-    content: '[';
+    content: '[✓';
     margin-right: 4px;
 }
 
@@ -993,6 +1184,18 @@ select {
     border-radius: 0;
     padding: 8px 12px;
     transition: all 0.3s ease;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.search-box:focus,
+input[type="text"]:focus,
+input[type="search"]:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--terminal-amber);
+    box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5);
+    background: rgba(0, 255, 65, 0.05);
 }
 
 .search-box {
@@ -1367,17 +1570,45 @@ input[type="checkbox"]:checked {
     padding: 1rem;
     border: 2px solid var(--terminal-green);
     box-shadow: var(--glow-green);
+    position: relative;
+    overflow: hidden;
+}
+
+.dashboard-sidebar .ascii-frame-inner::before {
+    content: '│';
+    position: absolute;
+    left: 5px;
+    top: 0;
+    height: 100%;
+    color: var(--terminal-green);
+    opacity: 0.3;
+    font-size: 1.5rem;
+    line-height: 1.2;
+    pointer-events: none;
 }
 
 .dashboard-sidebar .ascii-subsection-header {
     color: var(--terminal-amber);
-    text-shadow: var(--glow-amber);
+    text-shadow: var(--glow-amber-intense);
     font-family: var(--font-mono);
     font-size: 1.1rem;
     text-transform: uppercase;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 2px solid var(--terminal-green);
+    position: relative;
+}
+
+.dashboard-sidebar .ascii-subsection-header::before {
+    content: '╔═══ ';
+    color: var(--terminal-green);
+    text-shadow: var(--glow-green);
+}
+
+.dashboard-sidebar .ascii-subsection-header::after {
+    content: ' ═══╗';
+    color: var(--terminal-green);
+    text-shadow: var(--glow-green);
 }
 
 .filter-group {
@@ -1413,6 +1644,18 @@ input[type="checkbox"]:checked {
     margin-right: 0.5rem;
     cursor: pointer;
     accent-color: var(--terminal-green);
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--terminal-green);
+    transition: all 0.2s ease;
+}
+
+.filter-group input[type="checkbox"]:checked {
+    box-shadow: var(--glow-green);
+}
+
+.filter-group input[type="checkbox"]:hover {
+    filter: brightness(1.3);
 }
 
 .dashboard-sidebar .btn {
@@ -1465,6 +1708,78 @@ input[type="checkbox"]:checked {
     }
 }
 
+/* ===== BOOT SEQUENCE ===== */
+.boot-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-primary);
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.5s;
+}
+
+#boot-text {
+    font-family: var(--font-mono);
+    color: var(--terminal-green);
+    text-shadow: var(--glow-green);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    white-space: pre;
+    padding: 2rem;
+}
+
+/* ===== ASCII LOADING SPINNER ===== */
+.loading-spinner {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10000;
+    background: var(--bg-primary);
+    border: 3px solid var(--terminal-green);
+    padding: 2rem;
+    box-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
+    font-family: var(--font-mono);
+    color: var(--terminal-green);
+    font-size: 1.5rem;
+    text-shadow: var(--glow-green);
+    display: none;
+}
+
+.loading-spinner.active {
+    display: block;
+}
+
+.spinner-text {
+    text-align: center;
+}
+
+.spinner-frames {
+    animation: spin-frames 0.8s steps(8) infinite;
+}
+
+@keyframes spin-frames {
+    0% { content: '|'; }
+    12.5% { content: '/'; }
+    25% { content: '—'; }
+    37.5% { content: '\\'; }
+    50% { content: '|'; }
+    62.5% { content: '/'; }
+    75% { content: '—'; }
+    87.5% { content: '\\'; }
+}
+
+.spinner-frames::before {
+    content: '|';
+    display: inline-block;
+    animation: spin-frames 0.8s steps(8) infinite;
+}
+
 /* ===== UTILITY STYLES ===== */
 .ticket-link {
     font-family: 'Courier New', monospace;
@@ -1475,10 +1790,22 @@ input[type="checkbox"]:checked {
     padding: 4px 8px;
     border-radius: 0;
     display: inline-block;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+    text-shadow: var(--glow-green);
+}
+
+.ticket-link::before {
+    content: '#';
+    color: var(--terminal-amber);
+    margin-right: 2px;
 }
 
 .ticket-link:hover {
-    background: var(--border-color);
+    background: rgba(0, 255, 65, 0.2);
+    border-color: var(--terminal-green);
+    text-shadow: var(--glow-green-intense);
+    transform: translateX(2px);
 }
 
 /* ===== PAGINATION STYLES ===== */
@@ -1490,22 +1817,28 @@ input[type="checkbox"]:checked {
 
 .pagination button {
     padding: 0.5rem 0.75rem;
-    border: 1px solid var(--border-color);
+    border: 2px solid var(--terminal-green);
     background: var(--bg-secondary);
-    color: var(--text-primary);
+    color: var(--terminal-green);
-    border-radius: 0.375rem;
+    border-radius: 0;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
+    font-family: var(--font-mono);
+    text-shadow: var(--glow-green);
 }
 
 .pagination button:hover {
-    background: var(--hover-bg);
+    background: rgba(0, 255, 65, 0.15);
+    box-shadow: var(--glow-green);
+    transform: translateY(-1px);
 }
 
 .pagination button.active {
-    background: #3b82f6;
+    background: var(--terminal-green);
-    color: white;
+    color: var(--bg-primary);
-    border-color: #3b82f6;
+    border-color: var(--terminal-green);
+    box-shadow: var(--glow-green-intense);
+    font-weight: bold;
 }
 
 /* ===== SORTING STYLES ===== */

assets/css/ticket.css

@@ -273,6 +273,35 @@
     box-shadow: 0 0 10px var(--terminal-amber);
 }
 
+.metadata-select:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    border-color: var(--border-color);
+}
+
+.metadata-select:disabled:hover {
+    border-color: var(--border-color);
+    box-shadow: none;
+}
+
+/* Blinking cursor effect for active inputs */
+.title-input:not(:disabled)::after,
+textarea[data-field="description"]:not(:disabled)::after {
+    content: '█';
+    color: var(--terminal-green);
+    animation: blink-cursor 1s step-end infinite;
+    margin-left: 2px;
+}
+
+@keyframes blink-cursor {
+    0%, 50% {
+        opacity: 1;
+    }
+    51%, 100% {
+        opacity: 0;
+    }
+}
+
 /* Mobile: Stack metadata fields */
 @media (max-width: 768px) {
     .ticket-metadata-fields {

assets/js/ticket.js

@@ -64,6 +64,7 @@ function saveTicket() {
 function toggleEditMode() {
     const editButton = document.getElementById('editButton');
     const editables = document.querySelectorAll('.title-input, textarea[data-field="description"]');
+    const metadataFields = document.querySelectorAll('.editable-metadata');
     const isEditing = editButton.classList.contains('active');
 
     if (!isEditing) {
@@ -75,6 +76,10 @@ function toggleEditMode() {
                 field.focus();
             }
         });
+        // Enable metadata fields (priority, category, type)
+        metadataFields.forEach(field => {
+            field.disabled = false;
+        });
     } else {
         saveTicket();
         editButton.textContent = 'Edit Ticket';
@@ -82,6 +87,10 @@ function toggleEditMode() {
         editables.forEach(field => {
             field.disabled = true;
         });
+        // Disable metadata fields
+        metadataFields.forEach(field => {
+            field.disabled = true;
+        });
     }
 }
 

views/DashboardView.php

@@ -14,6 +14,54 @@
     <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
 </head>
 <body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
+
+    <!-- Terminal Boot Sequence -->
+    <div id="boot-sequence" class="boot-overlay">
+        <pre id="boot-text"></pre>
+    </div>
+    <script>
+        function showBootSequence() {
+            const bootText = document.getElementById('boot-text');
+            const bootOverlay = document.getElementById('boot-sequence');
+            const messages = [
+                '╔═══════════════════════════════════════╗',
+                '║   TINKER TICKETS TERMINAL v1.0       ║',
+                '║   BOOTING SYSTEM...                  ║',
+                '╚═══════════════════════════════════════╝',
+                '',
+                '[ OK ] Loading kernel modules...',
+                '[ OK ] Initializing ticket database...',
+                '[ OK ] Mounting user session...',
+                '[ OK ] Starting dashboard services...',
+                '[ OK ] Rendering ASCII frames...',
+                '',
+                '> SYSTEM READY ✓',
+                ''
+            ];
+
+            let i = 0;
+            const interval = setInterval(() => {
+                if (i < messages.length) {
+                    bootText.textContent += messages[i] + '\n';
+                    i++;
+                } else {
+                    setTimeout(() => {
+                        bootOverlay.style.opacity = '0';
+                        setTimeout(() => bootOverlay.remove(), 500);
+                    }, 500);
+                    clearInterval(interval);
+                }
+            }, 80);
+        }
+
+        // Run on first visit only (per session)
+        if (!sessionStorage.getItem('booted')) {
+            showBootSequence();
+            sessionStorage.setItem('booted', 'true');
+        } else {
+            document.getElementById('boot-sequence').remove();
+        }
+    </script>
     <div class="user-header">
         <div class="user-header-left">
             <span class="app-title">🎫 Tinker Tickets</span>

views/TicketView.php

@@ -123,7 +123,7 @@ function formatDetails($details, $actionType) {
                             <div class="ticket-metadata-fields" style="margin-top: 0.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
                                 <div class="metadata-field">
                                     <label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Priority:</label>
-                                    <select id="prioritySelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
+                                    <select id="prioritySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
                                         <option value="1" <?php echo $ticket['priority'] == 1 ? 'selected' : ''; ?>>P1 - Critical</option>
                                         <option value="2" <?php echo $ticket['priority'] == 2 ? 'selected' : ''; ?>>P2 - High</option>
                                         <option value="3" <?php echo $ticket['priority'] == 3 ? 'selected' : ''; ?>>P3 - Medium</option>
@@ -134,7 +134,7 @@ function formatDetails($details, $actionType) {
 
                                 <div class="metadata-field">
                                     <label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Category:</label>
-                                    <select id="categorySelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
+                                    <select id="categorySelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
                                         <option value="Hardware" <?php echo $ticket['category'] == 'Hardware' ? 'selected' : ''; ?>>Hardware</option>
                                         <option value="Software" <?php echo $ticket['category'] == 'Software' ? 'selected' : ''; ?>>Software</option>
                                         <option value="Network" <?php echo $ticket['category'] == 'Network' ? 'selected' : ''; ?>>Network</option>
@@ -145,7 +145,7 @@ function formatDetails($details, $actionType) {
 
                                 <div class="metadata-field">
                                     <label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-amber); font-family: var(--font-mono); font-size: 0.85rem;">Type:</label>
-                                    <select id="typeSelect" class="metadata-select" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
+                                    <select id="typeSelect" class="metadata-select editable-metadata" disabled style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
                                         <option value="Maintenance" <?php echo $ticket['type'] == 'Maintenance' ? 'selected' : ''; ?>>Maintenance</option>
                                         <option value="Install" <?php echo $ticket['type'] == 'Install' ? 'selected' : ''; ?>>Install</option>
                                         <option value="Task" <?php echo $ticket['type'] == 'Task' ? 'selected' : ''; ?>>Task</option>