/* SignVerse operator-console navigation rail.
   Extracted from console.html so the SAME rail can render on other pages —
   designer.html opens the global-template builder from the console and must not
   change appearance underneath the operator. Colours come from the shared
   --sf-sidebar-* tokens in sf-core.css; only the width lives here.
   console.html owns the .shell-dependent collapse/responsive rules; this file is
   appearance only. */
:root { --sidebar-w: 248px; }

.sidebar{width:var(--sidebar-w);background:var(--sf-sidebar-bg);color:var(--sf-sidebar-text);border-right:1px solid var(--sf-sidebar-border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;z-index:20}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}
.sidebar-nav:hover{scrollbar-color:rgba(255,255,255,0.18) transparent}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;transition:background .2s}
.sidebar-nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18)}
.sidebar-logo{padding:20px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sf-sidebar-border)}
.sidebar-logo svg{color:var(--sf-sidebar-active-text)}
.sidebar-logo img{width:26px;height:26px;object-fit:contain;display:block;flex-shrink:0}
.sidebar-logo span{font-size:16px;font-weight:800;color:#fff}
.sidebar-section{padding:8px 20px;font-size:10px;font-weight:700;color:var(--sf-sidebar-text-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:12px}
/* Rendered as <div> inside console.html and as <a> by SF.initConsoleSidebar on
   other pages, so kill the link underline and inherit the rail colour. */
.sidebar-item{text-decoration:none;display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13px;font-weight:600;color:var(--sf-sidebar-text-muted);cursor:pointer;border-radius:0;border-left:3px solid transparent;transition:all .15s}
.sidebar-item:hover{background:var(--sf-sidebar-hover);color:var(--sf-sidebar-text)}
.sidebar-item.active{background:var(--sf-sidebar-active);color:var(--sf-sidebar-active-text);border-left-color:var(--sf-sidebar-active-text);font-weight:700}
.sidebar-item svg{width:18px;height:18px;flex-shrink:0}
.sidebar-item .badge{margin-left:auto;background:var(--sf-danger);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.sidebar-bottom{padding:12px 16px;border-top:1px solid var(--sf-sidebar-border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.sidebar-avatar{width:36px;height:36px;border-radius:50%;background:var(--sf-sidebar-active-text);color:#0f172a;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:13px;font-weight:700;color:var(--sf-sidebar-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:11px;color:var(--sf-sidebar-text-dim)}
.sidebar-logout{background:none;border:none;cursor:pointer;color:var(--sf-sidebar-text-dim);padding:4px}
.sidebar-logout:hover{color:var(--sf-danger)}
.sidebar-logout svg{width:18px;height:18px}