Enhance CSS/HTML with semantic elements, utility classes, and breakpoints

- Move inline styles to CSS classes in ticket.css and dashboard.css
- Add intermediate responsive breakpoints (600px, 900px, 1200px)
- Convert HTML to semantic elements (header, section, article)
- Add ARIA attributes for modals and navigation
- Add utility classes for text styling and spacing
- Update cache-busting version numbers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/ticket.css

@@ -1635,6 +1635,10 @@ body.dark-mode .editable {
     margin-top: 0.5rem;
 }
 
+.upload-browse-btn {
+    margin-top: 1rem;
+}
+
 /* Progress Bar */
 .progress-bar {
     width: 100%;
@@ -1798,7 +1802,7 @@ body.dark-mode .editable {
     border-radius: 0;
     max-height: 200px;
     overflow-y: auto;
-    z-index: 1000;
+    z-index: var(--z-popover);
     display: none;
     min-width: 200px;
     box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
@@ -1893,7 +1897,7 @@ body.dark-mode .editable {
     background: var(--bg-primary);
     border: 2px solid var(--terminal-green);
     min-width: 150px;
-    z-index: 100;
+    z-index: var(--z-dropdown);
     box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
 }
 
@@ -2028,6 +2032,196 @@ body.dark-mode .editable {
     }
 }
 
+/* ===== INLINE STYLE REPLACEMENTS ===== */
+/* These classes replace inline styles from TicketView.php */
+
+.ticket-user-info {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+.ticket-assignment {
+    margin-top: 0.5rem;
+}
+
+.ticket-assignment-label {
+    font-weight: 500;
+    margin-right: 0.5rem;
+}
+
+.assignment-select {
+    padding: 0.25rem 0.5rem;
+    border-radius: 0;
+    border: 2px solid var(--terminal-green);
+}
+
+/* Visibility settings section */
+.ticket-visibility-settings {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--terminal-green);
+}
+
+.visibility-settings-grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 0.75rem;
+}
+
+.visibility-groups-edit {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.visibility-group-label {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    cursor: pointer;
+}
+
+/* Metadata labels */
+.metadata-label {
+    font-weight: 500;
+    display: block;
+    margin-bottom: 0.25rem;
+    color: var(--terminal-amber);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+}
+
+.metadata-label-cyan {
+    color: var(--terminal-cyan);
+}
+
+/* Generic full-width select styling */
+.full-width-select {
+    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);
+}
+
+/* Add dependency form */
+.add-dependency-form {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.dependency-input {
+    flex: 1;
+    min-width: 150px;
+    padding: 0.5rem;
+    border: 2px solid var(--terminal-green);
+    background: var(--bg-primary);
+    color: var(--terminal-green);
+    font-family: var(--font-mono);
+}
+
+.dependency-type-select {
+    padding: 0.5rem;
+    border: 2px solid var(--terminal-green);
+    background: var(--bg-primary);
+    color: var(--terminal-green);
+    font-family: var(--font-mono);
+}
+
+/* Upload progress */
+.upload-progress {
+    margin-top: 1rem;
+}
+
+.upload-status-text {
+    margin-top: 0.5rem;
+    color: var(--terminal-green);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+}
+
+/* Frame inner spacing */
+.frame-inner-spacing {
+    margin-bottom: 1rem;
+}
+
+.frame-inner-spacing-top {
+    margin-top: 1rem;
+}
+
+/* No groups message */
+.no-groups-message {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */
+
+/* Large desktop (1200px+) */
+@media (min-width: 1200px) {
+    .ticket-container {
+        max-width: 1600px;
+    }
+
+    .ticket-metadata-fields {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .visibility-settings-grid {
+        grid-template-columns: 1fr 3fr;
+    }
+}
+
+/* Medium desktop (900px - 1199px) */
+@media (min-width: 900px) and (max-width: 1199px) {
+    .ticket-container {
+        width: 95%;
+        max-width: 1200px;
+    }
+
+    .ticket-metadata-fields {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* Tablet landscape (600px - 899px) */
+@media (min-width: 600px) and (max-width: 899px) {
+    .ticket-container {
+        width: 98%;
+        min-width: unset;
+    }
+
+    .ticket-metadata-fields {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .visibility-settings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .header-controls {
+        flex-wrap: wrap;
+    }
+
+    .tab-btn {
+        padding: 10px 18px;
+        font-size: 0.95em;
+    }
+
+    .timeline-event {
+        margin-bottom: 1.25rem;
+    }
+
+    .comment {
+        padding: 12px;
+    }
+}
+
 /* ===== COMPREHENSIVE TICKET PAGE MOBILE STYLES ===== */
 @media (max-width: 768px) {
     /* Prevent iOS zoom on input focus */
@@ -2044,7 +2238,7 @@ body.dark-mode .editable {
     .user-header {
         position: sticky;
         top: 0;
-        z-index: 100;
+        z-index: var(--z-dropdown);
         padding: 0.5rem 0.75rem;
     }