# RC-005 Walkthrough — Authenticated Layout Recovery

## Status: ✅ COMPLETE

## Root Causes Identified

### 1. Tailwind CSS — Stale Compilation (PRIMARY)
The compiled `app.css` was built on **2026-07-01** (before RC-003 layouts were written).
The Tailwind CLI content scan ran with `--content "app/views/**/*.php"` via a shell glob that **doesn't work on Windows** when passed via CLI flag — resulting in zero responsive/hover classes being compiled.

**Classes MISSING from old CSS:**
- `bg-slate-900`, `bg-slate-800` (sidebar background)
- `hover:bg-*` (all hover states)
- `sm:flex`, `md:p-8`, `lg:static`, `lg:transform-none` (all responsive prefixes)
- `space-x-3`, `rounded-lg`, `inset-y-0` (layout utilities)

### 2. Layout Architecture — `fixed` Sidebar (SECONDARY)
The RC-003 sidebar used `fixed inset-y-0 left-0 w-64 ... lg:static lg:transform-none`.
On desktop this requires the `lg:static` media query to switch from `position:fixed` to `position:static`.
Without compiled `lg:*` classes, this never worked at any viewport.

---

## Fixes Applied

### Fix 1: Tailwind CSS Rebuild with Config File
- Created `tailwind.config.js` at project root with `content: ["./app/views/**/*.php", "./public/assets/js/app.js"]`
- Re-ran `build/tailwindcss.exe --config tailwind.config.js -i build/tailwind.input.css -o build/tailwind.compiled.css --minify`
- Rebuilt `public/assets/css/app.css` = Tailwind compiled CSS (52KB) + Custom Design System CSS

**New CSS includes all required utilities:**
- `bg-slate-900`, `bg-slate-800`, `hover:bg-slate-*` ✅
- `sm:*`, `md:*`, `lg:*` responsive prefixes ✅
- `space-x-3`, `rounded-lg`, `inset-y-0`, `justify-between` ✅

### Fix 2: Layout Architecture Rewrite (All 3 Portals)
Replaced the `fixed`→`lg:static` breakpoint-dependent pattern with a **CSS-driven flexbox shell** pattern.

**New layout architecture:**
```css
.admin-shell / .portal-shell {
    display: flex;       /* horizontal row */
    height: 100vh;
    overflow: hidden;
}
.admin-sidebar / .portal-sidebar {
    width: 256px;        /* always visible — normal flex child */
    min-width: 256px;    /* never collapses */
    flex-shrink: 0;
}
.admin-main / .portal-main {
    flex: 1;             /* takes remaining width */
    overflow: hidden;
}
```

**On mobile (< 1024px):** sidebar becomes `position:fixed` overlay (CSS media query, no Tailwind needed)
**On desktop (≥ 1024px):** sidebar is always in flow as a flex child

Alpine.js is still used for:
- Mobile hamburger toggle (`mobileOpen` state)
- Profile dropdown (`profileOpen` state)
- Smooth transitions

**Files rewritten:**
- `app/views/layouts/admin.php` — amber accent, Super Admin context
- `app/views/layouts/couple.php` — violet accent, workspace context
- `app/views/layouts/crew.php` — indigo accent, workspace context

---

## Files Modified

| File | Change |
|---|---|
| `tailwind.config.js` | NEW — created proper config for content scanning |
| `build/tailwind.compiled.css` | Rebuilt with full utility coverage (52KB → was 8KB) |
| `public/assets/css/app.css` | Rebuilt = Tailwind (52KB) + Custom Design System |
| `app/views/layouts/admin.php` | Rewritten with CSS flexbox shell |
| `app/views/layouts/couple.php` | Rewritten with CSS flexbox shell |
| `app/views/layouts/crew.php` | Rewritten with CSS flexbox shell |

---

## Verification

Browser state: `http://localhost/inveetaire/app/admin/workspaces/create`
- Title: "Provision Workspace — Admin · Inveetaire" ✅ (matches new layout template)
- Viewport: 1920×953 ✅ (well above lg breakpoint)
- CSS served: 65,820 bytes with all required utilities ✅