/* ═══════════════════════════════════════════ */
/* KITSCH Workspace — Shared Sidebar Nav      */
/* ═══════════════════════════════════════════ */

/* Hamburger Toggle Button */
.sb-toggle{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  padding:6px;margin-right:12px;
  z-index:210;position:relative;
}
.sb-toggle span{
  display:block;width:22px;height:2px;
  background:rgba(255,255,255,.85);
  border-radius:2px;
  transition:all .25s ease;
}
.sb-toggle:hover span{background:#fff}
.sb-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.sb-toggle.active span:nth-child(2){opacity:0}
.sb-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Overlay */
.sb-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.35);
  z-index:190;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.sb-overlay.open{opacity:1;pointer-events:auto}

/* Sidebar Panel */
.sb-sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:280px;
  background:#1a1a1a;
  z-index:200;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
  box-shadow:4px 0 24px rgba(0,0,0,.2);
}
.sb-sidebar.open{transform:translateX(0)}

/* Sidebar Header */
.sb-header{
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
}
.sb-header img{
  height:32px;width:auto;
  mix-blend-mode:screen;filter:invert(1);
}
.sb-header-text{
  font-family:'PT Serif',serif;
  font-size:13px;font-style:italic;
  color:rgba(255,255,255,.5);
  letter-spacing:.3px;
}

/* Home Link */
.sb-home{
  display:flex;align-items:center;gap:12px;
  padding:16px 24px;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  font-size:14px;font-weight:500;
  transition:all .15s ease;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-home:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-home-icon{font-size:18px;width:28px;text-align:center}

/* Section Label */
.sb-section-label{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.3);
  padding:20px 24px 8px;
}

/* Nav Links */
.sb-nav{list-style:none;margin:0;padding:0}
.sb-nav li a{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  font-size:13.5px;font-weight:500;
  transition:all .15s ease;
  border-left:3px solid transparent;
}
.sb-nav li a:hover{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
}
.sb-nav li a.sb-active{
  background:rgba(248,182,143,.08);
  color:#f8b68f;
  border-left-color:#f8b68f;
  font-weight:600;
}
.sb-nav-icon{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

/* Icon background colors matching workspace cards */
.sb-nav-icon.scout{background:rgba(253,232,216,.15)}
.sb-nav-icon.inventory{background:rgba(224,240,232,.15)}
.sb-nav-icon.copytool{background:rgba(232,240,254,.15)}
.sb-nav-icon.hooks{background:rgba(232,245,239,.15)}
.sb-nav-icon.adscraper{background:rgba(243,224,228,.15)}
.sb-nav-icon.reviewhub{background:rgba(232,240,254,.15)}
.sb-nav-icon.gtm{background:rgba(254,243,224,.15)}

.sb-nav-label{flex:1}
.sb-nav-badge{
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:10px;
  background:rgba(248,182,143,.15);
  color:#f8b68f;
}

/* Footer */
.sb-footer{
  margin-top:auto;
  padding:16px 24px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;
  color:rgba(255,255,255,.25);
  flex-shrink:0;
}