/* Sidebar Toggle Tab (Desktop & Mobile) */ .mobile-sidebar-trigger { position: fixed; top: var(--header-height, 120px); left: 72px; z-index: 10000; background: var(--navy, #070425); border: none; border-radius: 0; color: rgba(255, 255, 255, 0.9); padding: 12px 8px; cursor: pointer; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease; box-shadow: none; width: 32px; height: 48px; display: flex; align-items: center; justify-content: center; } .mobile-sidebar-trigger:hover { background: rgba(255, 255, 255, 0.06); } .mobile-sidebar-trigger .lucide-icon, .mobile-sidebar-trigger .lucide { font-size: 20px; width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Rotate arrow and move tab when sidebar is expanded */ body.sidebar-expanded .mobile-sidebar-trigger { left: 260px; } body.sidebar-expanded .mobile-sidebar-trigger .lucide-icon, body.sidebar-expanded .mobile-sidebar-trigger .lucide { transform: rotate(180deg); } /* ── Early-expand: prevent FOUC ───────────────────────────────────── The inline script adds .sidebar-early-expanded on BEFORE first paint. These rules mirror the expanded dimensions so the page never flashes in the collapsed state. Once app-sidebar.js runs it adds body.sidebar-expanded and takes over; the html-level class is then redundant (both selectors produce the same result). */ html.sidebar-early-expanded .app-sidebar { width: 260px; } html.sidebar-early-expanded .mobile-sidebar-trigger { left: 260px; } html.sidebar-early-expanded .mobile-sidebar-trigger .lucide-icon, html.sidebar-early-expanded .mobile-sidebar-trigger .lucide { transform: rotate(180deg); } html.sidebar-early-expanded .menu-label { opacity: 1; width: auto; } html.sidebar-early-expanded .sidebar-title { opacity: 1; max-width: 160px; } html.sidebar-early-expanded .user-details { opacity: 1; width: 140px; } /* ── Main content default margin when early-expanded ── */ html.sidebar-early-expanded .app-main { margin-left: 260px; padding: 32px clamp(20px, 3vw, 40px); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Main content margin when sidebar is collapsed (prevents jump) ── */ html.sidebar-early-collapsed .app-main { margin-left: 72px; padding: 32px clamp(20px, 3vw, 40px); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 768px) { html.sidebar-early-expanded .app-main, html.sidebar-early-collapsed .app-main { margin-left: 0 !important; padding: 24px 20px; } } /* Sidebar Base Styles - Collapsed by default on desktop */ .app-sidebar { width: 72px; height: calc(100vh - 120px); position: fixed; top: 120px; left: 0; background: var(--primary-lighter, hsl(194, 69%, 97%)); backdrop-filter: var(--glass-blur, blur(16px)); border-right: 1px solid var(--border-light, #e2e8f0); color: var(--text-dark, #1e293b); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; font-family: var(--wp--preset--font-family--main); overflow-x: hidden; overflow-y: hidden; } /* Override WordPress block layout on sidebar children */ .app-sidebar > * { max-width: none !important; width: 100% !important; box-sizing: border-box; } /* Expanded State */ body.sidebar-expanded .app-sidebar { width: 260px; } .sidebar-header { display: flex; align-items: center; position: relative; padding: 20px 12px; min-height: 60px; flex-shrink: 0; } .sidebar-title { font-size: 1.125rem; font-weight: 800; margin: 0 0 0 12px; white-space: nowrap; opacity: 0; overflow: hidden; max-width: 0; letter-spacing: -0.02em; transition: opacity 0.2s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Show title when expanded */ body.sidebar-expanded .sidebar-title { opacity: 1; max-width: 160px; } /* Close button (inside sidebar, only visible on mobile) */ button.sidebar-close, #sidebar-close { background: none; border: none; color: inherit; cursor: pointer; padding: 4px; display: none !important; align-items: center; justify-content: center; position: absolute; right: 8px; top: 20px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 4px; transition: background 0.2s ease; z-index: 100; visibility: hidden; opacity: 0; pointer-events: none; } button.sidebar-close:hover, #sidebar-close:hover { background: rgba(0, 0, 0, 0.05); } .sidebar-nav { flex: 1; padding: 0 12px; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Thin scrollbar for sidebar nav */ .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li { margin-bottom: 4px; } .sidebar-menu a { display: flex; align-items: center; padding: 12px; color: rgba(255, 255, 255, 0.7); text-decoration: none; border-radius: 4px; transition: all 0.2s ease; white-space: nowrap; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; border-left: 3px solid transparent; } .sidebar-menu a:hover, .sidebar-menu a.active { background: rgba(255, 255, 255, 0.08); color: #fff; border-left-color: rgba(255, 255, 255, 0.5); padding-left: 9px; } .collapsed .sidebar-menu a:hover, .collapsed .sidebar-menu a.active { border-left-color: transparent; padding-left: 12px; } .sidebar-menu .lucide-icon, .sidebar-menu .lucide { font-size: 20px; width: 20px; height: 20px; margin-right: 16px; flex-shrink: 0; } .collapsed .sidebar-menu .lucide-icon, .collapsed .sidebar-menu .lucide { margin-right: 0; } .menu-label { opacity: 0; overflow: hidden; width: 0; white-space: nowrap; transition: opacity 0.2s ease, width 0.2s ease; font-family: var(--wp--preset--font-family--main); } /* Show labels when expanded */ body.sidebar-expanded .menu-label { opacity: 1; width: auto; } .sidebar-footer { padding: 20px 12px; border-top: 1px solid var(--border-light, #e2e8f0); text-align: center; flex-shrink: 0; } /* Header stays full-width — never affected by sidebar */ body.has-sidebar .site-header { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; box-sizing: border-box; z-index: 1002; } /* Main content shifts to clear the sidebar (not the body/header) */ body.has-sidebar .app-main { margin-left: 72px; padding: 32px clamp(20px, 3vw, 40px); transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.has-sidebar.sidebar-expanded .app-main { margin-left: 260px; } /* ── User Badge ──────────────────────────────────────────── */ .adamiro-user-badge { padding: 0 12px 16px; } .user-badge-inner { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.03); transition: background 0.2s ease; } .user-badge-inner:hover { background: rgba(0, 0, 0, 0.06); } .user-avatar { flex-shrink: 0; } .user-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-light, #e2e8f0); display: block; } .user-details { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; opacity: 0; width: 0; transition: opacity 0.2s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } body.sidebar-expanded .user-details { opacity: 1; width: 140px; } .user-name { font-size: 0.875rem; font-weight: 700; color: var(--text-dark, #1e293b); letter-spacing: -0.01em; text-overflow: ellipsis; overflow: hidden; } .user-email { font-size: 0.7rem; font-weight: 500; color: var(--text, #64748b); text-overflow: ellipsis; overflow: hidden; } /* Admin bar offset — adds 32px for WP admin bar */ /* admin-bar offset removed — 152px is now the default for all users */ @media (max-width: 768px) { /* Mobile: trigger tab at left edge */ .mobile-sidebar-trigger { left: 0; } /* Show close button inside sidebar on mobile only */ button.sidebar-close, #sidebar-close { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Mobile: sidebar collapsed by default, but 20px peeks out of the left * edge so users see the affordance and know there is a menu there. * position:fixed means this doesn't affect .app-main flow; the peek * overlays the 20px left padding of .app-main (no content collision). */ .app-sidebar { height: 100vh; width: 260px; transform: translateX(calc(-100% + 20px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Mobile: show sidebar when opened */ body.sidebar-mobile-open .app-sidebar { transform: translateX(0); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3); } /* Mobile: show labels and title when opened */ body.sidebar-mobile-open .sidebar-title, body.sidebar-mobile-open .menu-label { opacity: 1; width: auto; max-width: 160px; } /* Mobile: no content offset — sidebar overlays */ body.has-sidebar .app-main, body.has-sidebar.sidebar-expanded .app-main { margin-left: 0 !important; padding: 24px 20px; } /* Mobile: show user-details when sidebar open */ body.sidebar-mobile-open .user-details { opacity: 1; width: 140px; } /* Fix header on mobile - no negative margin */ body.has-sidebar .site-header { margin-left: 0; padding-left: 0; } /* Add left padding to site branding to avoid hamburger overlap */ body.has-sidebar .site-branding { padding-left: 60px; } /* Mobile sidebar overlay */ body.sidebar-mobile-open::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Prevent body scroll when sidebar is open on mobile */ body.sidebar-mobile-open { overflow: hidden; } /* Mobile: shift trigger when sidebar is open */ body.sidebar-mobile-open .mobile-sidebar-trigger { left: 260px; } } /* ========================================================= DARK MODE OVERRIDES ========================================================= */ html[data-theme="dark"] .mobile-sidebar-trigger { background: var(--navy); color: rgba(255, 255, 255, 0.9); } html[data-theme="dark"] .mobile-sidebar-trigger:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .app-sidebar { background: var(--navy); backdrop-filter: none; border-right: 1px solid var(--navy); color: var(--white); } html[data-theme="dark"] button.sidebar-close:hover, html[data-theme="dark"] #sidebar-close:hover { background: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .user-badge-inner { background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .user-badge-inner:hover { background: rgba(255, 255, 255, 0.09); } html[data-theme="dark"] .user-avatar img { border-color: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .user-name { color: var(--white); } html[data-theme="dark"] .user-email { color: rgba(255, 255, 255, 0.5); } /* ---- Light-mode: entire sidebar ALWAYS stays dark ---- */ html[data-theme="light"] .app-sidebar { background: var(--navy); backdrop-filter: none; border-right-color: var(--navy); color: var(--white); } html[data-theme="light"] .app-sidebar .sidebar-menu .lucide-icon, html[data-theme="light"] .app-sidebar .sidebar-menu .lucide { color: rgba(255, 255, 255, 0.5); } html[data-theme="light"] .app-sidebar .sidebar-menu a:hover .lucide-icon, html[data-theme="light"] .app-sidebar .sidebar-menu a:hover .lucide, html[data-theme="light"] .app-sidebar .sidebar-menu a.active .lucide-icon, html[data-theme="light"] .app-sidebar .sidebar-menu a.active .lucide { color: rgba(255, 255, 255, 0.9); } html[data-theme="light"] .app-sidebar .user-badge-inner { background: rgba(255, 255, 255, 0.05); } html[data-theme="light"] .app-sidebar .user-badge-inner:hover { background: rgba(255, 255, 255, 0.09); } html[data-theme="light"] .app-sidebar .user-avatar img { border-color: rgba(255, 255, 255, 0.15); } html[data-theme="light"] .app-sidebar .user-name { color: var(--white); } html[data-theme="light"] .app-sidebar .user-email { color: rgba(255, 255, 255, 0.5); } html[data-theme="light"] .app-sidebar .ada-task-balance { color: var(--light-gray); } html[data-theme="light"] .app-sidebar .ada-task-balance strong { color: var(--off-white); } html[data-theme="light"] .app-sidebar .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.1); } html[data-theme="light"] .app-sidebar button.sidebar-close:hover, html[data-theme="light"] .app-sidebar #sidebar-close:hover { background: rgba(255, 255, 255, 0.12); } /* Minimize / trigger button — always dark to match sidebar */ html[data-theme="light"] .mobile-sidebar-trigger { background: var(--navy, #070425); color: rgba(255, 255, 255, 0.9); } html[data-theme="light"] .mobile-sidebar-trigger:hover { background: rgba(255, 255, 255, 0.06); } /* Override WordPress block layout content-size constraint inside app pages. Limit dashboard content to 1200px and center on wide screens. */ .app-main>*, .app-main.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 1200px; margin-left: auto; margin-right: auto; }