/* ── shared-sidebar.css ─────────────────────────────────────────────────────── */
/* Shared across all product pages. Include ONCE per page. */

/* Layout */
.app-layout{display:flex;height:100vh;overflow:hidden;width:100vw;}
.page-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}

/* Sidebar shell */
.sidebar{width:220px;background:#111827;display:flex;flex-direction:column;flex-shrink:0;height:100vh;overflow:hidden;transition:width .2s;}
.sidebar.collapsed{width:52px;}

/* Header */
.sb-header{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:8px;overflow:hidden;min-height:52px;}
.sb-logo{width:28px;height:28px;background:linear-gradient(135deg,#0572CE,#0B4F8A);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-logo-text{white-space:nowrap;overflow:hidden;flex:1;min-width:0;transition:opacity .2s;}
.sidebar.collapsed .sb-logo-text{opacity:0;width:0;flex:0;padding:0;margin:0;}
.sb-logo-title{font-size:12px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.sb-logo-sub{font-size:9px;color:rgba(255,255,255,.35);margin-top:1px;}
.sb-toggle{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);padding:4px;flex-shrink:0;transition:color .15s;display:flex;align-items:center;justify-content:center;width:28px;height:28px;}
.sb-toggle:hover{color:#fff;}
.sidebar.collapsed .sb-toggle{margin-left:0;}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}
.sb-nav::-webkit-scrollbar{width:3px;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}
.sb-section{padding:10px 10px 3px;font-size:8px;font-weight:700;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap;overflow:hidden;transition:opacity .2s;}
.sidebar.collapsed .sb-section{opacity:0;}

/* Nav items */
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 12px;cursor:pointer;text-decoration:none;border-left:2px solid transparent;transition:all .15s;overflow:hidden;position:relative;}
.sb-item:hover{background:rgba(255,255,255,.05);}
.sb-item.active{background:rgba(5,114,206,.15);border-left-color:#0572CE;}
.sb-item.active .sb-item-name{color:#fff;}
.sb-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-item-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;flex:1;transition:opacity .2s;}
.sb-badge{font-size:7px;font-weight:700;padding:2px 5px;border-radius:4px;white-space:nowrap;flex-shrink:0;transition:opacity .2s;}
.sb-badge.live{background:rgba(10,123,62,.25);color:#4ade80;}
.sb-badge.proto{background:rgba(154,100,0,.25);color:#fbbf24;}
.sb-badge.soon{background:rgba(255,255,255,.07);color:rgba(255,255,255,.3);}
.sidebar.collapsed .sb-item-name,.sidebar.collapsed .sb-badge{opacity:0;pointer-events:none;}

/* Collapsed state overrides */
.sidebar.collapsed .sb-header{justify-content:space-between;gap:0;padding:10px 8px;}

/* Tooltips — only visible in collapsed mode on hover */
.sb-tooltip{display:none;position:fixed;left:58px;background:#1f2937;color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:5px;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.sidebar.collapsed .sb-item:hover .sb-tooltip{display:block;}

/* Bottom connection badge */
.sb-bottom{padding:10px 12px;border-top:1px solid rgba(255,255,255,.07);overflow:hidden;}
.sb-conn{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);}
.sb-conn-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sb-conn-text{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;color:rgba(255,255,255,.5);transition:opacity .2s;}
.sidebar.collapsed .sb-conn-text{opacity:0;}

/* Toast */
.sb-toast{position:fixed;bottom:20px;left:230px;background:#1f2937;color:#fff;font-size:11px;font-weight:600;padding:8px 14px;border-radius:7px;opacity:0;transition:opacity .3s,left .2s;pointer-events:none;z-index:999;}