# Fourge Portal Layout System

This is the single source of truth for dashboard/profile visual structure and UI geometry.

## 1) Global Frame
- Viewport app shell: `height: 100vh`, `overflow: hidden`
- Main content gutter: `24px` all sides
- Sidebar: `width: 76px`, `top: 24px`, `left: 24px`, `height: calc(100vh - 48px)`, `border-radius: 8px`
- Main wrapper offset from sidebar: `margin-left: 100px`
- Page rhythm unit: `24px` (header spacing, card gaps, section gaps)

## 2) Theme + Background
- Background ownership is `body` via `background: var(--bg)`.
- Dark base token `--bg` is full gradient:
  - radial glow + vertical dark gradient.
- Light base token `--bg` is full gradient:
  - gray radial glow + white vertical gradient.
- Do not use `html` theme-gradient scripting for Safari chrome behavior.

## 3) Tokens
- Accent: `#F5A523`
- Card bg dark: `rgba(255,255,255,0.02)`
- Card bg light: `rgba(0,0,0,0.02)`
- Secondary card tone dark: `rgba(255,255,255,0.08)`
- Secondary card tone light: `rgba(0,0,0,0.08)`
- Border dark: `rgba(245,165,35,0.15)`
- Border light: `rgba(0,0,0,0.1)`
- Text primary dark/light: `#ffffff / #0d0d0d`
- Text secondary dark/light: `#a8a8a8 / rgba(0,0,0,0.6)`
- Text muted dark/light: `#666666 / rgba(0,0,0,0.38)`

## 4) Typography
- Font family: `Fourge`, then `-apple-system`, `BlinkMacSystemFont`, `'Segoe UI'`, `sans-serif`
- Base font size: `14px`
- Header title: `28px`, `500`, `line-height: 1.2`
- Header subtitle: `13px`
- Widget title: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
- Body table text: `12px/13px` by column importance

## 5) Card System
- Default widget shell:
  - `background: var(--card-bg)`
  - `border: 1px solid var(--border)`
  - `border-radius: 8px`
  - `padding: 18px 21px`
  - `backdrop-filter: blur(12px)` + `-webkit-backdrop-filter`
- Compact card radius (legacy generic `.card`): `4px` (do not use for new dashboard widgets)

## 6) Header + Top Right Controls
- Site header: `padding-top: 24px`, `padding-bottom: 24px`
- Right control row:
  - Search icon button: `32x32`
  - Search button to theme toggle space: `7px` (`search-wrap margin-right`)
  - Theme toggle: `32x32`
  - Theme toggle to avatar: `14px` (`avatar-wrap margin-left`)
  - Avatar button: `49x49`, circle, `2px` inner ring + `2px` accent outline

## 7) Dashboard Grids (Team)
- Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
- Row 2: `grid-template-columns: 1fr 280px`, `gap: 24`, `margin-top: 24`
- Row 3: `grid-template-columns: 1fr 1fr`, `gap: 24`, `margin-top: 24`
- Row 4 full-width: `margin-top: 24`

## 8) Stat Cards
- Card min height: `120px`
- Internal row gap: `21px`
- Label/value/sub spacing:
  - Label: `margin-bottom: 5px`
  - Value: `30px`, `400`, `letter-spacing: -0.5`, `line-height: 1.1`
  - Sub: `12px`, `margin-top: 5px`
- Icon badge: `27x27`, circle
- Icon glyph: `13x13`

## 9) Calendar
- Card uses widget shell
- Header-to-grid gap: `14px`
- Weekday label: `10px`, `600`, `letter-spacing: 0.5`
- Day cell button: `28x28`, circular
- Day number: `12px`
- Today style: bg `#F5A523`, text `#0d0d0d`, `700`
- Dots: up to 3, each `3x3`, gap `2`
- Popover:
  - Anchored left of cell: `right: calc(100% + 8px)`, vertical centered
  - `width: 210px`, `padding: 10px 12px`, `border-radius: 8px`
  - shadow `0 12px 32px rgba(0,0,0,0.45)`
  - row dot `6x6`, row text `12px`

## 10) Activity + Performance Rows
- Visible rows target: 5
- Row layout: `display:flex`, `align-items:center`, `gap:10px`
- Row spacing: `margin-top: 10px` from second row onward
- Name text: `13px`
- Meta/date text: `11px`
- Progress track: `height: 4px`, `radius: 2px`
- Percentage width slot: `min-width: 28px`

## 11) Tables
- General table layout in dashboard cards: `table-layout: fixed`, `border-collapse: collapse`
- Header cells:
  - `font-size: 10px`, `font-weight: 500`, uppercase, `letter-spacing: 0.6px`
  - bottom spacing: `padding-bottom: 12px`
- Body cells:
  - primary text: `13px`
  - secondary/metrics text: `12px`
  - row vertical spacing via cell padding: typically `5px`
- Hot Items column widths:
  - check `10%`, task `40%`, requested by `35%`, due by `15%`
- Client Highlight column widths:
  - icon `5%`, company `22%`, contact `23%`, projects `13%`, open `13%`, outstanding `12%`, paid `12%`
- Sorting rule:
  - Every visible data column header must be sortable.
  - Use clickable header controls (`SortTh`) with ascending/descending indicator.
  - Exclude only non-data utility/action columns (checkbox-only, icon-only status marker, action buttons).

## 12) Profile Page
- Container: full available content width, column, `gap: 24`
- Top row: `grid-template-columns: 1fr 280px`, `gap: 24`
- At `<=1200px`: top row stacks to one column
- Main profile card uses widget shell
- Internal card layout:
  - row `gap: 20px`
  - portrait column `width: 160px`, portrait max `140x140`, circle
  - detail grid `140px 1fr`, `row-gap: 8`, `column-gap: 12`, `margin-top: 14`
  - social row `margin-top: 14`, `gap: 8`
  - self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 30px`, `font-size: 12px`
- Right calendar card shows only tasks/events assigned to the viewed profile user
- Modal:
  - overlay: fixed inset, `z-index: 1200`, bg `rgba(0,0,0,0.58)`, blur `6px`
  - overlay padding: `24px`
  - modal width: `min(620px, 100%)`
  - modal max-height: `calc(100vh - 48px)`, `overflow-y: auto`

## 13) Radius + Geometry Rules
- Dashboard/profile widgets: `8px` radius
- Sidebar: `8px` radius
- Buttons/input/dropdowns mostly `4px` radius
- Circular elements (avatar/day/icon badges): `50%`

## 14) Z-Index Stack
- Sidebar: `200`
- Header dropdowns/tooltips: `300`
- Calendar hover popover: `1002` within card context (`card can be 1001 active`)
- Modal overlay: `1200`

## 15) Motion
- Motion vars:
  - fast `160ms`
  - base `220ms`
  - easing `cubic-bezier(0.22, 1, 0.36, 1)`
- Dropdown animation: `ui-fade-up` from `translateY(4px)` + opacity 0 -> 1

## 17) Hover Interaction Contract
- Sidebar, header icon buttons, dropdown items, and avatar menu items must show a visible hover surface before click.
- Single hover source-of-truth block controls these elements.
- Dark hover surface baseline: `#1f1f1f`.
- Light hover surface baseline: `rgba(0,0,0,0.08)`.
- Nav icon opacity must lift from muted to full on hover (`opacity: 1`).
- Hover and active must be visually distinct:
  - hover uses stronger temporary contrast (`bg` + thin border),
  - active remains persistent selected-state background.

## 16) Non-Negotiable Implementation Rules
- Keep gradient backgrounds on `html`, not `body`
- Keep widget shell values (`18px 21px`, `8px`, blur 12, border token) consistent
- Maintain global `24px` spacing rhythm for page/frame/grid gaps
- Keep team dashboard card order:
  1. Open Tasks
  2. Active Projects
  3. Net Profit
  4. Revenue (wide)
- Keep row 2 order: Recent Activity (left), Calendar (right)