/** * customer-sidebar.css — shared styles for the canonical customer sidebar. * * The sidebar markup is server-rendered from routes/_customer-sidebar.html * (see routes/pages.js sentinel replacement). Per-page stylesheets are stripped * of the duplicated rules so every screen ships byte-identical nav. * * Includes BOTH the canonical .nav-* selectors AND the legacy .sb-* selectors * used by hub.html / twitter-hub.html / pinterest-hub.html / command-center-calendar.html, * so any future inline rendering of those class fallbacks still survives the * migration to the sentinel. */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; background: #FFFFFF; border-right: 1px solid #E2E8F0; display: flex; flex-direction: column; padding: 28px 16px; z-index: 100; overflow-y: auto; } #customer-sidebar { padding: 28px 16px; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 36px; } .sidebar-logo img { height: 30px; width: auto; } .sidebar-logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; } .sidebar-nav { display: flex; flex-direction: column; flex: 1; } .sidebar-nav-body { padding: 16px 12px; flex: 1; } .nav-section { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: #94A3B8; padding: 0 12px; margin-bottom: 8px; margin-top: 20px; } .nav-section:first-child { margin-top: 4px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: #475569; font-size: 0.88rem; font-weight: 500; transition: all 0.2s; text-decoration: none; margin-bottom: 2px; } .nav-item:hover { background: #F1F5F9; color: #0F172A; } .nav-item.active { background: #F8E5F3; color: #D81B84; border: 1px solid #F0B3D6; } .nav-icon { font-size: 1rem; width: 20px; text-align: center; } .nav-label { flex: 1; } .nav-badge { margin-left: auto; background: #D81B84; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; } .sidebar-bottom { margin-top: auto; padding: 16px 12px; border-top: 1px solid #E2E8F0; } .sidebar-replay-btn { display: none; } /* Legacy hub/calendar selectors — safety-net only. The canonical sidebar uses .nav-*; these are kept so any inline markup that still ships in a page won't render unstyled. */ .sb-section { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: #94A3B8; padding: 0 12px; margin-bottom: 8px; margin-top: 20px; font-weight: 700; } .sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; color: #475569; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; text-decoration: none; margin-bottom: 2px; } .sb-item:hover { background: #F1F5F9; color: #0F172A; } .sb-item.active { background: #F8E5F3; color: #D81B84; } .sb-icon { font-size: 1rem; min-width: 22px; text-align: center; flex-shrink: 0; } .sb-label { flex: 1; } .sb-badge { margin-left: auto; background: #D81B84; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; } /* Business switcher (lifted into shared stylesheet so ad-hoc per-page sidebars still see it). Pages that own a biz-switcher render it as a stand-alone element AFTER the sentinel so the JS that calls getElementById('biz-switcher-container') keeps working. The wrapper fixes its position at the top-left within the canonical sidebar's footprint; pages opting in add `class="has-biz-switcher"` to so the canonical nav is pushed below it. */ .biz-switcher-slot { position: fixed; top: 78px; left: 16px; width: 208px; z-index: 150; } body.has-biz-switcher #customer-sidebar { padding-top: 134px; } .biz-switcher { position: relative; margin-bottom: 20px; } /* Companion slot for hub-only Smart-Recycling panel — overlays the canonical sidebar's bottom region so it stays visible without duplicating the whole sidebar markup. */ .sidebar-bottom-slot { position: fixed; bottom: 60px; left: 16px; width: 208px; z-index: 150; } .biz-trigger { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; background: #F8FAFC; border: 1.5px solid #E2E8F0; transition: all 0.2s; } .biz-trigger:hover { border-color: #D81B84; background: #FDF2F8; } .biz-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #D81B84, #9B1FBF); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .biz-label { flex: 1; min-width: 0; } .biz-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .biz-plan { font-size: 0.68rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.06em; } .biz-caret { font-size: 0.6rem; color: #94A3B8; transition: transform 0.2s; } .biz-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 200; overflow: hidden; } .biz-dropdown.open { display: block; } .biz-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; } .biz-option:hover { background: #F8FAFC; } .biz-option.active { background: #FDF2F8; } .biz-option-logo { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #D81B84, #9B1FBF); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } .biz-option-name { font-size: 0.82rem; font-weight: 600; color: #0F172A; } .biz-divider { height: 1px; background: #E2E8F0; margin: 4px 0; } .biz-add-btn { padding: 10px 14px; font-size: 0.82rem; font-weight: 600; color: #D81B84; cursor: pointer; transition: background 0.15s; } .biz-add-btn:hover { background: #FDF2F8; } /* Mobile chrome */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 99; } .mobile-menu-btn { display: none; position: fixed; top: 16px; left: 16px; z-index: 201; width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; border: 1px solid #E2E8F0; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; color: #0F172A; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.active { display: block; } .mobile-menu-btn { display: flex; } } /* Embed mode: admin-iframe wrapper renders its own sidebar; hide ours. */ html.embed .sidebar, html.embed .sidebar-backdrop, html.embed .mobile-menu-btn, html.embed nav { display: none !important; } html.embed .main { margin-left: 0 !important; padding: 16px 32px 40px !important; }