+
+MODAL CARDS (Inside modal)
+---------------------------
+Classes:
+ - backdrop-blur-xl
+ - bg-white/60
+ - rounded-2xl
+ - shadow-xl
+ - border border-white/30
+ - p-6
+ - mb-6
+
+Example:
+
+
+================================================================================
+PREFERENCES PAGE
+================================================================================
+
+PREFERENCES CARD
+----------------
+Classes:
+ - backdrop-blur-xl
+ - bg-white/60
+ - rounded-2xl
+ - shadow-xl
+ - border border-white/30
+ - p-6
+
+PREFERENCE SECTION DIVIDER
+---------------------------
+Classes:
+ - border-b border-white/20
+ - py-4
+
+RADIO BUTTON OPTIONS
+--------------------
+Container:
+ - flex flex-col sm:flex-row
+ - gap-4
+
+Option Label:
+ - flex items-center
+ - p-4
+ - border-2 border-white/30
+ - backdrop-blur-sm
+ - bg-white/40
+ - rounded-2xl
+ - cursor-pointer
+ - hover:border-indigo-500/50
+ - hover:bg-white/60
+ - transition-all
+ - shadow-sm
+
+Selected State (via JavaScript):
+ - border-indigo-500
+ - bg-indigo-50/50
+ - shadow-md
+
+Example:
+
+
+================================================================================
+OPACITY LEVELS REFERENCE
+================================================================================
+
+BACKGROUND OPACITIES:
+ - /20 = Very subtle borders and dividers (border-white/20)
+ - /30 = Standard borders and dividers (border-white/30)
+ - /40 = Input backgrounds, table rows, option backgrounds (bg-white/40)
+ - /50 = Hover states, focus rings, selected states (hover:bg-white/50, bg-indigo-50/50)
+ - /60 = Standard card backgrounds (bg-white/60)
+ - /70 = Navigation bar (bg-white/70)
+ - /80 = Dropdowns, modals (bg-white/80)
+ - /90 = Button backgrounds active state (bg-indigo-600/90, bg-gray-900/90)
+
+BLUR LEVELS:
+ - backdrop-blur-sm = Subtle blur (4px) - inputs, buttons, table headers
+ - backdrop-blur-xl = Standard blur (24px) - cards, navigation, dropdowns
+ - backdrop-blur-2xl = Strong blur (40px) - modals, overlays
+
+================================================================================
+SHADOW LEVELS REFERENCE
+================================================================================
+
+ - shadow-sm = Small shadow (1px) - subtle elevation
+ - shadow-lg = Large shadow (10px) - buttons, active states, containers
+ - shadow-xl = Extra large (20px) - cards, main containers
+ - shadow-2xl = 2X extra large (25px) - modals, dropdowns
+
+COLORED SHADOWS:
+ - shadow-indigo-500/30 = Subtle colored shadow (avatar default)
+ - shadow-indigo-500/50 = More prominent colored shadow (avatar hover)
+
+================================================================================
+TRANSITION PATTERNS
+================================================================================
+
+STANDARD TRANSITION
+-------------------
+Classes: transition-all duration-300
+
+SMOOTH HOVER
+------------
+Classes: transition-all duration-300 hover:scale-105
+
+BUTTON TRANSITION
+-----------------
+Classes: transition-all (includes color, shadow, scale changes)
+
+COLOR TRANSITION
+----------------
+Classes: transition-colors (for hover state color changes only)
+
+================================================================================
+COLOR PALETTE
+================================================================================
+
+PRIMARY COLORS:
+ - indigo-600/90 = Primary button background
+ - indigo-700/90 = Primary button hover
+ - indigo-500/30 = Shadow color (subtle)
+ - indigo-500/50 = Focus ring, stronger shadow, selected states
+ - indigo-300/50 = Focus border color
+
+GRADIENT COLORS (Avatar):
+ - from-indigo-500 = Start of gradient
+ - via-purple-500 = Middle of gradient
+ - to-pink-500 = End of gradient
+
+TEXT COLORS:
+ - text-gray-500 = Secondary text, labels
+ - text-gray-600 = Body text, descriptions
+ - text-gray-700 = Standard text (inactive buttons, dropdown items)
+ - text-gray-900 = Headings, important text, dropdown headers
+ - text-white = Text on colored backgrounds
+ - text-indigo-600 = Links, active states
+ - text-indigo-700 = Link hover state
+ - text-red-600 = Destructive actions (logout)
+
+BORDER COLORS:
+ - border-white/20 = Subtle borders (navigation, dividers)
+ - border-white/30 = Standard borders (cards, containers)
+ - border-white/40 = Input borders
+ - border-indigo-300/50 = Focus borders
+ - border-indigo-500 = Selected state borders
+
+BACKGROUND GRADIENT:
+ - from-gray-50 = Light gray start
+ - via-blue-50/30 = Light blue middle (30% opacity)
+ - to-indigo-50/40 = Light indigo end (40% opacity)
+
+================================================================================
+COMMON PATTERNS
+================================================================================
+
+SEARCH/FILTER CONTAINER
+-----------------------
+Classes:
+ - backdrop-blur-xl
+ - bg-white/60
+ - rounded-2xl
+ - shadow-xl
+ - border border-white/30
+ - p-6
+ - mb-6
+
+VIEW TOGGLE BUTTONS
+-------------------
+Container:
+ - inline-flex
+ - rounded-2xl
+ - border border-white/30
+ - backdrop-blur-xl
+ - bg-white/60
+ - p-1
+ - shadow-lg
+
+Active Button:
+ - backdrop-blur-sm
+ - bg-indigo-600/90
+ - text-white
+ - rounded-xl
+ - shadow-lg
+ - hover:bg-indigo-700/90
+ - transition-all
+
+Inactive Button:
+ - backdrop-blur-sm
+ - text-gray-700
+ - rounded-xl
+ - hover:bg-white/40
+ - transition-all
+
+MESSAGE CONTAINER
+-----------------
+Success Message:
+ - bg-green-50
+ - border-green-200
+ - text-green-700
+ - border
+ - px-4 py-3
+ - rounded-xl
+ - text-sm
+ - backdrop-blur-sm
+
+Error Message:
+ - bg-red-50
+ - border-red-200
+ - text-red-700
+ - border
+ - px-4 py-3
+ - rounded-xl
+ - text-sm
+ - backdrop-blur-sm
+
+================================================================================
+RESPONSIVE DESIGN
+================================================================================
+
+BREAKPOINTS:
+ - sm: 640px
+ - md: 768px
+ - lg: 1024px
+
+MOBILE (< 640px):
+ - Single column layouts
+ - Full-width buttons
+ - Stacked navigation elements
+ - Full-screen modals (rounded-none)
+ - Smaller text sizes (text-sm)
+ - Reduced padding
+
+TABLET (640px - 1024px):
+ - Two-column grids where applicable
+ - Horizontal navigation
+ - Constrained modals (rounded-3xl)
+ - Medium text sizes
+
+DESKTOP (> 1024px):
+ - Multi-column layouts
+ - Max-width containers (max-w-7xl)
+ - Side-by-side elements
+ - Larger text and spacing
+
+================================================================================
+IMPLEMENTATION CHECKLIST
+================================================================================
+
+When creating a new component with liquid glass style:
+
+[ ] 1. Apply appropriate backdrop-blur level (sm, xl, or 2xl)
+[ ] 2. Set semi-transparent background (white/40 to white/80 based on context)
+[ ] 3. Add rounded corners (rounded-xl for buttons/inputs, rounded-2xl for cards)
+[ ] 4. Include shadow (shadow-lg for buttons, shadow-xl for cards, shadow-2xl for modals)
+[ ] 5. Add subtle border (border-white/20 to border-white/40)
+[ ] 6. Add transition-all or transition-colors for smooth interactions
+[ ] 7. Include hover states with increased opacity/shadow/scale
+[ ] 8. Test on gradient background to ensure glass effect is visible
+[ ] 9. Ensure proper z-index layering (z-40 for nav, z-50 for modals/dropdowns)
+[ ] 10. Verify responsive behavior on mobile, tablet, and desktop
+
+================================================================================
+ACCESSIBILITY NOTES
+================================================================================
+
+- Ensure sufficient contrast for text readability
+- Focus states should be clearly visible (focus:ring-2 focus:ring-indigo-500/50)
+- Interactive elements should have clear hover feedback
+- Maintain WCAG AA contrast ratios (4.5:1 for normal text)
+- Use semantic HTML elements
+- Provide keyboard navigation support
+- Screen reader friendly labels and ARIA attributes where needed
+
+================================================================================
+BROWSER COMPATIBILITY
+================================================================================
+
+backdrop-blur requires:
+- Chrome 76+
+- Firefox 103+
+- Safari 9+
+- Edge 79+
+
+For older browsers, consider:
+- Fallback solid backgrounds
+- CSS filters as alternative
+- Progressive enhancement approach
+
+================================================================================
+PERFORMANCE CONSIDERATIONS
+================================================================================
+
+- backdrop-blur can be performance-intensive
+- Use sparingly on mobile devices
+- Consider will-change: transform for animated elements
+- Test on lower-end devices
+- Limit the number of blurred layers
+- Use backdrop-blur-sm for smaller elements when possible
+
+================================================================================
+CURRENT IMPLEMENTATION STATUS
+================================================================================
+
+PAGES IMPLEMENTED:
+✓ Dashboard (dashboard.html)
+✓ Jobs Page (jobs.html)
+✓ Notes Page (notes.html)
+✓ Preferences Page (preferences.html)
+✓ Login Page (index.html) - standard design, not glassmorphism
+
+COMPONENTS IMPLEMENTED:
+✓ Navigation bar
+✓ User avatar with dropdown
+✓ Cards and containers
+✓ Search/filter sections
+✓ View toggle buttons
+✓ Tables
+✓ Modals
+✓ Form inputs and selects
+✓ Buttons (all states)
+✓ Preferences page with radio options
+
+================================================================================
+END OF PLAYBOOK
+================================================================================
diff --git a/UI_LAYOUT_DESIGN.txt b/UI_LAYOUT_DESIGN.txt
new file mode 100644
index 0000000..67df20b
--- /dev/null
+++ b/UI_LAYOUT_DESIGN.txt
@@ -0,0 +1,1187 @@
+================================================================================
+JOB-PAGES APPLICATION - UI LAYOUT AND DESIGN DOCUMENTATION
+ Liquid Glass Design System
+================================================================================
+
+This document describes the complete layout, design, and visual structure of the
+Job-Pages application with the Apple-inspired liquid glass (glassmorphism) design.
+
+Last Updated: 2024
+Version: 2.0
+
+================================================================================
+TECHNOLOGY STACK
+================================================================================
+- Frontend Framework: Vanilla HTML/CSS/JavaScript
+- CSS Framework: Tailwind CSS (via CDN)
+- Rich Text Editor: Quill.js (for notes editing)
+- Authentication: PocketBase
+- Design System: Liquid Glass (Glassmorphism) with gradient backgrounds
+- User Preferences: Stored in PocketBase users collection PRISM JSON column
+
+================================================================================
+OVERALL DESIGN THEME
+================================================================================
+
+DESIGN PHILOSOPHY:
+- Apple-inspired liquid glass aesthetic
+- Glassmorphism with backdrop blur effects
+- Semi-transparent elements with frosted glass appearance
+- Smooth transitions and hover effects
+- Premium, modern, clean interface
+
+COLOR SCHEME:
+- Primary: Indigo (#4F46E5 / indigo-600)
+- Gradient Avatar: Indigo → Purple → Pink
+- Background: Gradient from-gray-50 via-blue-50/30 to-indigo-50/40
+- Text: Dark gray (#1F2937 / gray-900) for headings, medium gray (#4B5563 / gray-600) for body
+- Error: Red (#DC2626 / red-600)
+- Success: Green (#059669 / green-600)
+- Borders: White with opacity (white/20 to white/40)
+
+TYPOGRAPHY:
+- Headings: Bold, large (text-xl to text-3xl)
+- Body: Medium weight, readable sizes (text-sm to text-base)
+- Labels: Medium weight, small to medium (text-sm to text-base)
+- Font weights: font-medium, font-semibold, font-bold
+
+SPACING:
+- Consistent padding: p-4, p-6, p-8
+- Consistent margins: mb-4, mb-6, mb-8
+- Gap spacing: gap-4, gap-6
+- Navigation padding: py-4 sm:py-4 (consistent on all screen sizes)
+
+BORDER RADIUS:
+- Standard: rounded-xl (12px) - buttons, inputs
+- Large: rounded-2xl (16px) - cards, containers
+- Extra Large: rounded-3xl (24px) - modals
+- Full: rounded-full - avatars
+
+SHADOWS:
+- Small: shadow-sm - subtle elevation
+- Large: shadow-lg - buttons, containers
+- Extra Large: shadow-xl - cards
+- 2X Large: shadow-2xl - modals, dropdowns
+- Colored: shadow-indigo-500/30, shadow-indigo-500/50 - avatars
+
+BLUR EFFECTS:
+- Small: backdrop-blur-sm (4px) - inputs, buttons, table headers
+- Standard: backdrop-blur-xl (24px) - cards, navigation, dropdowns
+- Strong: backdrop-blur-2xl (40px) - modals, overlays
+
+RESPONSIVE DESIGN:
+- Mobile-first approach
+- Breakpoints: sm (640px), md (768px), lg (1024px)
+- Flexible layouts with grid and flexbox
+- Full-width on mobile, constrained max-width on desktop (max-w-7xl)
+- Sticky navigation on all screen sizes
+
+================================================================================
+NAVIGATION BAR / MENU BAR (All Pages)
+================================================================================
+
+OVERVIEW
+--------
+The navigation bar is consistent across all pages (except login) and uses
+liquid glass design with glassmorphism effects. It includes user avatar,
+dropdown menu, and optional back navigation links.
+
+STRUCTURE
+---------
+- Container: