Style Overlays: Modals, Pop-ups, Dialogs

[jessefreeman]

Scope:
Style overlay elements that appear above the main interface, maintaining PV8's visual consistency.

Components to Style:

• Modals/Pop-ups: Info modals, help dialogs, settings panels
• Dialog Borders: Consistent border styling and title bars
• Close Mechanisms: Close buttons and dismiss behaviors
• Backdrop Handling: Overlay backgrounds and focus management

Styling Requirements:

• Consistent border and title styling across all overlay types
• Proper layering with backdrop and z-index management
• Smooth entrance and exit animations
• Responsive sizing for different screen sizes
• Clear visual hierarchy within overlay content

Interaction Behaviors:

• Proper focus management and keyboard trapping
• ESC key to close functionality
• Click-outside-to-dismiss where appropriate
• Smooth animation timing

Acceptance Criteria:

• All overlay types display consistently with PV8 styling
• Focus management works correctly for accessibility
• Overlays display properly on various screen sizes
• Animation performance is smooth and responsive
• Test page demonstrates all overlay variations

Deliverables:

• CSS for overlay styling and animations
• JavaScript for overlay behavior and focus management
• Test page with overlay examples and interactions
• Documentation for proper overlay usage patterns

Dependencies:

• Can be developed in parallel with Style Core Views: Application View, Headers, Folder Tabs, Menu Bar, Floating Bar #11-12 after Custom Components: Build PV8-specific UI components not in base 98.css #10 is complete

Parent epic: #7