/* Design tokens — three themes (Country/Dark/Light), switched via
[data-theme] on (see js/theme.js). "Country" — matching
tech.ridgeway.cloud's look — is the default. All values below are
re-mapped per theme; every other rule in this file only ever references
the variable names, never a raw colour, so the whole app re-themes
instantly. --font-display is used only for the app title/byline; every
other font-family reference uses --font. */
:root {
--font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
--font-display: var(--font);
--app-bg: #14161a;
--card-bg: #1c1f26;
--card-bg-raised: #262a33;
--border-subtle: #2c303a;
--border-strong: #3d424e;
--text-primary: #eef0f3;
--muted: #8b93a1;
--brand-accent: #4cc9f0;
--btn-primary: #3b82f6;
--btn-primary-hov: #5b9bfb;
--btn-neutral: #262a33;
--btn-neutral-hov: #323744;
--btn-neutral-text: #eef0f3;
--btn-accent: #16a184;
--btn-accent-hov: #1cbe9c;
--btn-destructive: #dc4a4a;
--btn-destructive-hov: #ea5f5f;
--gain: #34d399;
--loss: #f87171;
--warning: #fbbf24;
--warning-bg: #3a2e10;
--highlight: #eab308;
--danger-bg: #3a1414;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
--overlay-bg: rgba(8, 9, 12, 0.65);
--focus-ring: rgba(59, 130, 246, 0.35);
--radius-sm: 7px;
--radius-md: 11px;
--radius-lg: 16px;
--header-height: 53px;
}
[data-theme="light"] {
--font-display: var(--font);
--app-bg: #f2f3f6;
--card-bg: #ffffff;
--card-bg-raised: #f1f2f5;
--border-subtle: #e2e4e9;
--border-strong: #cfd2d9;
--text-primary: #171a1f;
--muted: #667085;
--brand-accent: #0891b2;
--btn-primary: #2563eb;
--btn-primary-hov: #1d4ed8;
--btn-neutral: #eceef2;
--btn-neutral-hov: #dfe2e8;
--btn-neutral-text: #171a1f;
--btn-accent: #0d9488;
--btn-accent-hov: #0b7d73;
--btn-destructive: #dc2626;
--btn-destructive-hov: #b91c1c;
--gain: #059669;
--loss: #dc2626;
--warning: #b45309;
--warning-bg: #fef3c7;
--highlight: #b45309;
--danger-bg: #fee2e2;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
--shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
--shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.14);
--overlay-bg: rgba(23, 26, 31, 0.4);
--focus-ring: rgba(37, 99, 235, 0.2);
}
/* "Country" — the default theme, matching tech.ridgeway.cloud: warm cream
paper background, near-black warm text, deep forest-green brand accent,
and an "Instrument Serif" display face for the app title (loaded from
Google Fonts in index.html). */
[data-theme="country"] {
--font-display: "Instrument Serif", Georgia, serif;
/* Same frosted-glass treatment as the two Glassmorphism themes further
down — card/raised backgrounds and borders become translucent (instead
of flat opaque colours) so the blur + gradient glow added below shows
through. Hue is unchanged, just alpha. */
--app-bg: #f4f1eb;
--card-bg: rgba(255, 255, 255, 0.5);
--card-bg-raised: rgba(232, 227, 216, 0.62);
--border-subtle: rgba(224, 219, 204, 0.55);
--border-strong: rgba(201, 190, 172, 0.7);
--text-primary: #1a1917;
--muted: #6b6558;
--brand-accent: #2a3d28;
/* Gradients instead of flat fills, mixing Country's own two brand
colours (forest green + gold) rather than introducing new hues. */
--btn-primary: linear-gradient(135deg, #2a3d28, #3a4f38);
--btn-primary-hov: linear-gradient(135deg, #3a4f38, #4a5f48);
--btn-neutral: linear-gradient(135deg, rgba(232, 227, 216, 0.75), rgba(232, 227, 216, 0.4));
--btn-neutral-hov: linear-gradient(135deg, rgba(221, 214, 194, 0.88), rgba(221, 214, 194, 0.55));
--btn-neutral-text: #1a1917;
--btn-accent: linear-gradient(135deg, #2a3d28, #93701f);
--btn-accent-hov: linear-gradient(135deg, #3a4f38, #a9832f);
--btn-destructive: linear-gradient(135deg, #a1403a, #7d322d);
--btn-destructive-hov: linear-gradient(135deg, #b94f48, #a1403a);
--gain: #3f7d4f;
--loss: #a1403a;
--warning: #a1750f;
--warning-bg: #f3e6c4;
--highlight: #8a6d1f;
--danger-bg: #f2ded9;
--shadow-sm: 0 1px 3px rgba(26, 25, 23, 0.08);
--shadow-md: 0 6px 20px rgba(26, 25, 23, 0.1);
--shadow-lg: 0 16px 48px rgba(26, 25, 23, 0.18), 0 0 40px rgba(42, 61, 40, 0.14);
--overlay-bg: rgba(26, 25, 23, 0.45);
--focus-ring: rgba(42, 61, 40, 0.25);
/* Softer, more rounded "Vision Pro" surfaces — matches both Glassmorphism themes. */
--radius-sm: 9px;
--radius-md: 16px;
--radius-lg: 22px;
/* Taller header — the title/byline block below is bigger in this theme. */
--header-height: 74px;
}
/* "Dark Glassmorphism" — Apple Vision Pro meets modern SaaS: near-black
base (#0B0F14), translucent frosted-glass cards, a purple→blue gradient
glow behind everything, and blurred surfaces for the header/sidebar/modals.
The actual blur/backdrop-filter/gradient rules live further down (search
"glass" theme) since those aren't expressible as plain colour tokens —
this block only sets the colour/shadow/radius variables every other rule
already reads. */
[data-theme="glass"] {
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--app-bg: #0b0f14;
--card-bg: rgba(255, 255, 255, 0.055);
--card-bg-raised: rgba(255, 255, 255, 0.09);
--border-subtle: rgba(255, 255, 255, 0.12);
--border-strong: rgba(255, 255, 255, 0.26);
--text-primary: #f2f5fa;
--muted: #98a2b3;
--brand-accent: #a78bfa;
--btn-primary: linear-gradient(135deg, #7c3aed, #3b82f6);
--btn-primary-hov: linear-gradient(135deg, #8b5cf6, #60a5fa);
--btn-neutral: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
--btn-neutral-hov: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.09));
--btn-neutral-text: #f2f5fa;
--btn-accent: linear-gradient(135deg, #22d3ee, #6366f1);
--btn-accent-hov: linear-gradient(135deg, #67e8f9, #818cf8);
--btn-destructive: linear-gradient(135deg, #ef4444, #dc2626);
--btn-destructive-hov: linear-gradient(135deg, #f87171, #ef4444);
--gain: #34d399;
--loss: #fb7185;
--warning: #fbbf24;
--warning-bg: rgba(251, 191, 36, 0.14);
--highlight: #c4b5fd;
--danger-bg: rgba(239, 68, 68, 0.14);
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
--shadow-md: 0 10px 32px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6), 0 0 44px rgba(124, 58, 237, 0.18);
--overlay-bg: rgba(4, 6, 9, 0.75);
--focus-ring: rgba(139, 92, 246, 0.4);
/* Softer, more rounded "Vision Pro" surfaces. */
--radius-sm: 9px;
--radius-md: 16px;
--radius-lg: 22px;
--header-height: 60px;
}
/* "Light Glassmorphism" — the same frosted-glass, blurred-surface look as
Dark Glassmorphism above, just flipped to a light base with an orange→red
gradient glow instead of purple→blue. Structural rules (blur, gradients,
large typography) live further down alongside the dark variant's. */
[data-theme="glass-light"] {
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--app-bg: #faf6f3;
--card-bg: rgba(255, 255, 255, 0.5);
--card-bg-raised: rgba(255, 255, 255, 0.72);
--border-subtle: rgba(120, 53, 15, 0.1);
--border-strong: rgba(120, 53, 15, 0.22);
--text-primary: #241a14;
--muted: #8a7468;
--brand-accent: #ea580c;
--btn-primary: linear-gradient(135deg, #f97316, #ef4444);
--btn-primary-hov: linear-gradient(135deg, #fb923c, #f87171);
--btn-neutral: linear-gradient(135deg, rgba(120, 53, 15, 0.1), rgba(120, 53, 15, 0.03));
--btn-neutral-hov: linear-gradient(135deg, rgba(120, 53, 15, 0.18), rgba(120, 53, 15, 0.08));
--btn-neutral-text: #241a14;
--btn-accent: linear-gradient(135deg, #fb7185, #f97316);
--btn-accent-hov: linear-gradient(135deg, #fda4af, #fb923c);
--btn-destructive: linear-gradient(135deg, #dc2626, #b91c1c);
--btn-destructive-hov: linear-gradient(135deg, #ef4444, #dc2626);
--gain: #059669;
--loss: #dc2626;
--warning: #b45309;
--warning-bg: rgba(180, 83, 9, 0.14);
--highlight: #c2410c;
--danger-bg: rgba(220, 38, 38, 0.1);
--shadow-sm: 0 2px 10px rgba(120, 53, 15, 0.1);
--shadow-md: 0 10px 32px rgba(120, 53, 15, 0.14);
--shadow-lg: 0 26px 64px rgba(120, 53, 15, 0.18), 0 0 44px rgba(249, 115, 22, 0.18);
--overlay-bg: rgba(250, 246, 243, 0.7);
--focus-ring: rgba(249, 115, 22, 0.35);
/* Softer, more rounded "Vision Pro" surfaces — matches the dark variant. */
--radius-sm: 9px;
--radius-md: 16px;
--radius-lg: 22px;
--header-height: 60px;
}
/* "Professional" — institutional-confidence-meets-modern-fintech: a single
deep ink-navy base throughout (no per-section light/dark flips — every
other rule in this file assumes --text-primary reads correctly against
both --app-bg and --card-bg, so unlike a marketing page this can't
literally flip a "hero" section to warm off-white without a much bigger
text-colour refactor). Warm off-white shows up instead as the dominant
TEXT colour and as a restrained highlight surface (raised cards, active
tabs), and the "one confident accent, used sparingly" is a single
electric teal — spent almost entirely on primary CTAs, the brand
wordmark, and focus rings, never on more than one element per view.
Hairline borders (8–12% white opacity) replace heavy shadows; the only
glow is a very low-opacity radial mesh behind the login screen (this
app's closest equivalent to a marketing "hero") and a barely-there
backdrop blur on the header — deliberately restrained to "glass used
once, not everywhere", unlike the three Glassmorphism-flavoured themes
above. Structural rules (grain overlay, header blur, card hover-lift,
tabular-numeral stats) live further down, alongside the other themes'. */
[data-theme="professional"] {
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--app-bg: #0b1220;
--card-bg: #101828;
--card-bg-raised: #16202f;
--border-subtle: rgba(248, 247, 244, 0.08);
--border-strong: rgba(248, 247, 244, 0.16);
--text-primary: #f8f7f4;
--muted: #8891a3;
--brand-accent: #14b8a6;
/* Deeper teal than --brand-accent for button fills specifically — the
bright #14b8a6 reads great as TEXT on navy (7.5:1) but fails WCAG AA
for the white button label on top of it (2.5:1). These two shades keep
the same hue but darken enough for the forced-white .btn text to clear
4.5:1 (see the code comment at the top of this file). */
--btn-primary: #0f766e;
--btn-primary-hov: #107a71;
--btn-neutral: rgba(248, 247, 244, 0.06);
--btn-neutral-hov: rgba(248, 247, 244, 0.1);
--btn-neutral-text: #f8f7f4;
--btn-accent: #115e59;
--btn-accent-hov: #0f766e;
--btn-destructive: #b3261e;
--btn-destructive-hov: #dc2626;
--gain: #22c55e;
--loss: #f87171;
--warning: #eab308;
--warning-bg: rgba(234, 179, 8, 0.12);
--highlight: #eab308;
--danger-bg: rgba(239, 68, 68, 0.1);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(20, 184, 166, 0.08);
--overlay-bg: rgba(5, 8, 14, 0.7);
--focus-ring: rgba(20, 184, 166, 0.35);
/* "Rounded corners consistent at 12–16px; buttons pill or 8px, pick one" —
8px for buttons/inputs (--radius-sm), 12/16 for cards and modals. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--header-height: 60px;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--app-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: 16px;
transition: background 0.2s ease, color 0.2s ease;
}
.hidden { display: none !important; }
/* thin, theme-aware scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
/* consistent, visible keyboard focus everywhere, without adding an ugly
default outline to every mouse click */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--btn-primary);
outline-offset: 2px;
}
/* ---------- Login ---------- */
.login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--app-bg);
}
.login-card {
background: var(--card-bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 36px 32px;
width: 340px;
max-width: 92vw;
box-shadow: var(--shadow-lg);
}
.app-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 0; color: var(--brand-accent); letter-spacing: -0.01em; line-height: 1.1; }
.app-byline { font-style: italic; font-family: var(--font-display); color: var(--muted); font-size: 0.85em; margin: 2px 0 0; }
.app-subtitle { color: var(--muted); margin: 14px 0 20px 0; }
/* Generic underlined text-button — used for secondary, low-emphasis actions
that don't warrant a full .btn (e.g. "Forgot password?"). */
.link-btn {
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 14px;
font-weight: 600;
color: var(--brand-accent);
cursor: pointer;
text-decoration: underline;
}
.link-btn:hover { opacity: 0.8; }
.proj-info-link { margin-left: 8px; font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: normal; color: var(--brand-accent); }
.login-forgot-link { display: block; margin: 8px 0 4px; text-align: right; }
/* ---------------------------------------------------------------------------
"Corporate" theme — modelled on invesco.com (UK). A clean, light,
institutional look: white cards on a cool light-grey page, deep "Invesco
blue" navy text, a royal-blue primary and lightly-squared corners. Inter
stands in for Invesco's grotesque brand typeface. Component-level touches
(navy header, blue tab underline, squarer cards) are further down.
--------------------------------------------------------------------------- */
[data-theme="corporate"] {
--font: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--app-bg: #eef2f7;
--card-bg: #ffffff;
--card-bg-raised: #f5f8fc;
--border-subtle: #dce3ec;
--border-strong: #c2cdda;
--text-primary: #0c1e42; /* Invesco deep navy */
--muted: #566484;
--brand-accent: #000ad2; /* Invesco blue (#000AD2, RGB 0/10/210) */
/* Exact "Invesco blue" fills; dark enough for forced-white .btn labels. */
--btn-primary: #000ad2;
--btn-primary-hov: #1a24e6;
--btn-neutral: #eef1f7;
--btn-neutral-hov: #e0e6f0;
--btn-neutral-text: #0c1e42;
--btn-accent: #1a24e6;
--btn-accent-hov: #000ad2;
--btn-destructive: #c8102e; /* institutional red */
--btn-destructive-hov: #a50d26;
--gain: #157f3c;
--loss: #c8102e;
--warning: #b26a00;
--warning-bg: rgba(178, 106, 0, 0.1);
--highlight: #000ad2;
--danger-bg: rgba(200, 16, 46, 0.08);
--shadow-sm: 0 1px 2px rgba(12, 30, 66, 0.08);
--shadow-md: 0 4px 16px rgba(12, 30, 66, 0.1);
--shadow-lg: 0 20px 48px rgba(12, 30, 66, 0.16);
--overlay-bg: rgba(12, 30, 66, 0.45);
--focus-ring: rgba(0, 10, 210, 0.35);
/* Squarer than the other themes for a corporate/institutional feel. */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--header-height: 60px;
}
/* ---------------------------------------------------------------------------
"Bread" theme — built on the deep navy of the Bread logo (#0B3661): a warm,
friendly DARK theme. White text on layered navy surfaces (matching the white
wordmark), a wheat-gold brand accent for titles/links/highlights (the crust),
and soft rounded corners echoing the rounded logo lettering.
--------------------------------------------------------------------------- */
[data-theme="bread"] {
--font: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--app-bg: #082a4d; /* a touch deeper than the logo navy so cards lift */
--card-bg: #0b3661; /* the logo navy */
--card-bg-raised: #0f416f;
--border-subtle: #1c4f80;
--border-strong: #2c6199;
--text-primary: #f4f8fc; /* near-white, like the wordmark */
--muted: #a6c1dc;
--brand-accent: #e8b96a; /* wheat-gold "crust" accent */
/* Labels are forced white (.btn), so button fills stay readable blues; the
gold shows through as the brand accent (title, links, underline, ticks). */
--btn-primary: #2f6fb3;
--btn-primary-hov: #3d82cc;
--btn-neutral: #123f6b;
--btn-neutral-hov: #17508a;
--btn-neutral-text: #eaf2fb;
--btn-accent: #1f5c9e;
--btn-accent-hov: #2a6cb3;
--btn-destructive: #d64550;
--btn-destructive-hov: #b8323c;
--gain: #4ade80;
--loss: #f87171;
--warning: #fbbf24;
--warning-bg: rgba(251, 191, 36, 0.12);
--highlight: #e8b96a;
--danger-bg: rgba(248, 113, 113, 0.12);
--shadow-sm: 0 1px 2px rgba(2, 12, 28, 0.4);
--shadow-md: 0 4px 16px rgba(2, 12, 28, 0.5);
--shadow-lg: 0 20px 48px rgba(2, 12, 28, 0.6);
--overlay-bg: rgba(4, 18, 38, 0.6);
--focus-ring: rgba(232, 185, 106, 0.4);
/* Soft, friendly rounding to echo the rounded logo lettering. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--header-height: 60px;
}
/* Country theme: title sizes match tech.ridgeway.cloud's own (89.6px hero
heading, 28.8px header wordmark) at desktop widths, scaling down smoothly
on narrow screens via clamp() so nothing overflows. The login card also
widens to give the much bigger serif title room to breathe. */
[data-theme="country"] .login-card { width: 460px; }
[data-theme="country"] .app-title {
font-size: clamp(40px, 8vw, 89.6px);
font-weight: 400;
line-height: 1.02;
}
[data-theme="country"] .app-title-sm {
font-size: clamp(18px, 3vw, 28.8px);
font-weight: 400;
}
/* The byline reads too small next to the much bigger login-screen title —
bump it up (login/signup only; the header's byline has its own rule). */
[data-theme="country"] .login-card .app-byline {
font-size: 22px;
}
.login-card label, .modal-card label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.login-card input, .modal-card input, .modal-card select {
width: 100%;
padding: 9px 11px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--card-bg-raised);
color: var(--text-primary);
font-family: var(--font);
font-size: 16px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus, .modal-card input:focus, .modal-card select:focus {
outline: none;
border-color: var(--btn-primary);
box-shadow: 0 0 0 3px var(--focus-ring);
}
/* The width:100% above targets text/email/password inputs — it also
matched the "Remember me" checkbox (still an inside .login-card),
stretching its layout box to the full row width and pushing the label
text onto the next line instead of sitting beside it. Scope it back down
to its natural size within any .checkbox-row (login or modal). */
.checkbox-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
.error-text { color: var(--loss); font-size: 14px; min-height: 16px; margin-top: 8px; }
/* ---------- Buttons ---------- */
.btn {
font-family: var(--font);
font-weight: 600;
font-size: 15px;
border: none;
border-radius: var(--radius-sm);
padding: 10px 16px;
cursor: pointer;
color: #fff;
background: var(--btn-neutral);
transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--btn-neutral-hov); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-primary-hov); box-shadow: var(--shadow-md); }
.btn-neutral { background: var(--btn-neutral); color: var(--btn-neutral-text); }
.btn-neutral:hover { background: var(--btn-neutral-hov); }
.btn-accent { background: var(--btn-accent); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--btn-accent-hov); box-shadow: var(--shadow-md); }
.btn-destructive { background: var(--btn-destructive); }
.btn-destructive:hover { background: var(--btn-destructive-hov); }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { padding: 6px 10px; font-size: 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; }
/* ---------- App shell ---------- */
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 24px;
background: var(--card-bg);
border-bottom: 1px solid var(--border-subtle);
position: relative;
z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-title-block { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.app-title-sm { font-family: var(--font-display); font-size: 21px; margin: 0; white-space: nowrap; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.header-title-block .app-byline { font-size: 14px; margin: 0; line-height: 1.1; white-space: nowrap; }
.app-version { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* Lives at the bottom of the sidebar now (not the header) — margin-top:auto
pushes it to the foot of the flex column, past whatever else is in the
menu, rather than sitting right after the last button. Still shows on
narrow screens now: the sidebar is a full-height drawer with room to
spare, unlike the cramped header it used to clutter. */
.sidebar-version { margin-top: auto; padding-top: 10px; text-align: left; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.user-email { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
.app-header { padding: 10px 12px; gap: 8px; }
.header-left { gap: 6px; }
.header-right { gap: 8px; }
.app-title-sm { font-size: 17px; }
.user-email { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
.user-email { display: none; } /* Sign Out button alone is enough context */
}
.menu-toggle {
display: inline-block;
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--text-primary);
border-radius: var(--radius-sm);
font-size: 18px;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
align-self: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-toggle:hover { background: var(--card-bg-raised); border-color: var(--border-strong); }
/* ---------- Sidebar (left menu: portfolio switch + actions) ----------
Always an off-canvas, slide-in/out burger menu — on every screen size,
not just mobile — toggled via .menu-toggle / #btnMenuToggle. */
.app-body {
display: flex;
align-items: stretch;
min-height: calc(100vh - var(--header-height));
}
.sidebar {
width: 264px;
flex-shrink: 0;
background: var(--card-bg);
border-right: 1px solid var(--border-subtle);
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 6px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 150;
transform: translateX(-100%);
transition: transform 0.22s ease;
box-shadow: var(--shadow-lg);
overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }
.sidebar-divider { height: 1px; background: var(--border-subtle); margin: 10px 0; }
/* Collapsible sidebar sections (accordion). Each .sidebar-section holds a
clickable title row that expands/collapses its .sidebar-section-body. */
.sidebar-section { border-top: 1px solid var(--border-subtle); }
.sidebar-section:first-of-type { border-top: none; }
.sidebar-section-title {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 10px;
font-size: 13px;
font-weight: 700;
color: var(--muted);
text-transform: none;
letter-spacing: 0.06em;
padding: 9px 8px;
margin: 0;
border-radius: 8px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.sidebar-section-label { flex: 1; min-width: 0; }
.sidebar-section-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
opacity: 0.65;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.sidebar-section-title:hover {
color: var(--text-primary);
background: var(--card-bg-raised);
padding-left: 12px;
}
.sidebar-section-title:hover .sidebar-section-icon { opacity: 1; transform: scale(1.14); }
.admin-group-body .sidebar-section-icon { width: 14px; height: 14px; flex-basis: 14px; }
.sidebar-chevron {
font-size: 12px;
line-height: 1;
transition: transform 0.18s ease;
transform: rotate(0deg);
}
.sidebar-section.collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-section-body {
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
padding-bottom: 10px;
/* Height is driven in JS (0 ⇆ content px ⇆ auto) so the section slides open
smoothly like invesco.com's nav, rather than snapping via display:none.
Easing/curve match a material-style ease-in-out. */
transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
}
.sidebar-section.collapsed .sidebar-section-body {
height: 0;
opacity: 0;
padding-bottom: 0;
}
/* Admin area: everything admin-only is grouped under one "Admin" section,
set off from the normal menu by a thick divider so it's clearly separate. */
.admin-group { border-top: 3px solid var(--border-strong); margin-top: 6px; }
.admin-group > .sidebar-section-title { color: var(--text-primary); }
.admin-group-body { padding-left: 8px; border-left: 2px solid var(--border-subtle); margin-left: 2px; }
.admin-group-body .sidebar-subsection { border-top: 1px solid var(--border-subtle); }
.admin-group-body .sidebar-subsection:first-of-type { border-top: none; }
.admin-group-body .sidebar-subsection > .sidebar-section-title { font-size: 12px; }
.sidebar-actions { display: flex; flex-direction: column; gap: 8px; }
.sidebar-actions .btn { margin-top: 0; }
.sidebar-viewing { display: flex; flex-direction: column; gap: 6px; }
.sidebar-viewing .select { width: 100%; }
.theme-picker-row { display: flex; align-items: center; gap: 8px; }
.theme-picker-row .select { flex: 1; }
/* Keep every sidebar control inside the menu width. Selects have an intrinsic
min-content width set by their longest