Phase 6: Add comprehensive responsive design for ASCII frames

## Tablet Breakpoint (1024px)
- Simplify ASCII corners from heavy double (╔╗╚╝) to light single (┌┐└┘)
- Reduce corner font size from 1.5rem to 1.2rem
- Simplify section headers from ╠═══ to ├─
- Simplify dividers from ╞═══╡ to ├─┤
- Maintain visual hierarchy while reducing complexity

## Mobile Breakpoint (768px)
- Remove ALL ASCII corner decorations (::before, ::after, corner spans)
- Remove inner frame corner decorations
- Simplify section headers to simple "> " prefix
- Simplify subsection headers to "• " bullet point
- Remove all ASCII dividers completely
- Reduce padding: ascii-content to 0.5rem, ascii-frame-inner to 0.5rem
- Reduce border width to 1px on inner frames
- Font size reduction for section headers: 0.9rem
- Maintain functionality while maximizing screen space

## Very Small Mobile Breakpoint (480px)
- Remove ALL pseudo-element decorations globally
- Collapse nested frames to minimal borders (1px)
- Minimal padding everywhere (0.25rem)
- Section headers without decorations, normal text transform
- Simplified font sizes (0.85rem for headers)
- Re-enable only essential pseudo-elements (search prompt)
- Maximum compatibility for small screens

## Progressive Enhancement Strategy
- Desktop: Full elaborate ASCII decorations with heavy borders
- Tablet: Simplified single-line ASCII decorations
- Mobile: Minimal decorations, focus on content
- Very Small: No decorations, pure functionality

## Design Philosophy
- Maintain terminal aesthetic at all sizes
- Progressive simplification as screen shrinks
- Never sacrifice functionality for decoration
- Ensure readability on all devices
- Optimize for touch targets on mobile

## Files Modified
- assets/css/dashboard.css: Added ~140 lines of responsive rules
  * Enhanced existing 1024px breakpoint with ASCII frame rules
  * Enhanced existing 768px breakpoint with complete mobile simplification
  * Enhanced existing 480px breakpoint with minimal frame collapsing

## Testing Checklist
- [ ] Desktop (1920x1080): Full decorations visible
- [ ] Tablet (1024x768): Simplified single-line decorations
- [ ] Mobile (768x1024): No corners, simple headers
- [ ] Small Mobile (480x800): Minimal UI, maximum content
- [ ] Touch targets adequate on all mobile sizes
- [ ] All functionality preserved across breakpoints

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

assets/css/dashboard.css

@@ -1779,6 +1779,45 @@ body.dark-mode select option {
     .bulk-actions-buttons {
         flex-direction: column;
     }
+
+    /* Simplify ASCII corners - use single-line chars */
+    .ascii-frame-outer::before {
+        content: '┌';
+        font-size: 1.2rem;
+    }
+
+    .ascii-frame-outer::after {
+        content: '┐';
+        font-size: 1.2rem;
+    }
+
+    .bottom-left-corner {
+        content: '└';
+        font-size: 1.2rem;
+    }
+
+    .bottom-right-corner {
+        content: '┘';
+        font-size: 1.2rem;
+    }
+
+    /* Simplify section headers */
+    .ascii-section-header::before {
+        content: '├─ ';
+    }
+
+    .ascii-section-header::after {
+        content: ' ─┤';
+    }
+
+    /* Simplify dividers */
+    .ascii-divider::before {
+        content: '├';
+    }
+
+    .ascii-divider::after {
+        content: '┤';
+    }
 }
 
 /* Mobile */
@@ -1788,7 +1827,60 @@ body.dark-mode select option {
         font-size: 0.5rem !important;
     }
 
-    /* Hide decorative ASCII corners on small screens */
+    /* Remove all ASCII corners for mobile */
+    .ascii-frame-outer::before,
+    .ascii-frame-outer::after,
+    .bottom-left-corner,
+    .bottom-right-corner {
+        display: none !important;
+    }
+
+    /* Simplify inner frames - remove corners */
+    .ascii-frame-inner::before,
+    .ascii-frame-inner::after {
+        display: none !important;
+    }
+
+    /* Keep section headers but simplify */
+    .ascii-section-header::before {
+        content: '> ';
+    }
+
+    .ascii-section-header::after {
+        content: '';
+    }
+
+    .ascii-section-header {
+        font-size: 0.9rem;
+        padding: 0.5rem 1rem;
+    }
+
+    /* Simplify subsection headers */
+    .ascii-subsection-header::before {
+        content: '• ';
+    }
+
+    .ascii-subsection-header::after {
+        content: '';
+    }
+
+    /* Remove dividers on mobile */
+    .ascii-divider {
+        display: none;
+    }
+
+    /* Reduce padding in ascii-content */
+    .ascii-content {
+        padding: 0.5rem;
+    }
+
+    .ascii-frame-inner {
+        padding: 0.5rem;
+        margin: 0.5rem;
+        border-width: 1px;
+    }
+
+    /* Hide decorative ASCII corners on small screens (legacy) */
     table::before,
     table::after,
     .ticket-container::before,
@@ -1859,12 +1951,34 @@ body.dark-mode select option {
         font-size: 0.4rem !important;
     }
 
-    /* Remove all pseudo-element decorations */
+    /* Remove all pseudo-element decorations except essential ones */
     *::before,
     *::after {
         content: none !important;
     }
 
+    /* Collapse nested frames - minimal borders */
+    .ascii-frame-outer,
+    .ascii-frame-inner {
+        border-width: 1px;
+        padding: 0.25rem;
+        margin: 0.25rem;
+    }
+
+    /* Section headers without decorations */
+    .ascii-section-header,
+    .ascii-subsection-header {
+        font-size: 0.85rem;
+        padding: 0.4rem 0.5rem;
+        text-transform: none;
+        letter-spacing: normal;
+    }
+
+    /* Minimal content padding */
+    .ascii-content {
+        padding: 0.25rem;
+    }
+
     /* Re-enable essential pseudo-elements */
     .search-form::before {
         content: '$ ' !important;