/* _astoler-nav.css
* Canonical left-sidebar nav, shared across all staff panels (Bid, PM,
* Accounting, Admin, Field, HR, Exec, Compliance) and the customer / sub
* portals. Lifted verbatim from /bid-panel/ where this pattern was
* proven first.
*
* Desktop (≥ 720px): 200px fixed left rail with section headers.
* Mobile (< 720px): horizontal scrollable pill strip across the top,
* section headers hidden, same items render inline.
*
* Uses theme tokens already defined in _astoler-shared.css:
* --accent, --text, --muted, --muted2, --panel2, --panel3, --border
*
* Markup contract:
*
* ...
*/
/* Layout note 2026-05-24: the 200px offset that clears the fixed rail
* lives on .app-shell as `padding-left` instead of `.app-views { margin-left }`.
* Why: when a child of .app-views forgot to inherit the margin (or set
* its own absolute/grid sizing), content would slip under the rail on
* narrow viewports — visible in Admin as the first KPI tile rendering
* under "Admin Panel" / "Monitoring". Moving the offset to the parent
* with box-sizing:border-box guarantees inner content can never extend
* past x=200, no matter what the descendants do.
*/
.app-shell {
display: flex;
align-items: stretch;
min-height: calc(100vh - 70px);
box-sizing: border-box;
padding-left: 200px;
}
.app-nav {
flex: 0 0 200px;
display: flex; flex-direction: column; gap: 2px;
padding: 14px 10px 24px;
background: var(--panel, #fff);
border-right: 1px solid var(--border, rgba(0,0,0,0.08));
overflow-y: auto;
/* Fixed so the rail stays put when the view scrolls. */
position: fixed;
top: 70px;
left: 0;
bottom: 0;
z-index: 5;
}
/* .app-views fills the post-padding flex track. min-width:0 keeps it
* from refusing to shrink (default flex item min-width is auto). */
.app-views { flex: 1 1 auto; min-width: 0; }
.app-nav-section {
font-size: 9px; font-weight: 800; letter-spacing: .8px;
text-transform: uppercase; color: var(--muted2, var(--muted));
padding: 10px 10px 4px; opacity: .7;
}
.app-nav-section:first-child { padding-top: 4px; }
.app-nav-item {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px; border-radius: 10px;
color: var(--muted); background: transparent; border: 1px solid transparent;
font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
letter-spacing: .25px; cursor: pointer; text-align: left;
text-decoration: none;
transition: color 120ms, background 120ms, border-color 120ms;
}
.app-nav-item:hover { color: var(--text); background: var(--panel2); }
.app-nav-item.is-active {
color: var(--accent);
background: rgba(201, 99, 66, 0.12);
border-color: rgba(201, 99, 66, 0.3);
}
.app-nav-item.is-primary {
background: var(--accent);
color: #fff;
font-weight: 800;
}
.app-nav-item.is-primary:hover { background: var(--accent); filter: brightness(1.05); }
.app-nav-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.app-nav-label { flex: 1 1 auto; min-width: 0; }
.app-nav-badge {
font-size: 10px; font-weight: 800; padding: 1px 6px;
border-radius: 999px; background: var(--panel3); color: var(--muted);
}
.app-nav-item.is-active .app-nav-badge {
background: rgba(201, 99, 66, 0.2); color: var(--accent);
}
/* Hide zero-count badges — they read as a divider, not as data. */
.app-nav-badge[data-count="0"] { display: none; }
/* Panel switcher: dropdown at the very top of the rail. */
.app-nav-switcher {
position: relative;
margin-bottom: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.app-nav-switcher-btn {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; border-radius: 10px;
background: var(--panel2); border: 1px solid var(--border);
color: var(--text);
font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
letter-spacing: .25px; cursor: pointer; text-align: left;
}
.app-nav-switcher-btn:hover { background: var(--panel3); }
.app-nav-switcher-btn::after {
content: "▾"; margin-left: auto; opacity: .55; font-size: 10px;
}
.app-nav-switcher-menu {
position: absolute; top: 100%; left: 0; right: 0;
margin-top: 4px;
background: var(--panel, #fff);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.10);
padding: 4px;
display: none;
/* Raised from 50 to 1000 (2026-05-27) so the dropdown renders above
sticky banners, tab strips, and cards. Modals/overlays in this
codebase use z-index 9000+ so the menu still sits below modals. */
z-index: 1000;
}
.app-nav-switcher.is-open .app-nav-switcher-menu { display: block; }
.app-nav-switcher-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; border-radius: 8px;
color: var(--text); text-decoration: none;
font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.app-nav-switcher-item:hover { background: var(--panel2); }
.app-nav-switcher-item.is-current {
background: rgba(201, 99, 66, 0.10); color: var(--accent);
}
.app-nav-switcher-item .app-nav-icon { font-size: 13px; }
.app-nav-switcher-group {
font-size: 9px; font-weight: 800; letter-spacing: .8px;
text-transform: uppercase; color: var(--muted2, var(--muted));
padding: 8px 10px 4px; opacity: .7;
}
.app-nav-switcher-group:first-child { padding-top: 4px; }
/* Mobile: horizontal scroll strip across the top, no fixed positioning. */
@media (max-width: 720px) {
.app-shell {
flex-direction: column;
/* Drop the 200px left padding on mobile — the rail is now a top
* scroll strip, not a fixed sidebar, so the offset would just
* push everything off-screen. */
padding-left: 0;
}
.app-nav {
flex: 0 0 auto; flex-direction: row; gap: 4px;
padding: 8px; border-right: none; border-bottom: 1px solid var(--border);
overflow-x: auto; overflow-y: visible; white-space: nowrap;
position: relative; top: 0; left: 0; bottom: auto;
/* Constrain so the scroll strip clips internally instead of growing
* to its content width and pushing the page horizontally past the
* viewport. Fix 2026-05-26: visual smoke flagged compliance + other
* mobile panels with 21px horizontal overflow tracing to nav items
* rendering at x>375 because the aside grew to fit content. */
max-width: 100%; min-width: 0; width: 100%;
}
.app-views { margin-left: 0; }
.app-nav-section { display: none; }
/* WCAG mobile tap-target (44px). The nav row stays a horizontal
scroll strip; min-height ensures each tab pill is hit-target sized
without changing typography or visual padding-x. */
.app-nav-item { padding: 7px 11px; font-size: 11px; min-height: 44px; box-sizing: border-box; }
/* Switcher: still visible on mobile but inline as a pill at the start. */
.app-nav-switcher {
margin-bottom: 0; padding-bottom: 0; border-bottom: none;
flex-shrink: 0; min-width: 140px;
}
/* WCAG mobile tap-target. Same justification as .app-nav-item above. */
.app-nav-switcher-btn { padding: 7px 11px; font-size: 11px; min-height: 44px; box-sizing: border-box; }
.app-nav-switcher-menu {
/* Mobile dropdown clip-escape (2026-05-27).
The parent .app-nav is `overflow-x: auto; overflow-y: visible`
on mobile (horizontal scroll strip). Chrome treats any non-
visible overflow axis as clipping both axes, so a position:
absolute descendant gets clipped vertically too. Switching to
position: fixed escapes that clipping context entirely. Anchored
just below the canonical header (.f-page-header is ~50px tall;
the nav strip below it is ~40-50px) at top: 96px, which puts
the menu just under the nav strip on every staff page. The
inset uses safe-area-inset-top so notched devices don't push
it under the status bar. */
position: fixed;
top: calc(96px + env(safe-area-inset-top, 0px));
left: 8px; right: auto;
min-width: 240px; max-width: calc(100vw - 16px);
}
}