# Admin welcome alignment and responsiveness correction

## Objective
Fix the visible horizontal alignment and responsive composition of the JSOW admin welcome/portal page shown in the user screenshot. Preserve the established dark church-photo, lemon-green, glass aesthetic.

## Root issue already identified
`<main class="admin-main admin-shell">` combines the centered width utility with `.admin-main{margin:0!important}`, which overrides `.admin-shell{margin:auto}` and anchors the constrained content at x=0. The screenshot shows the eyebrow/title/cards clipped against and partly beyond the left viewport while the header is correctly centered.

## Files and output
- Main output: `C:\xampp\htdocs\jsowbkm\admin\portal.php`
- Modify only `C:\xampp\htdocs\jsowbkm\assets\portal\css\admin.css` unless a small semantic class correction in portal.php is truly necessary.
- Do not change backend queries, permissions, modules, text, image, navigation logic, or other admin pages.

## Required correction
- Restore the same centered max-width and balanced side gutters for `.admin-main.admin-shell` as the header at every viewport.
- Do not use negative margins or transforms.
- Desktop at 1440/1366: all portal intro, metrics, headings, and application tiles align to the header shell; nothing touches x=0. Use approximately 20–32px minimum gutters and retain max width near 1220px.
- At widths where four metric cards become cramped, use an intentional 2x2 grid before mobile. Four can remain in a row only when each card has healthy readable width.
- At 768px: balanced gutters, 2-column metrics and 2-column applications, no horizontal overflow.
- At 375px: one-column applications; metrics may use two compact columns if readable, otherwise one; header/account controls must remain within viewport; bottom nav must not cover content.
- Long display names/role names must wrap or truncate without pushing layout horizontally.
- Preserve glass styling and strong overlay.
- Review shared selectors so the fix does not break subpage `.admin-page` layouts.
- Add cache-busting version update in portal.php if CSS is changed, so the user immediately receives the correction.

## Aesthetic
Apple-like disciplined spacing and alignment: one invisible vertical grid shared by header, hero, metrics, section title, and apps. Typography and palette remain unchanged.

## Verification
- PHP lint portal.php if touched.
- Check CSS for conflicting `margin:0!important` on the combined shell.
- Verify 1440, 1366, 1024, 768, 430, and 375 widths if browser tooling is available.
- Confirm `document.documentElement.scrollWidth === document.documentElement.clientWidth` at representative widths.
