# Compact Nav-Bar Header Redesign — Session Reference

## User Design Preferences (Ray)

- **Minimal header** — no logo, no title/subtitle section. Just the nav bar.
- **Mobile page title** — show the current page name centered on mobile between the hamburger and controls.
- **Dark mode toggle + user menu** — inline in the nav bar, right-aligned.
- **Clean, readable colors** — white/dark cards with colored accent borders, never colored-text-on-colored-bg.
- **High contrast** — bold dark text on light bg, bold light text on dark bg. No washed-out grays.
- **Card depth** — subtle gradient + noticeable border in light mode, not flat white.

## Persistent UI Bugs Fixed This Session

### Dropdown Clipped by Content Below
The user account dropdown appeared behind the "overdue tasks" cards on the dashboard.

**Root cause:** The outer header wrapper `<div>` had no `position` or `z-index` set. Even though the `#user-dropdown` had `z-index: 10001`, its parent wrapper was a sibling of the main content div in the DOM. Since main content comes after the header in DOM order, it painted on top. Additionally, the CSS variable `--z-critical` was used in `#user-dropdown { z-index: var(--z-critical); }` but never defined anywhere.

**Fix (3 parts):**
1. Added `position: relative; z-index: 1000` to the outer header wrapper div (creates stacking context at body level)
2. Added `:root { --z-critical: 999999; }` to `style.css`
3. Added `.user-menu-container { overflow: visible !important; position: relative !important; }` to `style.css`
4. Removed `overflow-hidden` Tailwind class from `.header-card` elements on all 4 pages

## Header HTML Template

```html
<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="container mx-auto p-2 md:p-4">
        <div class="header-card text-white rounded-2xl shadow-lg overflow-hidden relative overflow-visible-important">
            <div class="bg-white/10" id="main-navigation">
                <div class="px-3 md:px-4 lg:px-6">
                    <div class="flex items-center justify-between py-2 md:py-2.5">
                        <!-- Left: Mobile Hamburger + Desktop Nav Links -->
                        <div class="flex items-center gap-0.5">
                            <button type="button" id="mobile-menu-btn" class="lg:hidden p-2 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-200 shadow-sm" aria-label="Toggle mobile menu">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                                </svg>
                            </button>
                            <div class="hidden lg:flex items-center gap-0.5">
                                <!-- Nav links here with active/inactive classes -->
                            </div>
                        </div>
                        <!-- Mobile Page Title -->
                        <span class="lg:hidden text-sm font-semibold text-white">Page Name</span>
                        <!-- Right: Controls -->
                        <div class="flex items-center gap-1.5 md:gap-2">
                            <div class="hidden sm:flex items-center gap-1.5 p-1.5 rounded-xl bg-white/10">
                                <span class="text-xs font-medium text-blue-100 whitespace-nowrap">Dark Mode</span>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="dark-mode-toggle">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            <div class="user-menu-container relative">
                                <!-- User menu button + dropdown -->
                            </div>
                        </div>
                    </div>
                    <!-- Mobile Navigation -->
                    <div id="mobile-navigation" class="lg:hidden hidden py-2 border-t border-white/20">
                        <div class="space-y-1">
                            <!-- Mobile nav links here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

## Key Pattern: Active Link Per Page

When constructing the header for each page, only ONE nav link should use the active style (`bg-white/20 text-white shadow-sm`). All others use inactive (`text-blue-100 hover:...`). This applies to both desktop and mobile nav link lists.

## ⚠️ Critical: Z-Index for Dropdown After Header Redesign

After removing the tall header section, the user account dropdown will likely appear behind page content. **This must be fixed separately from the header HTML changes.** The outer header wrapper needs:

```html
<div class="bg-white dark:bg-gray-900 border-b ..." style="position: relative; z-index: 1000;">
```

Additionally:
- Remove `overflow-hidden` from the header-card class list (conflicts with dropdown overflow)
- Define `:root { --z-critical: 999999; }` in style.css if `var(--z-critical)` is referenced
- Ensure `.user-menu-container { overflow: visible !important; }` is in the CSS

See section 7 of the SKILL.md for the full diagnosis and fix checklist.

## ⚠️ Duplicate CSS Selectors

Some pages accumulated multiple `.dashboard-card` definitions in the same `<style>` block across different edit sessions. The LAST definition wins (same specificity), which can cause override confusion. After making structural changes, grep for duplicate class definitions in the page's inline CSS and consolidate.

## Pages Converted This Session

All 4 pages at `/mnt/media/Web App Builds/Website - -v17 - 8-9-25 - Copy/`:

| Page | File | Outer Wrapper | Mobile Title |
|------|------|--------------|--------------|
| Dashboard | `index.html` | Gradient | Dashboard |
| Repair Orders | `repair-orders.html` | White/dark solid | Repair Orders |
| Customers | `customers.html` | Gradient | Customers |
| Appointments | `appointments.html` | Gradient | Appointments |

## Key Pattern: Active Link Per Page

When constructing the header for each page, only ONE nav link should use the active style (`bg-white/20 text-white shadow-sm`). All others use inactive (`text-blue-100 hover:...`). This applies to both desktop and mobile nav link lists.