/* ============================================================================= sellfood-sidebar.css SellFood.com — Seller Dashboard Sidebar Shared across all 13 dashboard pages. Edit here once — applies everywhere. Requires: Playfair Display + DM Sans loaded in each page's . ============================================================================= */ :root { --sidebar-w: 240px; } /* ── Layout ─────────────────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--brown); height: 100vh; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; /* No scroll — ever */ } /* ── Logo block ─────────────────────────────────────────────────────────────── */ .sidebar-logo { padding: 1.2rem 1.4rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .sidebar-logo a { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 900; color: var(--cream); text-decoration: none; } .sidebar-logo a span { color: var(--amber); } .sidebar-store-name { font-size: 0.75rem; font-weight: 600; color: rgba(250,246,239,0.65); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } /* ── Nav container ──────────────────────────────────────────────────────────── */ .sidebar-nav { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* ── Section labels ─────────────────────────────────────────────────────────── */ .s-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(250,246,239,0.3); padding: 0.7rem 1.4rem 0.35rem; flex-shrink: 0; } /* ── Dividers ───────────────────────────────────────────────────────────────── */ .s-div { height: 1px; background: rgba(255,255,255,0.08); margin: 0.35rem 0; flex-shrink: 0; } /* ── Nav items ──────────────────────────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.4rem; font-size: 0.85rem; font-weight: 500; color: rgba(250,246,239,0.6); text-decoration: none; border-left: 3px solid transparent; transition: all 0.15s; flex-shrink: 0; } .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--cream); } .nav-item.active { background: rgba(212,137,26,0.15); color: var(--amber-light); border-left-color: var(--amber); } .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } /* ── Notification badge ─────────────────────────────────────────────────────── */ .notif-badge { background: var(--terracotta, #C4614A); color: white; font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 8px; margin-left: auto; } /* ── User footer ────────────────────────────────────────────────────────────── */ .sidebar-user { margin-top: auto; padding: 1rem 1.4rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .user-av { width: 34px; height: 34px; border-radius: 8px; background: var(--amber-pale); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: var(--brown); flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .u-name { font-size: 0.78rem; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-plan { font-size: 0.65rem; color: rgba(250,246,239,0.45); } .signout-btn { background: none; border: none; cursor: pointer; color: rgba(250,246,239,0.55); font-size: 0.72rem; font-weight: 600; font-family: 'DM Sans', sans-serif; padding: 0.25rem 0.4rem; border-radius: 5px; flex-shrink: 0; transition: background 0.15s; } .signout-btn:hover { background: rgba(255,255,255,0.1); } /* ── Mobile collapse (≤ 768px) ─────────────────────────────────────────────── */ .sidebar-mobile-toggle { display: none; position: fixed; top: 12px; /* Right-aligned (Session 7, BUG-38). Matches admin-nav gold-standard pattern and clears page titles that start top-left on 7 dashboard pages. Sidebar still slides in from the left; hamburger stays tappable over backdrop via z-index:1001 (backdrop 999, sidebar 1000). */ right: 12px; z-index: 1001; width: 44px; height: 44px; background: #3B2314; color: #FAF6EF; border: none; border-radius: 8px; font-size: 1.25rem; font-weight: 700; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(59,35,20,0.25); padding: 0; line-height: 1; } .sidebar-mobile-toggle:active { background: #6B3F26; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; } .sidebar-backdrop.is-visible { display: block; } @media (max-width: 768px) { .sidebar-mobile-toggle { display: flex; } /* Sidebar slides in. overflow:hidden keeps logo+footer pinned — the NAV scrolls, not the sidebar shell. */ .sidebar { position: fixed !important; top: 0; left: 0; height: 100vh; height: 100dvh; /* iOS Safari URL bar fix — keeps logout button in visible viewport */ overflow: hidden !important; transform: translateX(-100%); transition: transform 0.28s ease-out; z-index: 1000; box-shadow: 2px 0 16px rgba(0,0,0,0.25); width: 260px !important; max-width: 85vw; } .sidebar.is-open { transform: translateX(0); } /* min-height:0 lets flexbox constrain the nav to its allocated height. Without it, flex items default to min-height:auto and expand past the sidebar, so overflow-y:auto never triggers. With it, the nav is bounded and scrolls to reveal all items. */ .sidebar-nav { min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Push ALL page content below the fixed 44px hamburger strip. Session 7 Option A: applied to THREE outer wrapper conventions used across dashboard pages: .main-content — newer pages (e.g. label-maker) .main — older pages (e.g. orders, listings, mystore) .workspace — seller-blog editor (3-column grid) Hamburger is 44px tall at top:12px (bottom edge at 56px), so 64px gives ~8px breathing room. If any dashboard page uses a different outer wrapper, that page needs its selector added here. */ body { overflow-x: hidden !important; } .main, .main-content, .workspace { width: 100% !important; min-width: 0; padding-top: 64px !important; } }