================================================================================
                    LIQUID GLASS DESIGN SYSTEM PLAYBOOK
                           Apple-Inspired Glassmorphism
================================================================================

OVERVIEW
--------
This playbook documents the liquid glass (glassmorphism) design system used
throughout the Job-Pages application. This design creates a premium, Apple-like
aesthetic using frosted glass effects, subtle transparency, and smooth transitions.

Last Updated: 2024
Version: 2.0

================================================================================
CORE PRINCIPLES
================================================================================

1. TRANSPARENCY & BLUR
   - Use backdrop-blur for frosted glass effects
   - Semi-transparent backgrounds (white/40, white/60, white/70, white/80)
   - Subtle borders with white/20 to white/40 opacity
   - Gradient background provides depth: from-gray-50 via-blue-50/30 to-indigo-50/40

2. DEPTH & SHADOWS
   - Layered shadows (shadow-sm, shadow-lg, shadow-xl, shadow-2xl)
   - Colored shadows for interactive elements (shadow-indigo-500/30, shadow-indigo-500/50)
   - Hover states increase shadow intensity
   - Shadow-lg for buttons, shadow-xl for cards, shadow-2xl for modals/dropdowns

3. SMOOTH TRANSITIONS
   - All interactive elements use transition-all or transition-colors
   - Scale effects on hover (hover:scale-105 for avatars, hover:scale-[1.02] for cards)
   - Opacity changes for hover states
   - Duration-300 for smooth animations

4. ROUNDED CORNERS
   - Standard: rounded-xl (12px) - buttons, inputs
   - Large cards: rounded-2xl (16px) - main containers, cards
   - Modals: rounded-3xl (24px) - modal content
   - Full rounded: rounded-full (for avatars)

================================================================================
BACKGROUND SYSTEM
================================================================================

MAIN PAGE BACKGROUND
--------------------
Class: bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40
Purpose: Creates a subtle gradient that provides depth and visual interest
Usage: Applied to <body> element on all pages

Example:
  <body class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40">

This gradient creates the foundation for the glassmorphism effect, allowing
transparent elements to show through with a beautiful backdrop.

================================================================================
NAVIGATION BAR
================================================================================

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

Purpose: Creates a frosted glass navigation that stays at the top

Container:
  - max-w-7xl mx-auto
  - px-4 sm:px-6 lg:px-8
  - py-4 sm:py-4 (consistent padding on all screen sizes)
  - px-2 (additional horizontal padding)

Example:
  <nav class="backdrop-blur-xl bg-white/70 border-b border-white/20 shadow-sm sticky top-0 z-40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="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">
        <!-- Navigation content -->
      </div>
    </div>
  </nav>

NAVIGATION LINKS
----------------
Classes:
  - text-indigo-600
  - hover:text-indigo-700
  - font-medium
  - text-sm sm:text-base
  - transition-colors

Example:
  <a href="dashboard.html" class="text-indigo-600 hover:text-indigo-700 font-medium text-sm sm:text-base transition-colors">← Dashboard</a>

================================================================================
CARDS & CONTAINERS
================================================================================

STANDARD CARD
-------------
Classes:
  - backdrop-blur-xl
  - bg-white/60
  - rounded-2xl
  - shadow-xl
  - border border-white/30
  - p-6

Purpose: Main content cards with glassmorphism effect

Example:
  <div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">

CARD WITH HOVER EFFECT
----------------------
Additional classes:
  - hover:bg-white/70
  - hover:shadow-2xl
  - hover:border-white/50
  - hover:scale-[1.02]
  - transition-all duration-300
  - cursor-pointer

Example:
  <div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 
              hover:bg-white/70 hover:shadow-2xl hover:border-white/50 hover:scale-[1.02] 
              transition-all duration-300 cursor-pointer">

SEARCH/FILTER CONTAINER
-----------------------
Classes:
  - backdrop-blur-xl
  - bg-white/60
  - rounded-2xl
  - shadow-xl
  - border border-white/30
  - p-6
  - mb-6

Example:
  <div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">

MODAL/CONTAINER
---------------
Classes:
  - backdrop-blur-2xl
  - bg-white/80
  - rounded-3xl
  - shadow-2xl
  - border border-white/30

Backdrop:
  - backdrop-blur-sm
  - bg-black/20

Example:
  <div class="fixed inset-0 backdrop-blur-sm bg-black/20 z-50">
    <div class="backdrop-blur-2xl bg-white/80 rounded-3xl shadow-2xl border border-white/30">
      <!-- Modal content -->
    </div>
  </div>

QUICK INFO CARD (Smaller card)
-------------------------------
Classes:
  - backdrop-blur-xl
  - bg-white/40
  - rounded-2xl
  - p-4
  - border border-white/30
  - shadow-lg

Example:
  <div class="backdrop-blur-xl bg-white/40 rounded-2xl p-4 border border-white/30 shadow-lg">

================================================================================
BUTTONS
================================================================================

PRIMARY BUTTON (ACTIVE STATE)
------------------------------
Classes:
  - backdrop-blur-sm
  - bg-indigo-600/90
  - text-white
  - rounded-xl
  - shadow-lg
  - hover:bg-indigo-700/90
  - hover:shadow-xl
  - transition-all

Example:
  <button class="backdrop-blur-sm bg-indigo-600/90 text-white rounded-xl shadow-lg 
                 hover:bg-indigo-700/90 hover:shadow-xl transition-all">

SECONDARY BUTTON (INACTIVE STATE)
----------------------------------
Classes:
  - backdrop-blur-sm
  - text-gray-700
  - rounded-xl
  - hover:bg-white/40
  - transition-all

Example:
  <button class="backdrop-blur-sm text-gray-700 rounded-xl hover:bg-white/40 transition-all">

BUTTON GROUP CONTAINER (View Toggle)
-------------------------------------
Classes:
  - inline-flex
  - rounded-2xl
  - border border-white/30
  - backdrop-blur-xl
  - bg-white/60
  - p-1
  - shadow-lg

Example:
  <div class="inline-flex rounded-2xl border border-white/30 backdrop-blur-xl bg-white/60 p-1 shadow-lg">
    <!-- Toggle buttons inside -->
  </div>

VIEW TOGGLE BUTTONS
-------------------
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

FORM BUTTONS
------------
Save Button:
  - backdrop-blur-sm
  - bg-indigo-600/90
  - text-white
  - rounded-xl
  - shadow-lg
  - hover:bg-indigo-700/90
  - hover:shadow-xl
  - transition-all

Cancel Button:
  - backdrop-blur-sm
  - bg-white/60
  - border border-white/40
  - text-gray-700
  - rounded-xl
  - shadow-lg
  - hover:bg-white/80
  - hover:shadow-xl
  - transition-all

MAP BUTTONS (Apple Maps / Google Maps)
---------------------------------------
Apple Maps:
  - backdrop-blur-sm
  - bg-gray-900/90
  - text-white
  - rounded-xl
  - shadow-lg
  - hover:bg-gray-800/90
  - hover:shadow-xl

Google Maps:
  - backdrop-blur-sm
  - bg-blue-600/90
  - text-white
  - rounded-xl
  - shadow-lg
  - hover:bg-blue-700/90
  - hover:shadow-xl

================================================================================
FORM ELEMENTS
================================================================================

INPUT FIELDS
------------
Classes:
  - border border-white/40
  - rounded-xl
  - backdrop-blur-sm
  - bg-white/40
  - focus:ring-2
  - focus:ring-indigo-500/50
  - focus:border-indigo-300/50
  - transition-all
  - shadow-sm
  - px-3 py-2 (or px-4 py-3 for larger inputs)

Example:
  <input class="w-full px-3 py-2 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40 
                focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50 
                transition-all shadow-sm">

SEARCH INPUT
------------
Classes:
  - Same as input fields
  - Larger padding: px-4 py-3
  - text-base

Example:
  <input class="w-full px-4 py-3 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40 
                focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50 
                outline-none text-base transition-all shadow-sm">

SELECT DROPDOWNS
----------------
Same classes as input fields

Example:
  <select class="w-full px-3 py-2 border border-white/40 rounded-xl backdrop-blur-sm bg-white/40 
                 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-300/50 
                 transition-all shadow-sm">

================================================================================
AVATARS & ICONS
================================================================================

AVATAR BUTTON
-------------
Classes:
  - rounded-full
  - bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500
  - w-10 h-10
  - shadow-lg shadow-indigo-500/30
  - hover:scale-105
  - hover:shadow-indigo-500/50
  - transition-all duration-300
  - flex items-center justify-center
  - text-white

Purpose: User avatar with gradient background and smooth hover effect

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

AVATAR INITIALS
---------------
Classes:
  - text-xs
  - font-semibold
  - text-white

================================================================================
DROPDOWNS & MENUS
================================================================================

DROPDOWN MENU
-------------
Classes:
  - backdrop-blur-xl
  - bg-white/80
  - rounded-2xl
  - shadow-2xl
  - border border-white/30
  - py-2
  - overflow-hidden
  - absolute right-0 mt-2
  - z-50
  - w-48

Purpose: User dropdown menu with glassmorphism

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

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 ITEM
-------------
Classes:
  - px-4 py-2.5
  - text-sm
  - text-gray-700
  - hover:bg-white/40
  - transition-colors
  - font-medium

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

DESTRUCTIVE DROPDOWN ITEM
--------------------------
Classes:
  - w-full text-left
  - px-4 py-2.5
  - text-sm
  - text-red-600
  - hover:bg-red-50/50
  - transition-colors
  - font-medium

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

================================================================================
TABLES
================================================================================

TABLE CONTAINER
---------------
Classes:
  - backdrop-blur-xl
  - bg-white/60
  - rounded-2xl
  - shadow-xl
  - border border-white/30
  - overflow-hidden

Example:
  <div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 overflow-hidden">

TABLE HEADER
------------
Classes:
  - backdrop-blur-sm
  - bg-white/40

Example:
  <thead class="backdrop-blur-sm bg-white/40">

TABLE BODY
----------
Classes:
  - bg-white/30
  - divide-y divide-white/20

Example:
  <tbody class="bg-white/30 divide-y divide-white/20">

TABLE CELLS
-----------
Standard cells:
  - px-3 sm:px-6
  - py-4
  - text-sm
  - text-gray-900

Header cells:
  - px-3 sm:px-6
  - py-2 sm:py-3
  - text-xs
  - font-medium
  - text-gray-500
  - uppercase
  - tracking-wider

================================================================================
MODALS & OVERLAYS
================================================================================

MODAL BACKDROP
--------------
Classes:
  - fixed inset-0
  - backdrop-blur-sm
  - bg-black/20
  - overflow-y-auto
  - z-50

Example:
  <div class="fixed inset-0 backdrop-blur-sm bg-black/20 overflow-y-auto z-50">

MODAL CONTENT
-------------
Classes:
  - relative top-0 sm:top-10
  - mx-auto
  - p-4 sm:p-6
  - w-full sm:max-w-7xl (or sm:max-w-4xl for smaller modals)
  - backdrop-blur-2xl
  - bg-white/80
  - rounded-none sm:rounded-3xl
  - shadow-2xl
  - border border-white/30
  - mb-0 sm:mb-10
  - min-h-screen sm:min-h-[600px]

Example:
  <div class="relative top-0 sm:top-10 mx-auto p-4 sm:p-6 w-full sm:max-w-7xl 
              backdrop-blur-2xl bg-white/80 rounded-none sm:rounded-3xl shadow-2xl 
              border border-white/30 mb-0 sm:mb-10 min-h-screen sm:min-h-[600px]">

MODAL CARDS (Inside modal)
---------------------------
Classes:
  - backdrop-blur-xl
  - bg-white/60
  - rounded-2xl
  - shadow-xl
  - border border-white/30
  - p-6
  - mb-6

Example:
  <div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">

================================================================================
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:
  <label class="view-option 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" data-value="table">
    <input type="radio" name="defaultView" value="table" class="sr-only">
    <!-- Content -->
  </label>

================================================================================
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
================================================================================
