/* Inter + Plus Jakarta Sans are loaded via in App.razor (preconnected). */
/* ════════════════════════════════════════════════════════════════════════
BEEVYL DESIGN LANGUAGE
────────────────────────────────────────────────────────────────────────
Philosophy — a boutique enterprise system, not a colour swap:
• Deep forest green is the ONE confident brand colour (primary actions,
links, monogram avatars). Lime is a rare *jewel* accent — the logo, an
active indicator, a live dot — never a large fill.
• Neutrals are a warm greige with a faint green undertone, so every
surface belongs to one family.
• Semantics are muted & earthy (ochre / brick / slate-blue), never stock
primaries — this is what reads "designed".
• Depth is quiet: hairline borders, soft warm shadows, generous space.
• Type: Plus Jakarta Sans for display/headings (echoes the geometric
wordmark), Inter for UI, body and data.
════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Neutral gray ramp (true gray — the chrome carries no hue; green lives only in the brand) ── */
--slate-50: #FAFAFA; --slate-100: #F4F4F5; --slate-200: #E9E9EB;
--slate-300: #DCDCDE; --slate-400: #B4B4B7; --slate-500: #8A8A8E;
--slate-600: #5E5E63; --slate-700: #434347; --slate-800: #29292C;
--slate-900: #191919;
/* ── Brand: forest (primary) + lime (jewel accent) ── */
--forest: #1C4A2E; /* primary — buttons, links, avatars (white text ~8.5:1) */
--forest-hover: #163B25;
--forest-deep: #10301D;
--forest-tint: #E8EEE7; /* soft green-grey — selected / active backgrounds */
--pine: #2E7D46; /* mid green — success, secondary accents */
--lime: #A6CE3A; /* jewel accent — logo, active bar, live dot */
--lime-bright: #BADB57;
--lime-soft: #EEF5D8;
--grad-brand: linear-gradient(158deg, #1C4A2E 0%, #3E8E3F 55%, #A6CE3A 100%);
--glow-forest: 0 1px 2px rgba(16, 48, 29, 0.18), 0 4px 14px rgba(16, 48, 29, 0.14);
--ring: 0 0 0 3px rgba(28, 74, 46, 0.16);
/* ── Semantic — muted & earthy (text/icon + tint bg) ── */
--success: #2E7D46; --success-bg: #E9F1E9;
--warning: #A9741A; --warning-bg: #F6EEDA;
--error: #A8443A; --error-bg: #F6E8E5;
--info: #3C6485; --info-bg: #E9EEF4;
/* ── Surfaces (neutral light gray) ── */
--bg: #F4F4F5;
--surface: #FFFFFF;
--surface-sunken: #EFEFF1;
--border: #E8E8EA;
--border-strong: #D8D8DB;
--text: #1A1A1C;
--text-muted: #59595E;
--text-subtle: #8A8A8E;
/* ── Type ── */
--font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
/* ── Radius ── */
--radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
--radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 9999px;
/* ── Elevation (warm) ── */
--shadow-xs: 0 1px 2px rgba(17, 17, 19, 0.05);
--shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.04), 0 2px 6px rgba(17, 17, 19, 0.05);
--shadow-md: 0 2px 4px rgba(17, 17, 19, 0.04), 0 10px 24px rgba(17, 17, 19, 0.08);
--shadow-lg: 0 16px 44px rgba(17, 17, 19, 0.14);
--shadow-overlay: 0 24px 60px rgba(17, 17, 19, 0.28);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: rgba(166, 206, 58, 0.35); color: var(--forest-deep); }
/* Display face for the brand's larger headings */
.logo-text, .auth-brand-text, .auth-title, .page-title, .workspace-title,
.empty-title, .empty-state-title, .panel-header-title, .settings-title {
font-family: var(--font-display);
}
/* ════════════════════════════════════════════════════════════
APP SHELL
════════════════════════════════════════════════════════════ */
.app-shell {
display: flex;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.app-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ── Sidebar shell (light, crisp) ── */
.sidebar {
width: 264px;
min-width: 264px;
background: var(--surface);
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--border);
transition: width 0.22s var(--ease), min-width 0.22s var(--ease), transform 0.25s var(--ease);
}
.sidebar-backdrop { display: none; }
.sidebar-logo {
display: flex;
align-items: center;
gap: 11px;
padding: 20px 18px 18px;
flex-shrink: 0;
}
.beevyl-logo { display: block; flex-shrink: 0; }
.logo-text {
font-weight: 700; font-size: 17px; color: var(--text);
white-space: nowrap; letter-spacing: -0.3px;
}
/* ── Sidebar scroll container ── */
.sidebar-inner {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--slate-300) transparent;
}
.sidebar-inner::-webkit-scrollbar { width: 4px; }
.sidebar-inner::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 2px; }
/* ════════════════════════════════════════════════════════════
WORKSPACE SWITCHER (global, so NavLink anchors are styled too)
════════════════════════════════════════════════════════════ */
.ws-section {
padding: 4px 12px 14px;
position: relative;
flex-shrink: 0;
}
.ws-btn {
width: 100%;
display: flex; align-items: center; gap: 10px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: 9px 11px;
cursor: pointer;
color: var(--text);
transition: all 0.15s var(--ease);
text-align: left;
}
.ws-btn:hover { background: var(--slate-50); border-color: var(--slate-400); }
.ws-btn--open { background: var(--slate-50); border-color: var(--forest); box-shadow: var(--ring); }
.ws-avatar {
width: 34px; height: 34px;
border-radius: var(--radius-md);
background: var(--forest-tint);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px; color: var(--forest);
flex-shrink: 0; transition: all 0.15s var(--ease);
}
.ws-avatar--active {
background: var(--forest);
color: #F4F4EE; box-shadow: var(--glow-forest);
}
.ws-info { flex: 1; min-width: 0; }
.ws-label {
display: block; font-size: 9.5px; font-weight: 700;
color: var(--text-subtle); text-transform: uppercase;
letter-spacing: 0.7px; line-height: 1; margin-bottom: 3px;
}
.ws-name {
display: block; font-size: 13px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.ws-chevron { color: var(--text-subtle); flex-shrink: 0; transition: transform 0.2s var(--ease); }
.ws-chevron--open { transform: rotate(180deg); }
/* ── Dropdown ── */
.ws-overlay { position: fixed; inset: 0; z-index: 205; }
.ws-dropdown {
position: absolute;
top: calc(100% + 6px); left: 12px; right: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
z-index: 210;
box-shadow: var(--shadow-overlay);
overflow: hidden;
max-height: min(60vh, 420px);
display: flex; flex-direction: column;
animation: dropdownIn 0.15s var(--ease);
}
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ws-dropdown-header {
padding: 12px 14px 8px; font-size: 10px; font-weight: 700;
color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.7px;
flex-shrink: 0;
}
.ws-loading, .ws-empty {
display: flex; align-items: center; gap: 8px;
padding: 16px 14px; font-size: 13px; color: var(--text-muted);
}
.ws-list { overflow-y: auto; padding: 0 6px 6px; scrollbar-width: thin; scrollbar-color: var(--slate-300) transparent; }
.ws-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; text-decoration: none; border-radius: var(--radius-md);
color: var(--text-muted); font-size: 13px; cursor: pointer;
transition: background 0.1s var(--ease);
}
.ws-item:hover { background: var(--slate-100); color: var(--text); text-decoration: none; }
.ws-item--current { background: var(--forest-tint); }
.ws-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--slate-400); }
.ws-dot--active { background: var(--lime); box-shadow: 0 0 0 3px rgba(166, 206, 58, 0.22); }
.ws-dot--onhold { background: var(--warning); }
.ws-dot--closing { background: var(--info); }
.ws-dot--closed { background: var(--slate-400); }
.ws-dot--pendingapproval { background: var(--warning); }
.ws-item-body { flex: 1; min-width: 0; }
.ws-item-name {
display: block; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.3;
}
.ws-item--current .ws-item-name { color: var(--forest); font-weight: 600; }
.ws-item-companies {
display: block; font-size: 11px; color: var(--text-subtle);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.ws-item-check { color: var(--forest); flex-shrink: 0; }
.ws-footer {
border-top: 1px solid var(--border); padding: 8px;
display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.ws-footer-link {
display: flex; align-items: center; padding: 7px 8px; text-decoration: none;
color: var(--text-muted); font-size: 12px; font-weight: 500;
border-radius: var(--radius-sm); transition: all 0.1s var(--ease);
}
.ws-footer-link:hover { color: var(--text); background: var(--slate-100); text-decoration: none; }
.ws-new-btn {
display: flex; align-items: center; justify-content: center; width: 100%;
padding: 9px 12px; background: var(--forest); color: #fff; border: none;
border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
cursor: pointer; transition: all 0.15s var(--ease); letter-spacing: -0.1px;
box-shadow: var(--shadow-xs);
}
.ws-new-btn:hover { background: var(--forest-hover); transform: translateY(-1px); box-shadow: var(--glow-forest); }
.ws-new-btn:active { transform: translateY(0); }
/* ════════════════════════════════════════════════════════════
SIDEBAR NAV ITEMS (global selectors reach NavLink +