/* ════════════════════════════════════════════════════════════════════
ALAT App — Shared App Chrome
--------------------------------------------------------------------
Sidebar (collapsible) + topbar + app-shell layout + app-specific
card / form / tile patterns. Built ON TOP of obsidian-shared.css
(which provides tokens, reset, typography primitives, buttons,
eyebrows, well containers).
Pages link BOTH:
And declare on body:
— suppresses marketing aurora
class="app-shell" — flex column wrapper
data-active="" — sidebar active key
════════════════════════════════════════════════════════════════════ */
/* Missing token aliases — pages were authored using --white-08, --white-12,
--accent that obsidian-shared.css doesn't define. Without these, borders
fall back to currentColor (bright white) and buttons render as black-on-
transparent. Add the missing tokens here so existing usages render
correctly without touching the upstream theme. */
:root {
--white-08: rgba(255, 255, 255, 0.08);
--white-12: rgba(255, 255, 255, 0.12);
--accent: var(--violet-signal);
}
/* ───── App-shell base layout ───── */
html, body {
/* Full-viewport app — no scrolling on body; scrolling lives inside
.app-main and .sidebar__body. */
height: 100%;
overflow: hidden;
}
body.app-shell {
display: flex;
flex-direction: row;
}
/* Auth pages (no .app-shell sidebar) get scroll back so tall forms work
on short viewports. Any page with data-app="true" but WITHOUT
.app-shell class on body opts into scroll. */
body[data-app="true"]:not(.app-shell) {
height: auto;
overflow: auto;
}
html:has(body[data-app="true"]:not(.app-shell)) {
height: auto;
overflow: auto;
}
/* ───── Tab strip (settings + future surfaces) ───── */
.app-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--white-06);
margin-bottom: 28px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab {
padding: 12px 18px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: var(--white-60);
font-family: var(--font-text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: color .15s var(--ease), border-color .15s var(--ease);
}
.app-tab:hover { color: var(--white-100); }
.app-tab.is-active {
color: var(--violet-bright);
border-bottom-color: var(--violet-signal);
}
.app-tab-panel { display: none; }
.app-tab-panel.is-active { display: block; }
/* ───── Sub-nav strip (per-dashboard tabbed sections) ───── */
/* Available foundation class for new dashboard subnavs. The 4 existing
per-dashboard subnavs (.courier-subnav, .customer-subnav,
.merchant-subnav, .inv-subnav) are NOT auto-migrated — flagged for
Kevin to decide. Override the active-pill accent per-dashboard via
--app-subnav-accent (e.g. laddr yellow, etc.). */
.app-subnav {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px;
margin-bottom: 24px;
background: var(--white-04);
border: 1px solid var(--white-06);
border-radius: var(--radius-card);
}
.app-subnav__btn {
padding: 8px 14px;
background: transparent;
border: 0;
border-radius: var(--radius-pill-soft);
color: var(--white-80);
font-family: var(--font-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
white-space: nowrap;
}
.app-subnav__btn:hover {
background: var(--white-04);
color: var(--white-100);
}
.app-subnav__btn.is-active {
background: var(--app-subnav-accent, var(--violet-signal));
color: #FFFFFF;
}
/* ───── Sidebar (left) ───── */
.sidebar {
flex-shrink: 0;
width: 264px;
height: 100vh;
background: var(--ink-2);
border-right: 1px solid var(--white-06);
display: flex;
flex-direction: column;
z-index: 40;
transition: width .25s var(--ease);
position: relative;
}
body.sidebar-collapsed .sidebar {
width: 72px;
}
/* Sidebar brand row — wraps the logo link + retract toggle on one line.
The retract is the primary collapse trigger per Kevin 2026-05-21. */
.sidebar__brand-row {
display: flex;
align-items: center;
gap: 8px;
padding-right: 10px;
border-bottom: 1px solid var(--white-06);
}
.sidebar__brand {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 18px 8px 18px 22px;
text-decoration: none;
color: inherit;
}
.sidebar__brand img {
width: 32px; height: 32px;
display: block;
flex-shrink: 0;
}
.sidebar__brand-text {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--white-100);
letter-spacing: -0.01em;
white-space: nowrap;
opacity: 1;
transition: opacity .15s var(--ease);
}
body.sidebar-collapsed .sidebar__brand-text { display: none; }
/* Retract button — small icon-only on the brand row. The chevron flips
horizontally when the sidebar is collapsed so the affordance reads
"expand" in collapsed state. */
.sidebar__retract {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--white-06);
border-radius: 8px;
color: var(--white-60);
cursor: pointer;
font-size: 12px;
transition: all .15s var(--ease);
}
.sidebar__retract:hover {
background: var(--white-04);
color: var(--white-100);
border-color: var(--white-12);
}
.sidebar__retract:focus-visible {
outline: 2px solid var(--violet-signal);
outline-offset: 2px;
}
.sidebar__retract i { transition: transform .25s var(--ease); }
body.sidebar-collapsed .sidebar__retract i { transform: rotate(180deg); }
/* When collapsed, hide the retract button (the brand row shrinks too
small to host it cleanly). The topbar menu button + footer toggle
remain available to re-expand. */
body.sidebar-collapsed .sidebar__retract {
opacity: 0;
pointer-events: none;
}
/* Sidebar nav body (scrolls if long) */
.sidebar__body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar__body::-webkit-scrollbar { width: 3px; }
.sidebar__body::-webkit-scrollbar-thumb { background: var(--white-06); border-radius: 3px; }
/* Nav section labels */
.sidebar__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white-40);
padding: 16px 12px 8px;
white-space: nowrap;
opacity: 1;
transition: opacity .15s var(--ease);
}
body.sidebar-collapsed .sidebar__label { display: none; }
/* Nav items */
.sidebar__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: var(--white-80);
text-decoration: none;
transition: background .15s var(--ease), color .15s var(--ease);
white-space: nowrap;
position: relative;
}
.sidebar__item:hover {
background: var(--white-04);
color: var(--white-100);
}
.sidebar__item.is-active {
background: var(--violet-soft);
color: var(--violet-bright);
}
.sidebar__item.is-active::before {
content: '';
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 22px;
border-radius: 2px;
background: var(--violet-signal);
}
.sidebar__item-icon {
width: 18px; height: 18px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.sidebar__item-label {
flex: 1;
opacity: 1;
transition: opacity .15s var(--ease);
}
body.sidebar-collapsed .sidebar__item-label { display: none; }
body.sidebar-collapsed .sidebar__item { justify-content: center; }
body.sidebar-collapsed .sidebar__item.is-active::before { left: 4px; }
/* Sidebar footer — user pill + collapse toggle */
.sidebar__footer {
border-top: 1px solid var(--white-06);
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar__user {
display: flex; align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: var(--white-04);
border: 1px solid var(--white-06);
text-decoration: none;
color: inherit;
}
.sidebar__user-avatar {
width: 32px; height: 32px;
flex-shrink: 0;
border-radius: 50%;
background: var(--violet-signal);
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
}
.sidebar__user-text { flex: 1; min-width: 0; opacity: 1; transition: opacity .15s var(--ease); }
/* Stack name over role (both are s — make them block so "Customer" sits
below the name instead of running into it: "Ali SalminCustomer"). */
.sidebar__user-name { display: block; font-size: 13px; font-weight: 600; color: var(--white-100); line-height: 1.2; }
.sidebar__user-role { display: block; font-size: 11px; color: var(--white-60); margin-top: 2px; }
body.sidebar-collapsed .sidebar__user-text { display: none; }
body.sidebar-collapsed .sidebar__user { justify-content: center; padding: 8px 0; }
/* ─── Collapsed sidebar — icon alignment polish (Kevin 2026-05-21) ───
When the sidebar shrinks to 72px, all icon-bearing rows (brand logo,
nav items, retract spacer, footer user avatar, "+" hire action) need
to align on the same vertical centerline. Without these overrides
each row inherits its expanded-state padding and the icons drift
left, looking misaligned. */
body.sidebar-collapsed .sidebar__brand-row {
padding-right: 0;
justify-content: center;
}
body.sidebar-collapsed .sidebar__brand {
padding: 18px 0;
justify-content: center;
gap: 0;
}
body.sidebar-collapsed .sidebar__item {
padding-left: 0;
padding-right: 0;
}
body.sidebar-collapsed .sidebar__item-icon {
width: 100%;
justify-content: center;
}
body.sidebar-collapsed .sidebar__footer {
padding: 10px 0;
align-items: center;
}
body.sidebar-collapsed .sidebar__toggle {
width: 40px;
}
.sidebar__toggle {
display: flex; align-items: center; justify-content: center;
width: 100%;
padding: 8px;
border-radius: 8px;
border: 1px solid var(--white-06);
background: transparent;
color: var(--white-60);
cursor: pointer;
font-size: 14px;
transition: all .15s var(--ease);
}
.sidebar__toggle:hover {
background: var(--white-04);
color: var(--white-100);
}
/* ───── App main (right of sidebar) ───── */
.app-main {
flex: 1;
min-width: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
/* ───── Topbar ───── */
.topbar {
flex-shrink: 0;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: var(--ink-1);
border-bottom: 1px solid var(--white-06);
z-index: 20;
}
.topbar__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--white-100);
letter-spacing: -0.01em;
}
.topbar__left {
display: flex;
align-items: center;
gap: 12px;
}
.topbar__actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Menu button (hamburger) in the topbar — visible at ALL viewport sizes.
On desktop (>720px) it toggles the sidebar collapsed state. On mobile
it opens the slide-over drawer. Handler in app-shared.js branches on
window.innerWidth at click-time. */
.topbar__btn--menu {
/* Same shape as other .topbar__btn but always visible. The
.topbar__btn--mobile legacy class is no longer needed; it still
resolves to the same base styles so old pages don't break. */
}
.topbar__back-btn {
margin-right: 2px;
color: var(--white-60);
border-color: transparent;
background: transparent;
}
.topbar__back-btn:hover {
color: var(--white-100);
background: var(--white-06);
border-color: var(--white-06);
}
.topbar__btn {
width: 38px; height: 38px;
border-radius: 10px;
border: 1px solid var(--white-06);
background: transparent;
color: var(--white-80);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all .15s var(--ease);
position: relative;
}
.topbar__btn:hover {
border-color: rgba(255,255,255,0.18);
background: var(--white-04);
color: var(--white-100);
}
.topbar__btn--badge::after {
content: '';
position: absolute;
top: 8px; right: 9px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--violet-signal);
border: 2px solid var(--ink-1);
}
/* ───── K-W7.30 · Role pill + switcher ─────
Sits in topbar__actions, between cart and account. Shows the active
role; for multi-role users, exposes a dropdown menu below. Single-role
users still see the pill (informational); they just don't get a chevron
or clickable affordance. Mirrors what GET /api/auth/me will return
once the cutover lands. */
.topbar__role-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.topbar__role-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--white-06);
background: transparent;
color: var(--white-80);
cursor: default;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
transition: all .15s var(--ease);
}
.topbar__role-pill--multi {
cursor: pointer;
}
.topbar__role-pill--multi:hover {
border-color: rgba(255,255,255,0.18);
background: var(--white-04);
color: var(--white-100);
}
.topbar__role-pill__icon {
font-size: 13px;
color: var(--violet-signal);
}
.topbar__role-pill__label {
color: var(--white-100);
}
.topbar__role-pill__sub {
padding-left: 8px;
margin-left: 2px;
border-left: 1px solid var(--white-06);
color: var(--white-60, rgba(255,255,255,0.60));
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar__role-pill__chev {
font-size: 10px;
color: var(--white-60, rgba(255,255,255,0.60));
transition: transform .15s var(--ease);
}
.topbar__role-pill[aria-expanded="true"] .topbar__role-pill__chev {
transform: rotate(180deg);
color: var(--white-100);
}
.topbar__role-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
background: var(--ink-2, #16161B);
border: 1px solid var(--white-06);
border-radius: 12px;
padding: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
z-index: 50;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity .12s var(--ease), transform .12s var(--ease);
}
.topbar__role-menu.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.topbar__role-menu__label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--white-60, rgba(255,255,255,0.60));
padding: 8px 10px 6px;
}
.topbar__role-menu__item {
display: flex;
width: 100%;
align-items: center;
gap: 12px;
padding: 10px 10px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--white-80);
text-align: left;
cursor: pointer;
transition: background .12s var(--ease);
}
.topbar__role-menu__item:hover {
background: var(--white-04);
color: var(--white-100);
}
.topbar__role-menu__item--active {
background: rgba(46, 182, 185, 0.08);
}
.topbar__role-menu__item--active:hover {
background: rgba(46, 182, 185, 0.12);
}
.topbar__role-menu__item-icon {
flex: 0 0 32px;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--white-04);
color: var(--violet-signal);
font-size: 14px;
}
.topbar__role-menu__item--active .topbar__role-menu__item-icon {
background: rgba(46, 182, 185, 0.12);
}
.topbar__role-menu__item-text {
flex: 1 1 auto;
min-width: 0;
}
.topbar__role-menu__item-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--white-100);
letter-spacing: -0.01em;
}
.topbar__role-menu__item-sub {
font-size: 12px;
color: var(--white-60, rgba(255,255,255,0.60));
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar__role-menu__item-check {
flex: 0 0 auto;
color: var(--violet-signal);
font-size: 12px;
margin-left: 4px;
}
/* Mobile (≤ 720px) — condense pill to icon-only + role label,
drop the subtitle. Keeps the chevron for multi-role users so the
tap target stays obvious. */
@media (max-width: 720px) {
.topbar__role-pill {
padding: 0 10px;
gap: 6px;
}
.topbar__role-pill__sub { display: none; }
.topbar__role-pill__label { display: none; }
.topbar__role-menu { min-width: 240px; right: -8px; }
}
/* ───── Content area ───── */
.app-content {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 28px 32px 60px;
background: var(--ink-1);
}
.app-content::-webkit-scrollbar { width: 8px; }
.app-content::-webkit-scrollbar-track { background: transparent; }
.app-content::-webkit-scrollbar-thumb { background: var(--white-06); border-radius: 4px; }
.app-content::-webkit-scrollbar-thumb:hover { background: var(--white-20, rgba(255,255,255,0.20)); }
/* ───── Page head pattern (eyebrow + h1 + lede) ───── */
.page-head {
margin-bottom: 28px;
max-width: var(--page-max-narrow, 720px);
}
.page-head .eyebrow {
margin-bottom: 14px;
}
.page-head h1 {
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
color: var(--white-100);
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 8px;
}
.page-head .lede {
font-size: 15px;
color: var(--white-80);
line-height: 1.55;
}
/* ───── App card (the workhorse) ───── */
.app-card {
background: var(--ink-2);
border: 1px solid var(--white-06);
border-radius: var(--radius-card);
padding: 22px;
position: relative;
transition: border-color .15s var(--ease);
}
.app-card:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.app-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.app-card__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--white-100);
}
.app-card__sub {
font-size: 12px;
color: var(--white-60);
margin-top: 2px;
}
/* ───── KPI tiles ───── */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.kpi-tile {
background: var(--ink-2);
border: 1px solid var(--white-06);
border-radius: var(--radius-card);
padding: 20px 22px;
}
.kpi-tile__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white-60);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Currency pill — small mono token next to the label so the .kpi-tile__value
stays a clean number (Kevin 2026-05-21: "KES" was rendering as big as the
number — moved to a label-row pill instead). K-W7.14n (2026-05-25):
"all KES in cards put in pill on the header" — pumped contrast so the pill
reads as a proper badge against the dark tile, not just smaller text. */
.kpi-tile__currency {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--violet-signal, #b8a8ff);
background: rgba(124, 92, 255, 0.14);
border: 1px solid rgba(124, 92, 255, 0.32);
padding: 3px 8px 2px;
border-radius: 999px;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
}
.kpi-tile__value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--white-100);
letter-spacing: -0.018em;
line-height: 1.0;
}
.kpi-tile__delta {
font-size: 12px;
color: var(--white-60);
margin-top: 8px;
}
.kpi-tile__delta--up { color: var(--state-ok, #5EEAB5); }
.kpi-tile__delta--down { color: var(--state-crit, #F97066); }
/* ───── Form fields (app context — denser than marketing) ───── */
.app-form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.app-form-field label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--white-60);
}
.app-form-field input,
.app-form-field select,
.app-form-field textarea {
background: var(--white-04);
border: 1px solid var(--white-06);
border-radius: var(--radius-input, 10px);
padding: 12px 14px;
color: var(--white-100);
font-family: var(--font-text);
font-size: 15px;
transition: border-color .15s var(--ease);
}
.app-form-field input:focus,
.app-form-field select:focus,
.app-form-field textarea:focus {
outline: none;
border-color: var(--violet-signal);
}
.app-form-field input::placeholder,
.app-form-field textarea::placeholder { color: var(--white-40); }
/* Select option list — without this, the dropdown popup inherits the OS
default (white-on-white in dark-mode browsers), making options invisible.
Forcing ink background + white text keeps every option readable. */
.app-form-field select option {
background: var(--ink-2, #16161B);
color: var(--white-100);
}
.app-form-field select option:checked,
.app-form-field select option:hover {
background: var(--ink-3, #1D1D23);
color: var(--white-100);
}
/* ───── Auth shell (login / register / forgot) ───── */
/* Used when the page does NOT use the sidebar+topbar app-shell —
for the auth surfaces themselves. */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: var(--ink-1);
}
.auth-card {
width: 100%;
max-width: 420px;
background: var(--ink-2);
border: 1px solid var(--white-06);
border-radius: var(--radius-card-lg);
padding: 36px 32px 32px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.40);
}
.auth-card__brand {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
}
.auth-card__brand img {
height: 40px; width: auto;
filter: brightness(1.1);
mix-blend-mode: lighten;
}
.auth-card__title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--white-100);
letter-spacing: -0.02em;
margin-bottom: 6px;
text-align: center;
}
.auth-card__sub {
font-size: 14px;
color: var(--white-60);
text-align: center;
margin-bottom: 24px;
}
.auth-card .btn-filled {
width: 100%;
justify-content: center;
margin-top: 8px;
}
.auth-card__foot {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--white-06);
text-align: center;
font-size: 13px;
color: var(--white-60);
}
.auth-card__foot a {
color: var(--violet-signal);
text-decoration: none;
font-weight: 500;
}
.auth-card__foot a:hover { color: var(--violet-bright); }
/* ───── Mobile responsive ───── */
@media (max-width: 920px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.app-content { padding: 22px 20px 50px; }
.topbar { padding: 0 18px; }
}
@media (max-width: 720px) {
/* Sidebar goes off-canvas on mobile */
body.app-shell .sidebar {
position: fixed;
left: -280px;
top: 0;
width: 280px;
transition: left .26s var(--ease);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}
body.app-shell.sidebar-mobile-open .sidebar {
left: 0;
width: 280px; /* force full drawer width, override sidebar-collapsed */
z-index: 40; /* above the scrim */
}
body.app-shell .app-main {
width: 100%;
}
/* Backdrop when mobile sidebar is open */
body.app-shell.sidebar-mobile-open::before {
content: '';
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 35;
pointer-events: auto;
}
/* Lock body scroll behind the drawer */
body.app-shell.sidebar-mobile-open { overflow: hidden; }
/* Restore label visibility on the mobile drawer (no icon-rail mode).
Now matches the display-based hiding pattern above so flex layout
works the same in both states. */
body.sidebar-collapsed.sidebar-mobile-open .sidebar__brand-text,
body.sidebar-collapsed.sidebar-mobile-open .sidebar__label { display: block; }
body.sidebar-collapsed.sidebar-mobile-open .sidebar__item-label,
body.sidebar-collapsed.sidebar-mobile-open .sidebar__user-text { display: inline; }
/* Brand row + sidebar items at full width even when collapsed-base */
body.sidebar-collapsed.sidebar-mobile-open .sidebar__item {
justify-content: flex-start;
padding-left: 16px;
padding-right: 16px;
}
body.sidebar-collapsed.sidebar-mobile-open .sidebar__brand-row {
justify-content: space-between;
}
.topbar__title { font-size: 15px; }
.auth-card { padding: 28px 24px; }
}
@media (max-width: 480px) {
.kpi-grid { grid-template-columns: 1fr; }
.app-content { padding: 18px 16px 40px; }
.page-head h1 { font-size: clamp(24px, 6vw, 32px); }
.auth-card { padding: 24px 20px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Phase 3 primitives — added 2026-05-18 for role dashboards
-----------------------------------------------------------------------
Shared building blocks for customer / merchant / courier / investor
dashboards + settings depth + Saikati polish. Pages may keep inline
copies as fallback; these shared rules will be redundant-but-harmless,
and page-level