/* ============================================================
   Admin sidebar — APP LAYER of the design system (from console.css).
   Dark sidebar is the only place where the brand patterns (iso grid)
   live; the orange brand color is reserved for the active state.
   Typography: Inter Tight for items, JetBrains Mono for group labels.
   ============================================================ */

.sb {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #16171d 0%, #20222b 100%);
  color: #fff;
}
.sb-iso {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 84px;
}
/* The frame (.sb) keeps the pattern and stays fixed; .sb-in is the scroll
   container, so a fully expanded menu can always be scrolled. */
.sb-in {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 12px 18px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.sb-in::-webkit-scrollbar { width: 6px; }
.sb-in::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .2);
  border-radius: 99px;
}

.sb-group {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  margin: 0 0 6px;
  border: none;
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: color .12s;
}
.sb-group:hover { color: rgba(255, 255, 255, .6); }

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .66);
  cursor: pointer;
  transition: .12s;
}
.sb-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sb-item.active {
  color: #fff;
  background: rgba(231, 88, 0, .16);
  box-shadow: inset 2px 0 0 #e75800;
  border-radius: 2px;
}
.sb-item > svg:first-child {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .8;
  stroke-width: 1.8;
}