/* ============================================================= Furrow App Sidebar – styles Loaded together with /js/sidebar.js. The sidebar only renders when a Supabase session is present in localStorage (furrow_session). When that happens, a `has-sidebar` class is added to and the main content shifts to the right. ============================================================= */ :root { --sb-w: 260px; --sb-w-collapsed: 72px; } /* Layout shift when sidebar is mounted ---------------------------- */ body.has-sidebar { padding-left: var(--sb-w); transition: padding-left 0.25s ease; } body.has-sidebar.sb-collapsed { padding-left: var(--sb-w-collapsed); } @media (max-width: 900px) { body.has-sidebar { padding-left: 0; } body.has-sidebar.sb-collapsed { padding-left: 0; } } /* The sidebar itself --------------------------------------------- */ .fw-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); background: linear-gradient(180deg, #0d1217 0%, #0b0f12 100%); border-right: 1px solid #1f2937; display: flex; flex-direction: column; z-index: 100; font: 14px/1.5 Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #e6edf3; transition: width 0.25s ease, transform 0.25s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.25); } body.sb-collapsed .fw-sidebar { width: var(--sb-w-collapsed); } /* Collapse button (lives inside the user row) -------------------- */ .fw-sidebar .sb-collapse { margin-left: auto; border: 1px solid #1f2937; background: #12181f; color: #94a3b8; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; padding: 0; flex-shrink: 0; } .fw-sidebar .sb-collapse svg { width: 16px; height: 16px; display: block; transition: transform 0.25s ease; } .fw-sidebar .sb-collapse:hover { color: #00FF88; border-color: #00FF88; } /* User pill ------------------------------------------------------ */ .fw-sidebar .sb-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #1f2937; min-height: 64px; } .fw-sidebar .sb-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #00FF88, #1ef4ff); color: #001611; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .fw-sidebar .sb-user-info { min-width: 0; flex: 1; } .fw-sidebar .sb-user-info strong { color: #fff; font-size: 0.85rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .fw-sidebar .sb-user-info span { color: #94a3b8; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; } body.sb-collapsed .fw-sidebar .sb-user-info { display: none; } /* Collapsed: avatar + button don't fit in 72px, so hide the avatar and center the collapse button. Flip chevrons to point right. */ body.sb-collapsed .fw-sidebar .sb-user { padding-left: 0; padding-right: 0; justify-content: center; } body.sb-collapsed .fw-sidebar .sb-avatar { display: none; } body.sb-collapsed .fw-sidebar .sb-collapse { margin-left: 0; } body.sb-collapsed .fw-sidebar .sb-collapse svg { transform: rotate(180deg); } /* Scrollable nav body -------------------------------------------- */ .fw-sidebar .sb-nav { flex: 1; overflow-y: auto; padding: 14px 10px 14px; scrollbar-width: thin; scrollbar-color: #1f2937 transparent; } .fw-sidebar .sb-nav::-webkit-scrollbar { width: 6px; } .fw-sidebar .sb-nav::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; } .fw-sidebar .sb-section { color: #64748b; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 14px 12px 6px; font-weight: 600; } body.sb-collapsed .fw-sidebar .sb-section { display: none; } .fw-sidebar .sb-link, .fw-sidebar .sb-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #cbd5e1; text-decoration: none; font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit; transition: background 0.15s, color 0.15s; } .fw-sidebar .sb-link:hover, .fw-sidebar .sb-toggle:hover { background: rgba(0,255,136,0.06); color: #fff; } .fw-sidebar .sb-link.active { background: rgba(0,255,136,0.12); color: #00FF88; } .fw-sidebar .sb-link.active::before { content: ''; width: 3px; height: 18px; background: #00FF88; border-radius: 2px; margin-right: -7px; } .fw-sidebar .sb-icon { width: 18px; height: 18px; flex-shrink: 0; color: currentColor; display: inline-flex; align-items: center; justify-content: center; } .fw-sidebar .sb-icon svg { width: 18px; height: 18px; } .fw-sidebar .sb-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.sb-collapsed .fw-sidebar .sb-label, body.sb-collapsed .fw-sidebar .sb-chev, body.sb-collapsed .fw-sidebar .sb-badge { display: none; } .fw-sidebar .sb-chev { width: 14px; height: 14px; color: #64748b; transition: transform 0.2s; } .fw-sidebar .sb-toggle.open .sb-chev { transform: rotate(90deg); color: #00FF88; } .fw-sidebar .sb-badge { background: rgba(0,255,136,0.15); color: #00FF88; border-radius: 999px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; } /* Sub menu ------------------------------------------------------- */ .fw-sidebar .sb-sub { display: none; flex-direction: column; gap: 2px; padding: 4px 0 6px 38px; border-left: 1px dashed #1f2937; margin: 2px 0 4px 18px; } .fw-sidebar .sb-toggle.open + .sb-sub { display: flex; } body.sb-collapsed .fw-sidebar .sb-sub { display: none !important; } .fw-sidebar .sb-sub-link { display: block; padding: 7px 10px; font-size: 0.83rem; color: #94a3b8; text-decoration: none; border-radius: 8px; transition: background 0.15s, color 0.15s; } .fw-sidebar .sb-sub-link:hover { color: #fff; background: rgba(0,255,136,0.04); } .fw-sidebar .sb-sub-link.active { color: #00FF88; } /* Footer (sign out) --------------------------------------------- */ .fw-sidebar .sb-foot { padding: 14px 12px; border-top: 1px solid #1f2937; display: flex; flex-direction: column; gap: 8px; } .fw-sidebar .sb-signout { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: transparent; border: 1px solid #1f2937; color: #cbd5e1; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 0.2s; } .fw-sidebar .sb-signout:hover { background: rgba(255,80,80,0.08); border-color: rgba(255,80,80,0.4); color: #ff8c8c; } /* Mobile drawer -------------------------------------------------- */ .fw-sb-mobile-btn { display: none; position: fixed; top: 14px; left: 14px; z-index: 110; background: #12181f; border: 1px solid #1f2937; color: #e6edf3; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; } .fw-sb-mobile-btn:hover { color: #00FF88; border-color: #00FF88; } .fw-sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: 99; } @media (max-width: 900px) { body.has-sidebar .fw-sidebar { transform: translateX(-100%); } body.has-sidebar.sb-mobile-open .fw-sidebar { transform: translateX(0); } body.has-sidebar.sb-mobile-open .fw-sb-backdrop { display: block; } body.has-sidebar .fw-sb-mobile-btn { display: inline-flex; } }