/* Sidebar — clean, uniform nav (loads last, wins over topnav-neo) */ .app-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .app-sidebar { position: sticky; top: 0; align-self: start; height: auto; max-height: none; overflow: visible; overflow-x: hidden; padding: 0.75rem 0.6rem; background: #080c12; border-right: 1px solid rgba(148, 163, 184, 0.1); } .app-sidebar-brand { padding: 0.25rem 0.5rem 0.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.08); } .app-sidebar-brand .brand-title { font-size: 0.58rem; letter-spacing: 0.14em; color: #64748b; margin: 0; } .app-sidebar-brand .brand-name { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; margin: 0.2rem 0 0; } .persona-switch.brand-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0 0.35rem 0.65rem; margin-bottom: 0.35rem; } .persona-btn { border: 1px solid rgba(148, 163, 184, 0.15); background: rgba(15, 23, 42, 0.6); color: #94a3b8; border-radius: 8px; padding: 0.45rem 0.25rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; } .brand-btn-cucina.active { color: #fdba74; border-color: rgba(251, 146, 60, 0.4); background: rgba(251, 146, 60, 0.1); } .brand-btn-foodlinkk.active { color: #7dd3fc; border-color: rgba(14, 165, 233, 0.4); background: rgba(14, 165, 233, 0.1); } .persona-nav { display: contents; } .app-sidebar-group { margin-bottom: 0.65rem; } .app-sidebar-label { font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; padding: 0.2rem 0.5rem 0.35rem; } /* Base pill — accent via modifier class */ .app-sidebar a.nav-pill { --nav-accent: #64748b; display: flex !important; align-items: center; gap: 0.5rem; width: 100%; margin: 0 0 0.2rem; padding: 0.5rem 0.55rem; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.1); background: rgba(15, 23, 42, 0.5); color: #cbd5e1 !important; font-size: 0.78rem; font-weight: 500; text-decoration: none; text-align: left; white-space: nowrap; transform: none !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; overflow: visible; isolation: auto; } .app-sidebar a.nav-pill::before, .app-sidebar a.nav-pill::after { display: none !important; content: none !important; } .app-sidebar a.nav-pill:hover { background: rgba(30, 41, 59, 0.8); border-color: rgba(148, 163, 184, 0.2); color: #f1f5f9 !important; transform: none !important; } .app-sidebar a.nav-pill.active { background: rgba(15, 23, 42, 0.95); border-color: var(--nav-accent); border-left: 3px solid var(--nav-accent); padding-left: calc(0.55rem - 2px); color: #fff !important; box-shadow: none !important; animation: none !important; } .sidebar-nav-icon { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.85rem; background: rgba(8, 12, 18, 0.9); border: 1px solid rgba(148, 163, 184, 0.12); } .app-sidebar a.nav-pill.active .sidebar-nav-icon { background: rgba(15, 23, 42, 0.95); border-color: var(--nav-accent); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .sidebar-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Per-item accent colors */ .app-sidebar a.nav-pill-wereldexport { --nav-accent: #0ea5e9; } .app-sidebar a.nav-pill-clients { --nav-accent: #38bdf8; } .app-sidebar a.nav-pill-deals { --nav-accent: #4ade80; } .app-sidebar a.nav-pill-products { --nav-accent: #a855f7; } .app-sidebar a.nav-pill-suppliers { --nav-accent: #fb923c; } .app-sidebar a.nav-pill-chat { --nav-accent: #fcd34d; } .app-sidebar a.nav-pill-reports { --nav-accent: #6366f1; } .app-sidebar a.nav-pill-herman { --nav-accent: #fbbf24; } .app-sidebar a.nav-pill-retail { --nav-accent: #0066cc; } .app-sidebar a.nav-pill-marketing { --nav-accent: #ff6b9d; } .app-sidebar a.nav-pill-beurs { --nav-accent: #b8ff3c; } .app-sidebar a.nav-pill-documents { --nav-accent: #94a3b8; } .app-sidebar a.nav-pill-telegram { --nav-accent: #2aabee; } .app-sidebar a.nav-pill-analytics { --nav-accent: #8b5cf6; } .app-sidebar a.nav-pill-agents { --nav-accent: #00e5ff; } .app-sidebar a.nav-pill-browser { --nav-accent: #14b8a6; } .app-sidebar a.nav-pill-studio { --nav-accent: #ec4899; } .app-sidebar a.nav-pill-voice { --nav-accent: #f97316; } .app-sidebar a.nav-pill-ops { --nav-accent: #22d3ee; } .app-sidebar a.nav-pill-settings { --nav-accent: #e2e8f0; } .persona-badge { display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.15rem 0.45rem; border-radius: 6px; margin-right: 0.45rem; } .brand-badge-foodlinkk { color: #7dd3fc; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.25); } .brand-badge-cucina { color: #fdba74; background: rgba(251, 146, 60, 0.12); border: 1px solid rgba(251, 146, 60, 0.25); }