/* XINGUZINHO_SIDEBAR_GRUPOS_CSS_V1 */

.sidebar .xsg-old-menu-title{
  display:none !important;
}

.sidebar .xsg-grupos-root{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}

.sidebar .xsg-grupo{
  width:100%;
  min-width:0;
}

.sidebar .xsg-grupo-header{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 7px;
  margin:2px 0;
  cursor:pointer;
  text-align:left;
  opacity:.72;
  transition:opacity .16s ease, background .16s ease;
}

.sidebar .xsg-grupo-header:hover{
  opacity:1;
  background:rgba(127,127,127,.07);
  border-radius:8px;
}

.sidebar .xsg-grupo-titulo{
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar .xsg-grupo-seta{
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  transition:transform .18s ease;
}

.sidebar .xsg-grupo.xsg-fechado > .xsg-grupo-header .xsg-grupo-seta{
  transform:rotate(-90deg);
}

.sidebar .xsg-grupo-items{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.sidebar .xsg-grupo.xsg-fechado > .xsg-grupo-items{
  display:none;
}

.sidebar .xsg-grupo-items > .menu-item{
  width:100%;
}

.sidebar .xsg-grupo.xsg-sem-itens-visiveis{
  display:none !important;
}

.sidebar .xsg-grupo-header:focus-visible{
  outline:2px solid currentColor;
  outline-offset:-2px;
  border-radius:8px;
}

/* Rolagem independente entre o menu lateral e o conteúdo da Central. */
.app {
  height: 100vh;
  height: 100dvh;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.app > .sidebar {
  min-height: 0;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.app > .sidebar > * {
  flex-shrink: 0;
}
.app > .main {
  min-height: 0;
  min-width: 0;
  overscroll-behavior-y: contain;
}

/* Barras discretas, com cores do tema e sem deslocar o conteúdo no hover. */
.app > :is(.sidebar, .main) {
  --x-scroll-thumb: #94a3b8;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--x-scroll-thumb) transparent;
}
html[data-theme="dark"] .app > :is(.sidebar, .main) {
  --x-scroll-thumb: #475569;
}
.app > :is(.sidebar, .main)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.app > :is(.sidebar, .main)::-webkit-scrollbar-track,
.app > :is(.sidebar, .main)::-webkit-scrollbar-corner {
  background: transparent;
}
.app > :is(.sidebar, .main)::-webkit-scrollbar-thumb {
  background: var(--x-scroll-thumb);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
@media (hover: hover) and (pointer: fine) {
  .app > :is(.sidebar, .main):not(:hover) {
    scrollbar-color: transparent transparent;
  }
  .app > :is(.sidebar, .main):not(:hover)::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

/* Equipe online: amplia o quadro mantendo uma margem junto ao menu. */
.sidebar > .xpc-presenca-lateral {
  margin-left: -10px;
  margin-right: -10px;
}