feat: Comprehensive mobile UI improvements

Dashboard mobile changes:
- Sidebar becomes slide-out drawer with overlay
- Added mobile filter toggle button
- Table wrapped for horizontal scroll
- Stats grid: 2 columns on tablet, 1 on phone
- Larger touch targets (44px minimum)
- Full-width modals with better spacing
- Admin dropdown slides up from bottom
- Fixed bulk action bar at bottom

Ticket page mobile changes:
- Stack metadata vertically
- Full-width buttons and inputs
- Scrollable tabs
- Better comment form layout
- Improved timeline readability

General:
- Prevent iOS zoom with 16px input font
- Touch-friendly spacing throughout

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

assets/css/ticket.css

@@ -1612,3 +1612,208 @@ body.dark-mode .editable {
         margin-left: 0;
     }
 }
+
+/* ===== COMPREHENSIVE TICKET PAGE MOBILE STYLES ===== */
+@media (max-width: 768px) {
+    /* Prevent iOS zoom on input focus */
+    input, select, textarea {
+        font-size: 16px !important;
+    }
+
+    /* Better ticket header layout */
+    .ticket-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .ticket-header-left {
+        width: 100%;
+    }
+
+    .ticket-header-right {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .ticket-header-right .btn {
+        flex: 1;
+        min-width: 100px;
+        text-align: center;
+        min-height: 44px;
+    }
+
+    /* Stack ticket metadata vertically */
+    .ticket-meta-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .ticket-meta-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .ticket-meta-label {
+        font-weight: bold;
+        min-width: 100px;
+    }
+
+    .ticket-meta-value {
+        text-align: right;
+        flex: 1;
+    }
+
+    /* Better select dropdowns */
+    .ticket-meta-item select {
+        min-height: 44px;
+        padding: 0.5rem;
+        max-width: 60%;
+    }
+
+    /* Full width title on mobile */
+    .ticket-title {
+        font-size: 1.1rem;
+        word-break: break-word;
+    }
+
+    /* Better tabs on mobile */
+    .ticket-tabs {
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        gap: 0;
+    }
+
+    .tab-btn {
+        flex: 0 0 auto;
+        min-width: 100px;
+        padding: 0.75rem 1rem;
+        white-space: nowrap;
+        min-height: 48px;
+    }
+
+    /* Description and comment sections */
+    .ticket-description,
+    .comments-section {
+        padding: 1rem;
+    }
+
+    /* Better comment input */
+    .comment-form textarea {
+        min-height: 120px;
+        font-size: 16px;
+    }
+
+    .comment-form .btn {
+        width: 100%;
+        min-height: 48px;
+        margin-top: 0.5rem;
+    }
+
+    /* Markdown toolbar scroll */
+    .markdown-toolbar {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        flex-wrap: nowrap;
+    }
+
+    .markdown-toolbar button {
+        min-width: 44px;
+        min-height: 44px;
+        flex-shrink: 0;
+    }
+
+    /* Comment styling */
+    .comment {
+        padding: 1rem;
+    }
+
+    .comment-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+
+    /* Dependencies list */
+    .dependency-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .dependency-item .btn {
+        align-self: flex-end;
+    }
+
+    /* Attachments grid */
+    .attachments-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .attachment-item {
+        padding: 1rem;
+    }
+
+    /* Activity timeline */
+    .timeline-item {
+        padding: 0.75rem;
+    }
+
+    .timeline-content {
+        font-size: 0.9rem;
+    }
+
+    /* Status select */
+    #statusSelect {
+        width: 100%;
+        min-height: 48px;
+    }
+
+    /* Back link more prominent */
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        min-height: 44px;
+    }
+}
+
+/* Extra small screens for ticket page */
+@media (max-width: 480px) {
+    .ticket-id {
+        font-size: 0.9rem;
+    }
+
+    .ticket-title {
+        font-size: 1rem;
+    }
+
+    .tab-btn {
+        font-size: 0.85rem;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .ticket-meta-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+
+    .ticket-meta-value {
+        text-align: left;
+        width: 100%;
+    }
+
+    .ticket-meta-item select {
+        max-width: 100%;
+        width: 100%;
+    }
+}