================================================================================
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: <nav> element
- Position: Sticky at top of page
- Z-index: z-40 (below modals which use z-50)

NAVIGATION BAR CONTAINER
------------------------
Classes:
  - backdrop-blur-xl
  - bg-white/70
  - border-b border-white/20
  - shadow-sm
  - sticky top-0 z-40

Purpose: Creates frosted glass navigation that stays at top while scrolling

Example:
  <nav class="backdrop-blur-xl bg-white/70 border-b border-white/20 shadow-sm sticky top-0 z-40">

INNER CONTAINER
---------------
Classes:
  - max-w-7xl mx-auto
  - px-4 sm:px-6 lg:px-8

FLEX CONTAINER
--------------
Classes:
  - flex flex-col sm:flex-row
  - justify-between
  - items-center
  - h-16 sm:h-auto
  - py-4 sm:py-4
  - gap-4 sm:gap-0
  - px-2

Layout:
  - Mobile: Vertical stack (flex-col)
  - Desktop: Horizontal (flex-row)
  - Consistent padding on all screen sizes (py-4 sm:py-4)

LEFT SIDE (Optional - Back Link)
---------------------------------
Classes:
  - flex items-center gap-4
  - w-full sm:w-auto

Back Link (when present):
  - Color: text-indigo-600
  - Hover: hover:text-indigo-700
  - Weight: font-medium
  - Size: text-sm sm:text-base
  - Transition: transition-colors
  - Text: "← Dashboard" or "← [Page Name]"

Example:
  <div class="flex items-center gap-4 w-full sm:w-auto">
    <a href="dashboard.html" class="text-indigo-600 hover:text-indigo-700 
       font-medium text-sm sm:text-base transition-colors">← Dashboard</a>
  </div>

RIGHT SIDE (User Avatar & Dropdown)
------------------------------------
Classes:
  - flex flex-col sm:flex-row
  - items-center gap-3
  - w-full sm:w-auto
  - relative
  - justify-end sm:justify-start

Purpose: Contains user avatar button and dropdown menu
- On mobile: Stays right-aligned (justify-end)
- On desktop: Normal flow (justify-start)

USER AVATAR BUTTON
------------------
Container:
  - relative (for dropdown positioning)

Button:
  - Size: w-10 h-10
  - Shape: rounded-full
  - Gradient: bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
  - Display: flex items-center justify-center
  - Text: text-white
  - Font: font-medium text-sm
  - Shadow: shadow-lg shadow-indigo-500/30
  - Hover: hover:scale-105 hover:shadow-indigo-500/50
  - Transition: transition-all duration-300
  - Focus: focus:outline-none

Initials:
  - Size: text-xs
  - Weight: font-semibold
  - Color: text-white

Example:
  <div class="relative">
    <button class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 
                   via-purple-500 to-pink-500 flex items-center justify-center 
                   text-white font-medium text-sm hover:scale-105 focus:outline-none 
                   transition-all duration-300 shadow-lg shadow-indigo-500/30 
                   hover:shadow-indigo-500/50">
      <span class="text-xs font-semibold">IC</span>
    </button>
  </div>

USER DROPDOWN MENU
------------------
Container:
  - Position: absolute right-0 mt-2
  - Width: w-48
  - Background: backdrop-blur-xl bg-white/80
  - Border radius: rounded-2xl
  - Shadow: shadow-2xl
  - Border: border border-white/30
  - Padding: py-2
  - Z-index: z-50
  - Overflow: overflow-hidden
  - Hidden by default: hidden class

Example:
  <div class="hidden absolute right-0 mt-2 w-48 backdrop-blur-xl bg-white/80 
              rounded-2xl shadow-2xl border border-white/30 py-2 z-50 overflow-hidden">

DROPDOWN HEADER
---------------
Classes:
  - px-4 py-3
  - border-b border-white/20

Content:
  - Label: "Signed in as"
    * Size: text-xs
    * Color: text-gray-500
    * Weight: font-medium
  - Email: User email address
    * Size: text-sm
    * Weight: font-semibold
    * Color: text-gray-900
    * Truncate: truncate
    * Margin top: mt-0.5

Example:
  <div class="px-4 py-3 border-b border-white/20">
    <p class="text-xs text-gray-500 font-medium">Signed in as</p>
    <p class="text-sm font-semibold text-gray-900 truncate mt-0.5">user@example.com</p>
  </div>

DROPDOWN ITEMS
--------------
Standard Item (Preferences link):
  - Display: block
  - Padding: px-4 py-2.5
  - Text: text-sm text-gray-700
  - Hover: hover:bg-white/40
  - Transition: transition-colors
  - Weight: font-medium
  - Focus: focus:outline-none

Example:
  <a href="preferences.html" class="block px-4 py-2.5 text-sm text-gray-700 
     hover:bg-white/40 focus:outline-none transition-colors font-medium">
    Preferences
  </a>

Destructive Item (Logout):
  - Width: w-full
  - Alignment: text-left
  - Padding: px-4 py-2.5
  - Text: text-sm text-red-600
  - Hover: hover:bg-red-50/50
  - Transition: transition-colors
  - Weight: font-medium
  - Focus: focus:outline-none

Example:
  <button class="w-full text-left px-4 py-2.5 text-sm text-red-600 
                 hover:bg-red-50/50 focus:outline-none transition-colors font-medium">
    Logout
  </button>

DROPDOWN FUNCTIONALITY
----------------------
- Toggle: Click avatar button to show/hide dropdown
- Close on outside click: JavaScript event listener
- Close on item click: Automatic (navigation or logout)

RESPONSIVE BEHAVIOR
-------------------
Mobile (< 640px):
  - Navigation stacks vertically
  - Avatar stays right-aligned (justify-end)
  - Full-width elements where needed

Desktop (≥ 640px):
  - Navigation horizontal layout
  - Avatar in normal flow
  - Optimal spacing

PAGES WITH NAVIGATION
---------------------
✓ Dashboard (dashboard.html)
  - No back link
  - Avatar and dropdown only

✓ Jobs Page (jobs.html)
  - Back link: "← Dashboard"
  - Avatar and dropdown

✓ Notes Page (notes.html)
  - Back link: "← Dashboard"
  - Avatar and dropdown

✓ Preferences Page (preferences.html)
  - Back link: "← Dashboard"
  - Avatar and dropdown

✗ Login Page (index.html)
  - No navigation bar (separate design)

================================================================================
PAGE 1: LOGIN PAGE (index.html)
================================================================================

LAYOUT STRUCTURE:
- Full-screen centered layout
- Single centered card on gradient background

BACKGROUND:
- Gradient: from-blue-50 to-indigo-100
- Full viewport height: min-h-screen
- Centered content with flexbox: flex items-center justify-center
- Padding: p-4

MAIN CARD:
- Container: max-w-md, full width on mobile
- Background: bg-white (solid, not glassmorphism for login)
- Border radius: rounded-lg
- Shadow: shadow-xl
- Padding: p-8
- Centered content

CARD HEADER:
- Text alignment: text-center
- Margin bottom: mb-8
- Title: "Job Tracking"
  * Size: text-3xl
  * Weight: font-bold
  * Color: text-gray-800
  * Margin bottom: mb-2
- Subtitle: "Sign in to your account"
  * Color: text-gray-600

FORM ELEMENTS:
- Form container: space-y-6 (vertical spacing between elements)

ERROR MESSAGE (Hidden by default):
- Container: hidden (shown on error)
- Background: bg-red-50
- Border: border border-red-200
- Text color: text-red-700
- Padding: px-4 py-3
- Border radius: rounded-lg
- Font size: text-sm

INPUT FIELDS:
- Container: Full width with label above
- Label:
  * Display: block
  * Font: text-sm font-medium
  * Color: text-gray-700
  * Margin bottom: mb-2
- Input:
  * Width: w-full
  * Padding: px-4 py-3
  * Border: border border-gray-300
  * Border radius: rounded-lg
  * Focus: focus:ring-2 focus:ring-indigo-500 focus:border-transparent
  * Outline: outline-none
  * Transition: transition
  * Font size: text-base
  * Placeholder: Light gray text

SUBMIT BUTTON:
- Width: w-full
- Background: bg-indigo-600
- Text color: text-white
- Padding: py-3 px-4
- Border radius: rounded-lg
- Font: font-medium
- Hover: hover:bg-indigo-700
- Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
- Disabled: disabled:opacity-50 disabled:cursor-not-allowed
- Transition: transition

================================================================================
PAGE 2: DASHBOARD (dashboard.html)
================================================================================

LAYOUT STRUCTURE:
- Full-width layout with navigation header
- Constrained content area (max-w-7xl)
- Multiple sections: header, cards, stats, quick actions

BACKGROUND:
- Gradient: bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40
- Full height: min-h-screen

NAVIGATION HEADER:
- Background: backdrop-blur-xl bg-white/70
- Shadow: shadow-sm
- Border bottom: border-b border-white/20
- Position: sticky top-0 z-40
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8
- Height: h-16 on desktop, auto on mobile
- Layout: Flexbox, space-between on desktop, column on mobile
- Responsive: flex-col sm:flex-row
- Inner padding: py-4 sm:py-4 gap-4 sm:gap-0 px-2

NAVIGATION CONTENT:
- Right side (avatar and dropdown):
  * User avatar button:
    - Size: w-10 h-10
    - Gradient: bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
    - Shadow: shadow-lg shadow-indigo-500/30
    - Hover: hover:scale-105 hover:shadow-indigo-500/50
    - Transition: transition-all duration-300
    - Rounded: rounded-full
  * User dropdown:
    - Background: backdrop-blur-xl bg-white/80
    - Border: border border-white/30
    - Shadow: shadow-2xl
    - Rounded: rounded-2xl
    - Padding: py-2
    - Overflow: overflow-hidden
    - Width: w-48
    - Z-index: z-50
  * Dropdown items:
    - Header: px-4 py-3 border-b border-white/20
    - Items: px-4 py-2.5 text-sm
    - Hover: hover:bg-white/40
    - Destructive (logout): text-red-600 hover:bg-red-50/50

MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8

PAGE HEADER:
- Title: "Welcome, [User Name]"
  * Size: text-xl sm:text-2xl
  * Weight: font-bold
  * Color: text-gray-800
  * Margin bottom: mb-2
- Subtitle: "Manage your job records and tracking"
  * Size: text-sm sm:text-base
  * Color: text-gray-600

DASHBOARD CARDS SECTION:
- Grid layout: grid-cols-1 md:grid-cols-2
- Gap: gap-6
- Margin bottom: mb-8

DASHBOARD CARD:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-6
- Hover: hover:bg-white/70 transition-all duration-300

CARD STRUCTURE:
- Icon container:
  * Size: w-12 h-12
  * Background: bg-indigo-100
  * Border radius: rounded-lg
  * Centered: flex items-center justify-center
  * Icon: SVG, w-6 h-6, color: text-indigo-600
- Title: "Job Tracking" or "Employee Reports"
  * Size: text-lg
  * Weight: font-semibold
  * Color: text-gray-800
- Description: "View and manage job information"
  * Size: text-sm
  * Color: text-gray-600
  * Margin: mb-4
- Link: "View Jobs →" or "View Reports →"
  * Color: text-indigo-600
  * Hover: hover:text-indigo-700
  * Weight: font-medium
  * Size: text-sm

QUICK STATS SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-4 sm:p-6
- Margin bottom: mb-6 sm:mb-8
- Title: "Quick Stats"
  * Size: text-base sm:text-lg
  * Weight: font-semibold
  * Color: text-gray-800
  * Margin bottom: mb-4

STATS GRID:
- Grid: grid-cols-1 sm:grid-cols-3
- Gap: gap-4

STAT CARD:
- Layout: text-center
- Padding: p-4 sm:p-6
- Background: bg-indigo-50 (or green-50, purple-50)
- Border radius: rounded-lg
- Border: border border-indigo-100 (or green-100, purple-100)
- Hover: hover:shadow-md
- Transition: transition-shadow
- Number:
  * Size: text-3xl sm:text-4xl
  * Weight: font-bold
  * Color: text-indigo-600 (or green-600, purple-600)
  * Margin bottom: mb-2
  * Loading state: animate-pulse with "..." placeholder
- Label:
  * Size: text-xs sm:text-sm
  * Weight: font-medium
  * Color: text-gray-700

QUICK ACTIONS SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-4 sm:p-6
- Title: "Quick Actions"
  * Size: text-base sm:text-lg
  * Weight: font-semibold
  * Color: text-gray-800
  * Margin bottom: mb-4

QUICK ACTIONS GRID:
- Grid: grid-cols-1 md:grid-cols-2
- Gap: gap-4

QUICK ACTION ITEM:
- Layout: flex items-center
- Padding: p-4
- Border: border border-gray-200
- Border radius: rounded-lg
- Hover: hover:bg-gray-50 hover:border-indigo-300 (or green-300 for reports)
- Transition: transition-colors
- Icon container:
  * Size: w-10 h-10
  * Background: bg-indigo-100 (or green-100 for reports)
  * Border radius: rounded-lg
  * Centered: flex items-center justify-center
  * Margin right: mr-4
  * Flex shrink: flex-shrink-0
  * Icon: SVG, w-5 h-5, color: text-indigo-600 (or green-600)
- Text container:
  * Min width: min-w-0
  * Title:
    - Weight: font-medium
    - Color: text-gray-900
    - Size: text-sm sm:text-base
  * Description:
    - Size: text-xs sm:text-sm
    - Color: text-gray-500

================================================================================
PAGE 3: JOBS PAGE (jobs.html)
================================================================================

LAYOUT STRUCTURE:
- Same navigation header as dashboard
- Main content area with search, filters, view toggle, table/cards, and modal

NAVIGATION HEADER:
- Same as dashboard with addition:
  * Back link: "← Dashboard"
    - Color: text-indigo-600
    - Hover: hover:text-indigo-700
    - Weight: font-medium
    - Size: text-sm sm:text-base
    - Transition: transition-colors
    - Positioned before title

MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8

MESSAGE CONTAINER:
- Container for success/error messages
- Margin bottom: mb-4
- Messages:
  * Success: bg-green-50 border-green-200 text-green-700
  * Error: bg-red-50 border-red-200 text-red-700
  * Padding: px-4 py-3
  * Border radius: rounded-xl
  * Backdrop blur: backdrop-blur-sm

SEARCH AND FILTER SECTION:
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Padding: p-6
- Margin bottom: mb-6
- Layout: flex flex-col gap-4

SEARCH BAR:
- Width: w-full
- Padding: px-4 py-3
- Border: border border-white/40
- Border radius: rounded-xl
- Background: backdrop-blur-sm bg-white/40
- Focus: focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
- Outline: outline-none
- Font size: text-base
- Transition: transition-all
- Shadow: shadow-sm
- Placeholder: "Search by job number, name, or client..."

FILTER BUTTONS:
- Layout: flex flex-wrap gap-1.5
- Buttons:
  * Active state (All):
    - Background: bg-indigo-600
    - Text: text-white
    - Hover: hover:bg-indigo-700
  * Inactive state (Estimator/Status filters):
    - Background: Pastel colors based on filter type
    - Text: Matching text colors
    - Hover: Darker shade
  * Common styles:
    - Flex: flex-1 sm:flex-none
    - Padding: px-3 py-1.5
    - Border radius: rounded-md
    - Size: text-xs
    - Weight: font-medium
    - Transition: transition
    - Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1

VIEW TOGGLE:
- Container: mb-4 flex justify-end
- Toggle container:
  * Background: backdrop-blur-xl bg-white/60
  * Border: border border-white/30
  * Border radius: rounded-2xl
  * Padding: p-1
  * Shadow: shadow-lg
  * Layout: inline-flex
- Active button:
  * Background: backdrop-blur-sm bg-indigo-600/90
  * Text: text-white
  * Border radius: rounded-xl
  * Shadow: shadow-lg
  * Hover: hover:bg-indigo-700/90
- Inactive button:
  * Background: backdrop-blur-sm (transparent)
  * Text: text-gray-700
  * Border radius: rounded-xl
  * Hover: hover:bg-white/40

JOBS TABLE VIEW:
- Container: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 overflow-hidden
- Table container: overflow-x-auto
- Table structure: min-w-full divide-y divide-gray-200
- Header: backdrop-blur-sm bg-white/40
- Body: bg-white/30 divide-y divide-white/20
- Cells: px-3 sm:px-6 py-4 text-sm text-gray-900

JOBS CARD VIEW:
- Container: space-y-4
- Card structure:
  * Background: backdrop-blur-xl bg-white/60
  * Border radius: rounded-2xl
  * Shadow: shadow-xl
  * Border: border border-white/30
  * Padding: p-6
  * Hover: hover:shadow-2xl hover:border-white/50 hover:bg-white/70 hover:scale-[1.02]
  * Transition: transition-all duration-300
  * Cursor: cursor-pointer
- Card content:
  * Job number: text-xl font-semibold text-gray-900
  * Job name: text-base text-gray-600
  * Grid layout: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4
  * Client section with phone number link
  * Estimator badge
  * Status badge
  * Address section (if available):
    - Address text
    - Apple Maps button: backdrop-blur-sm bg-gray-900/90 rounded-xl shadow-lg
    - Google Maps button: backdrop-blur-sm bg-blue-600/90 rounded-xl shadow-lg
  * Type and Division in nested grid

PAGINATION:
- Container: mt-4 flex justify-between items-center
- Styled pagination controls

JOB DASHBOARD MODAL:
- Overlay:
  * Position: fixed inset-0
  * Background: backdrop-blur-sm bg-black/20
  * Overflow: overflow-y-auto
  * Z-index: z-50
  * Hidden by default: hidden class

MODAL CONTENT:
- Container:
  * Position: relative top-0 sm:top-10
  * Margin: mx-auto
  * Padding: p-4 sm:p-6
  * Width: w-full sm:max-w-7xl
  * Shadow: shadow-2xl
  * Border radius: rounded-none sm:rounded-3xl
  * Background: backdrop-blur-2xl bg-white/80
  * Border: border border-white/30
  * Margin bottom: mb-0 sm:mb-10
  * Min height: min-h-screen sm:min-h-[600px]

MODAL HEADER:
- Background: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6
- Layout: flex flex-col lg:flex-row justify-between items-start gap-4
- Title: "Job Dashboard"
  * Size: text-2xl
  * Weight: font-bold
  * Color: text-gray-900
  * Margin bottom: mb-2
- Quick Info Card:
  * Background: backdrop-blur-xl bg-white/40
  * Border radius: rounded-2xl
  * Padding: p-4
  * Border: border border-white/30
  * Shadow: shadow-lg
  * Min width: min-w-[250px]

MODAL TABS:
- Border bottom: border-b border-gray-200
- Navigation: flex space-x-8 overflow-x-auto
- Tab buttons:
  * Active:
    - Border: border-indigo-500
    - Text: text-indigo-600
    - Border bottom: border-b-2
    - Weight: font-medium
    - Size: text-sm
    - Padding: py-2 px-1
    - White space: whitespace-nowrap
  * Inactive:
    - Border: border-transparent
    - Text: text-gray-500
    - Hover: hover:text-gray-700 hover:border-gray-300
    - Border bottom: border-b-2
    - Weight: font-medium
    - Size: text-sm
    - Padding: py-2 px-1
    - White space: whitespace-nowrap

TABS:
1. Overview (always visible)
2. Team & Client
3. Dates & Links
4. Status Flags
5. Notes (hidden for new jobs, shown for existing)

MODAL FORM SECTIONS:
- Each section in a card:
  * Background: backdrop-blur-xl bg-white/60
  * Border radius: rounded-2xl
  * Shadow: shadow-xl
  * Border: border border-white/30
  * Padding: p-6
- Section title:
  * Size: text-lg
  * Weight: font-semibold
  * Color: text-gray-900
  * Margin bottom: mb-4

FORM FIELDS (Grid Layout):
- Grid: grid-cols-1 sm:grid-cols-2
- Gap: gap-4

FORM FIELD STYLING:
- Label:
  * Display: block
  * Size: text-sm
  * Weight: font-medium
  * Color: text-gray-700
  * Margin bottom: mb-1
- Input/Select:
  * Width: w-full
  * Padding: px-3 py-2
  * Border: border border-white/40
  * Border radius: rounded-xl
  * Background: backdrop-blur-sm bg-white/40
  * Focus: focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50
  * Outline: outline-none
  * Font size: text-base
  * Transition: transition-all
  * Shadow: shadow-sm

FORM BUTTONS:
- Layout: flex flex-col sm:flex-row justify-end
- Spacing: space-y-2 sm:space-y-0 sm:space-x-3
- Padding top: pt-4
- Border top: border-t border-gray-200
- Cancel button:
  * Width: w-full sm:w-auto
  * Padding: px-6 py-2.5
  * Background: backdrop-blur-sm bg-white/60
  * Border: border border-white/40
  * Text: text-gray-700
  * Border radius: rounded-xl
  * Shadow: shadow-lg
  * Hover: hover:bg-white/80 hover:shadow-xl
  * Transition: transition-all
- Save button:
  * Width: w-full sm:w-auto
  * Padding: px-6 py-2.5
  * Background: backdrop-blur-sm bg-indigo-600/90
  * Text: text-white
  * Border radius: rounded-xl
  * Shadow: shadow-lg
  * Hover: hover:bg-indigo-700/90 hover:shadow-xl
  * Transition: transition-all

NOTES SECTION:
- Add Note button:
  * Background: bg-indigo-600
  * Text: text-white
  * Padding: px-3 py-1.5
  * Border radius: rounded-lg
  * Size: text-sm
  * Weight: font-medium
  * Hover: hover:bg-indigo-700
- Notes list:
  * Container: space-y-4
  * Max height: max-h-[500px]
  * Overflow: overflow-y-auto
- Add Note form:
  * Hidden by default: hidden
  * Background: bg-gray-50
  * Padding: p-4
  * Border radius: rounded-lg
  * Border: border border-gray-200

================================================================================
PAGE 4: NOTES PAGE (notes.html)
================================================================================

LAYOUT STRUCTURE:
- Same navigation header as jobs page
- Main content with table and modal

NAVIGATION HEADER:
- Same as jobs page
- Title: "Employee Reports"

MAIN CONTENT AREA:
- Container: max-w-7xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8

PAGE HEADER:
- Layout: flex flex-col sm:flex-row justify-between items-start sm:items-center
- Gap: gap-4
- Margin bottom: mb-6
- Title: "Job Notes"
  * Size: text-xl sm:text-2xl
  * Weight: font-bold
  * Color: text-gray-800
  * Margin bottom: mb-2
- Subtitle: "Manage job notes and reports"
  * Size: text-sm sm:text-base
  * Color: text-gray-600
- Add Note Button:
  * Background: bg-indigo-600
  * Text: text-white
  * Padding: px-4 sm:px-6 py-2 sm:py-3
  * Border radius: rounded-lg
  * Size: text-sm sm:text-base
  * Weight: font-medium
  * Hover: hover:bg-indigo-700
  * Focus: focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
  * Width: w-full on mobile, auto on desktop
  * Text: "+ Add Note"

MESSAGE CONTAINER:
- Same as jobs page

REPORTS TABLE CONTAINER:
- Hidden by default: hidden class
- Background: backdrop-blur-xl bg-white/60
- Border radius: rounded-2xl
- Shadow: shadow-xl
- Border: border border-white/30
- Overflow: overflow-hidden

================================================================================
PAGE 5: PREFERENCES PAGE (preferences.html)
================================================================================

LAYOUT STRUCTURE:
- Same navigation header as other pages
- Main content with preferences form

NAVIGATION HEADER:
- Same as other pages
- Back link: "← Dashboard"

MAIN CONTENT AREA:
- Container: max-w-4xl mx-auto
- Padding: px-4 sm:px-6 lg:px-8 py-8

PAGE HEADER:
- Title: "Preferences"
  * Size: text-2xl sm:text-3xl
  * Weight: font-bold
  * Color: text-gray-900
  * Margin bottom: mb-2
- Subtitle: "Customize your Job-Pages experience"
  * Size: text-sm sm:text-base
  * Color: text-gray-600

PREFERENCES FORM:
- Container: backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6
- Layout: space-y-6

DARK MODE SECTION:
- Layout: flex items-center justify-between
- Padding: py-4
- Border bottom: border-b border-white/20
- Title: "Dark Mode"
  * Size: text-lg
  * Weight: font-semibold
  * Color: text-gray-900
  * Margin bottom: mb-1
- Description: "Switch between light and dark themes"
  * Size: text-sm
  * Color: text-gray-600
- Toggle switch: Custom styled checkbox with toggle appearance

DEFAULT VIEW SECTION:
- Padding: py-4
- Border bottom: border-b border-white/20
- Title: "Default View"
  * Size: text-lg
  * Weight: font-semibold
  * Color: text-gray-900
  * Margin bottom: mb-2
- Description: "Choose your preferred default view for the jobs page"
  * Size: text-sm
  * Color: text-gray-600
  * Margin bottom: mb-4
- Options container: flex flex-col sm:flex-row gap-4

VIEW OPTION (Radio Button):
- Label container:
  * Layout: flex items-center
  * Padding: p-4
  * Border: border-2 border-white/30
  * Background: backdrop-blur-sm bg-white/40
  * Border radius: rounded-2xl
  * Cursor: cursor-pointer
  * Hover: hover:border-indigo-500/50 hover:bg-white/60
  * Transition: transition-all
  * Shadow: shadow-sm
- Selected state (via JavaScript):
  * Border: border-indigo-500
  * Background: bg-indigo-50/50
  * Shadow: shadow-md
- Radio input: sr-only (screen reader only)
- Content:
  * Icon: SVG, w-6 h-6, text-gray-400 (text-indigo-600 when selected)
  * Title: font-medium text-gray-900 (text-indigo-600 when selected)
  * Description: text-sm text-gray-500

SAVE BUTTON:
- Layout: flex justify-end pt-4
- Button:
  * Padding: px-6 py-2.5
  * Background: backdrop-blur-sm bg-indigo-600/90
  * Text: text-white
  * Border radius: rounded-xl
  * Shadow: shadow-lg
  * Hover: hover:bg-indigo-700/90 hover:shadow-xl
  * Transition: transition-all

================================================================================
INTERACTIVE ELEMENTS AND STATES
================================================================================

BUTTON STATES:
- Default: Base styles with backdrop-blur and semi-transparent background
- Hover: Darker background color, increased shadow, scale effect
- Focus: Ring outline (focus:ring-2 focus:ring-indigo-500/50)
- Disabled: Reduced opacity (disabled:opacity-50 disabled:cursor-not-allowed)
- Active: Applied to filter buttons and view toggle when selected

INPUT STATES:
- Default: Border white/40, backdrop-blur-sm bg-white/40
- Focus: Ring indigo-500/50, border indigo-300/50
- Error: Red border and background (shown in error messages)

LOADING STATES:
- Pulse animation: animate-pulse
- Spinner: animate-spin
- Placeholder text: "Loading..." or "..."
- Loading row in tables: Centered text-gray-500

MODAL STATES:
- Hidden: hidden class (display: none)
- Visible: Remove hidden class
- Full screen on mobile, centered on desktop
- Backdrop blur effect on overlay

CARD STATES:
- Default: backdrop-blur-xl bg-white/60
- Hover: hover:bg-white/70 hover:shadow-2xl hover:border-white/50 hover:scale-[1.02]
- Transition: transition-all duration-300

AVATAR STATES:
- Default: Gradient background with shadow-lg shadow-indigo-500/30
- Hover: hover:scale-105 hover:shadow-indigo-500/50
- Transition: transition-all duration-300

DROPDOWN STATES:
- Hidden: hidden class
- Visible: Remove hidden class
- Items: hover:bg-white/40 (or hover:bg-red-50/50 for destructive)

================================================================================
RESPONSIVE BEHAVIOR
================================================================================

MOBILE (< 640px):
- Single column layouts
- Full-width buttons
- Stacked navigation elements
- Full-screen modals (rounded-none)
- Smaller text sizes (text-sm)
- Reduced padding
- Avatar stays right-aligned (justify-end)

TABLET (640px - 1024px):
- Two-column grids where applicable
- Horizontal navigation
- Constrained modals (rounded-3xl)
- Medium text sizes
- Flexible layouts

DESKTOP (> 1024px):
- Multi-column layouts
- Max-width containers (max-w-7xl)
- Side-by-side elements
- Larger text and spacing
- Optimal glassmorphism visibility

================================================================================
ICONS AND VISUAL ELEMENTS
================================================================================

ICONS USED (SVG):
- Table icon (View toggle)
- Grid/Cards icon (View toggle)
- Arrow right icon (Card view, navigation)
- Close/X icon (Modals)
- Location icon (Address section)
- User/People icon (Dashboard)
- Document icon (Dashboard)

ICON STYLING:
- Stroke-based SVG icons
- Current color inheritance
- Sizes: w-5 h-5, w-6 h-6
- Rounded icon containers with colored backgrounds (where applicable)

BADGES:
- Estimator badges: Pastel colored backgrounds
  * Steve: bg-orange-100 text-orange-800
  * Beth: bg-blue-100 text-blue-800
  * Timothy: bg-purple-100 text-purple-800
  * Others: bg-gray-100 text-gray-800
- Status badges: Color-coded based on status
  * Billed: bg-purple-200 text-purple-800
  * Est Hold: bg-orange-200 text-orange-800
  * Est Sent/Follow Up: bg-yellow-200 text-yellow-800
  * Estimating: bg-blue-200 text-blue-800
  * In Progress/Awarded: bg-green-200 text-green-800
  * Not Awarded/Not Bidding: bg-red-200 text-red-800
  * Archive: bg-gray-200 text-gray-700

================================================================================
ANIMATIONS AND TRANSITIONS
================================================================================

TRANSITIONS:
- All interactive elements: transition-all or transition-colors
- Duration: duration-300 for smooth animations
- Hover effects: Smooth color, shadow, and scale changes
- Shadow changes: Included in transition-all

ANIMATIONS:
- Pulse: animate-pulse (for loading states)
- Spin: animate-spin (for loading spinners)
- Scale: hover:scale-105 (avatars), hover:scale-[1.02] (cards)

================================================================================
USER PREFERENCES SYSTEM
================================================================================

STORAGE:
- Location: PocketBase users collection
- Column: PRISM (JSON)
- Key: "Job-Pages" (isolated from other applications)
- Structure:
  {
    "Job-Pages": {
      "darkMode": boolean,
      "defaultView": "table" | "card"
    }
  }

PREFERENCES AVAILABLE:
1. Dark Mode
   - Toggle switch
   - Applied immediately on change
   - Persists across sessions

2. Default View
   - Radio button selection
   - Options: Table View, Card View
   - Applied on jobs page load
   - Can be overridden by user selection during session

ACCESS:
- Preferences page accessible from user dropdown menu
- Link: "Preferences" in dropdown
- All pages initialize dark mode from preferences on load

================================================================================
ACCESSIBILITY FEATURES
================================================================================

- Focus states: Visible ring outlines on all interactive elements
- Semantic HTML: Proper use of headings, labels, forms
- ARIA attributes: Implicit through semantic HTML
- Keyboard navigation: All interactive elements are keyboard accessible
- Color contrast: High contrast text on backgrounds
- Responsive text: Scales appropriately on different screen sizes
- Screen reader support: sr-only class for hidden but accessible elements

================================================================================
PERFORMANCE OPTIMIZATIONS
================================================================================

- backdrop-blur used strategically (not on every element)
- Transitions optimized with transition-all
- Lazy loading for modals and heavy content
- Efficient DOM updates
- Minimal re-renders

================================================================================
CURRENT IMPLEMENTATION STATUS
================================================================================

PAGES:
✓ Login Page (index.html) - Standard design
✓ Dashboard (dashboard.html) - Full liquid glass
✓ Jobs Page (jobs.html) - Full liquid glass
✓ Notes Page (notes.html) - Full liquid glass
✓ Preferences Page (preferences.html) - Full liquid glass

COMPONENTS:
✓ Navigation bar with glassmorphism
✓ User avatar with gradient and dropdown
✓ Cards and containers
✓ Search/filter sections
✓ View toggle buttons
✓ Tables with glassmorphism
✓ Modals with glassmorphism
✓ Form inputs and selects
✓ Buttons (all states)
✓ Preferences page with interactive radio options
✓ Job cards with address and map buttons
✓ Badges (estimator and status)

FEATURES:
✓ Dark mode preference (stored in PRISM)
✓ Default view preference (stored in PRISM)
✓ User preferences persistence
✓ Responsive design
✓ Smooth transitions and animations

================================================================================
END OF DOCUMENTATION
================================================================================