/* ======================================================================== GPS Sidebar — Dark Icon-Rail Theme ======================================================================== */ :root { --sidebar-expanded: 220px; --sidebar-collapsed: 56px; --sidebar-bg: var(--glorion-black, #0E0E0F); --sidebar-border: var(--glorion-border, #2A2A2B); --sidebar-hover: var(--glorion-surface, #161617); --sidebar-active: var(--glorion-gold, #C39B5A); --sidebar-active-bg: var(--glorion-gold-dim, rgba(195,155,90,0.15)); --sidebar-text: var(--glorion-text-secondary, #9A8E7A); --sidebar-text-active: var(--glorion-text-primary, #F0EBE0); --sidebar-section: var(--glorion-text-hint, #5A5650); --sidebar-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); --topbar-height: 48px; } /* ---- Sidebar base ---- */ .sidebar { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); flex-shrink: 0; background: var(--sidebar-bg); border-right: 0.5px solid var(--sidebar-border); display: flex; flex-direction: column; height: 100vh; overflow: hidden; transition: width var(--sidebar-transition), min-width var(--sidebar-transition); position: relative; z-index: 50; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Expanded state (JS toggles this class) */ .sidebar.expanded { width: var(--sidebar-expanded); min-width: var(--sidebar-expanded); } /* FOUC prevention — script adds this before paint */ html.sidebar-expanded .sidebar { width: var(--sidebar-expanded); min-width: var(--sidebar-expanded); } /* ---- Logo row ---- */ .sidebar-logo { height: var(--topbar-height); display: flex; align-items: center; padding: 0 12px; gap: 10px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-logo-mark { display: none; } .sidebar-logo-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; flex-shrink: 0; } .sidebar-logo-text { overflow: hidden; white-space: nowrap; opacity: 1; transition: opacity var(--sidebar-transition); } .sidebar:not(.expanded) .sidebar-logo-text { opacity: 0; width: 0; pointer-events: none; } html:not(.sidebar-expanded) .sidebar:not(.expanded) .sidebar-logo-text { opacity: 0; width: 0; } .sidebar-logo-text div:first-child { font-size: 13px; font-weight: 600; color: var(--sidebar-active); letter-spacing: 0.08em; line-height: 1.2; } .sidebar-logo-sub { font-size: 10px; color: var(--sidebar-text); line-height: 1.2; } /* ---- Nav scroll area ---- */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 8px 0; scrollbar-width: thin; scrollbar-color: var(--sidebar-border) transparent; } .sidebar-nav::-webkit-scrollbar { width: 4px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 4px; } /* ---- Section labels ---- */ .sidebar .nav-section { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sidebar-section); padding: 12px 16px 4px; overflow: hidden; white-space: nowrap; transition: opacity var(--sidebar-transition), max-height var(--sidebar-transition), padding var(--sidebar-transition); max-height: 40px; } .sidebar:not(.expanded) .nav-section { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; } /* ---- Dividers (visible only when collapsed) ---- */ .sidebar .nav-divider { height: 1px; background: var(--sidebar-border); margin: 4px 12px; display: none; } .sidebar:not(.expanded) .nav-divider { display: block; } /* ---- Nav items ---- */ .sidebar .nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin: 1px 0; border: none; background: transparent; color: var(--sidebar-text); font-size: 13px; font-weight: 400; cursor: pointer; position: relative; text-decoration: none; text-align: left; border-radius: 0; transition: background var(--sidebar-transition), color var(--sidebar-transition); font-family: inherit; line-height: 1.3; outline: none; } .sidebar .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); } .sidebar .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active); } .sidebar .nav-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--sidebar-active); border-radius: 0 2px 2px 0; } .sidebar .nav-item.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; } /* ---- Nav badge (notification dot/count) ---- */ .sidebar .nav-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; margin-left: auto; flex-shrink: 0; animation: nav-badge-pulse 2s ease-in-out infinite; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); } /* Collapsed sidebar — position badge on top-right of icon */ .sidebar:not(.expanded) .nav-badge { position: absolute; top: 2px; right: 6px; margin-left: 0; min-width: 16px; height: 16px; font-size: 9px; line-height: 16px; padding: 0 4px; } @keyframes nav-badge-pulse { 0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); } } /* ---- Nav icon ---- */ .sidebar .nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar .nav-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .sidebar .nav-item.active .nav-icon { color: var(--sidebar-active); } /* ---- Nav label ---- */ .sidebar .nav-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 1; transition: opacity var(--sidebar-transition); } .sidebar:not(.expanded) .nav-label { opacity: 0; width: 0; pointer-events: none; position: absolute; } /* ---- Tooltips (collapsed state only) ---- */ .sidebar .nav-item[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--glorion-surface-2, #1E1E1F); color: var(--sidebar-text-active); border: 1px solid var(--sidebar-border); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .sidebar:not(.expanded) .nav-item:hover::after { opacity: 1; } .sidebar.expanded .nav-item[data-tooltip]::after { display: none; } /* ---- User row ---- */ .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--glorion-border, #2A2A2B); color: var(--sidebar-text-active); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', 'Consolas', monospace; font-weight: 500; font-size: 13px; flex-shrink: 0; } .sidebar-user-info { overflow: hidden; flex: 1; min-width: 0; opacity: 1; transition: opacity var(--sidebar-transition); } .sidebar:not(.expanded) .sidebar-user-info { opacity: 0; width: 0; pointer-events: none; } .sidebar-user-name { font-size: 13px; font-weight: 500; color: var(--sidebar-text-active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 11px; color: var(--sidebar-text); white-space: nowrap; text-transform: capitalize; } /* Theme toggle button */ .sidebar-theme-toggle { background: none; border: none; color: var(--sidebar-text); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--sidebar-transition); } .sidebar-theme-toggle:hover { color: var(--glorion-gold, #C39B5A); } .sidebar:not(.expanded) .sidebar-theme-toggle { opacity: 0; width: 0; pointer-events: none; position: absolute; } /* Logout button */ .sidebar-logout { background: none; border: none; color: var(--sidebar-text); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--sidebar-transition); } .sidebar-logout:hover { color: var(--sidebar-text-active); } .sidebar:not(.expanded) .sidebar-logout { opacity: 0; width: 0; pointer-events: none; position: absolute; } /* ---- Toggle button ---- */ .sidebar-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: none; border-top: 1px solid var(--sidebar-border); background: transparent; color: var(--sidebar-text); cursor: pointer; width: 100%; font-size: 13px; font-family: inherit; flex-shrink: 0; transition: color var(--sidebar-transition); outline: none; } .sidebar-toggle:hover { color: var(--sidebar-text-active); } .toggle-icon { transition: transform var(--sidebar-transition); flex-shrink: 0; } .sidebar.expanded .toggle-icon { transform: rotate(180deg); } /* ---- Hamburger button ---- */ .hamburger-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--glorion-text-primary, #F0EBE0); cursor: pointer; border-radius: 8px; flex-shrink: 0; } .hamburger-btn:hover { background: var(--glorion-surface-2, #1E1E1F); } .hamburger-btn svg { width: 24px; height: 24px; } /* ---- Sidebar backdrop ---- */ .sidebar-backdrop { display: none; } /* ---- Modal guard ---- */ body.modal-open .sidebar-toggle { pointer-events: none; opacity: 0.3; } body.modal-open .hamburger-btn { pointer-events: none; opacity: 0.3; } /* ======================================================================== TABLET / MOBILE SIDEBAR (≤1279px) ======================================================================== */ @media (max-width: 1279px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; height: 100dvh; width: 260px !important; min-width: 260px !important; transform: translateX(-100%); transition: transform var(--sidebar-transition); z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,0.3); overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sidebar.mobile-open { transform: translateX(0); } /* Force expanded look on mobile/tablet */ .sidebar .nav-label { opacity: 1 !important; width: auto !important; position: static !important; pointer-events: auto !important; } .sidebar .nav-section { max-height: 40px !important; padding: 12px 16px 4px !important; opacity: 1 !important; } .sidebar .nav-divider { display: none !important; } .sidebar .sidebar-logo-text { opacity: 1 !important; width: auto !important; } .sidebar .sidebar-user-info { opacity: 1 !important; width: auto !important; } .sidebar .sidebar-logout { opacity: 1 !important; width: auto !important; position: static !important; pointer-events: auto !important; } .sidebar .sidebar-theme-toggle { opacity: 1 !important; width: auto !important; position: static !important; pointer-events: auto !important; } /* Safe area padding for iOS home bar */ .sidebar .sidebar-user { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 10; } /* Touch-friendly tap targets for logout + theme toggle */ .sidebar .sidebar-logout, .sidebar .sidebar-theme-toggle { min-width: 44px; min-height: 44px; padding: 10px; } /* Hide desktop toggle on mobile */ .sidebar-toggle { display: none !important; } /* Show hamburger */ .hamburger-btn { display: flex !important; } /* Backdrop */ .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 190; opacity: 0; pointer-events: none; transition: opacity var(--sidebar-transition); } .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; } /* FOUC: don't apply expanded width on mobile/tablet */ html.sidebar-expanded .sidebar { width: 260px !important; min-width: 260px !important; } } /* ======================================================================== MOBILE ONLY (≤767px) — full-width sidebar ======================================================================== */ @media (max-width: 767px) { .sidebar { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; } html.sidebar-expanded .sidebar { width: 100vw !important; min-width: 100vw !important; } } /* ======================================================================== DESKTOP (≥1280px) — push layout, no hamburger ======================================================================== */ @media (min-width: 1280px) { .hamburger-btn { display: none !important; } .sidebar-backdrop { display: none !important; } .sidebar { position: relative; transform: none; } /* Tooltip needs overflow visible on desktop */ .sidebar .nav-item { overflow: visible; } }