/* =========================================================================
   MENU FIXADO (painel lateral)
   Um grupo da navbar (Cadastros, Fluxo, Relatórios...) pode ser fixado na
   lateral esquerda. O painel é montado por js/base/menu-fixado.js a partir
   dos itens do próprio dropdown. Só aparece a partir de 992px (navbar aberta);
   no celular o menu continua sendo o da navbar recolhida.
   ========================================================================= */

:root { --rb-menu-fixado-w: 248px; }

/* Botão "Fixar na lateral" dentro do dropdown (só desktop) */
.dropdown-pin {
  display: flex;
  align-items: center;
  gap: var(--rb-space-2);
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--rb-radius-sm);
  background: transparent;
  color: var(--rb-text-muted);
  font-size: var(--rb-fs-sm);
  text-align: left;
  transition: background-color var(--rb-dur) var(--rb-ease),
              color var(--rb-dur) var(--rb-ease);
}
.dropdown-pin:hover { background-color: var(--rb-surface-2); color: var(--rb-text); }
.dropdown-pin:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--rb-focus-ring); }
.dropdown-pin.is-pinned { color: var(--rb-primary-subtle-text); }

/* Painel */
.menu-fixado { display: none; }

@media (min-width: 992px) {
  .menu-fixado {
    position: fixed;
    top: var(--rb-navbar-h);
    left: 0;
    bottom: 0;
    z-index: 1010; /* abaixo da navbar e dos dropdowns */
    width: var(--rb-menu-fixado-w);
    display: flex;
    flex-direction: column;
    background-color: var(--rb-surface);
    border-right: 1px solid var(--rb-border);
  }
  .menu-fixado[hidden] { display: none; }

  /* Centraliza o conteúdo na área que sobra ao lado do painel.
     --mw repete a largura máxima do container em cada breakpoint. */
  body.menu-fixado-ativo > main {
    --mw: 960px;
    --livre: calc(100% - var(--rb-menu-fixado-w));
    width: min(var(--mw), var(--livre));
    margin-left: calc(var(--rb-menu-fixado-w) + (var(--livre) - min(var(--mw), var(--livre))) / 2);
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  body.menu-fixado-ativo > main { --mw: 1140px; }
}
@media (min-width: 1400px) {
  body.menu-fixado-ativo > main { --mw: var(--rb-container-max); }
}

.menu-fixado-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-space-2);
  padding: var(--rb-space-3) var(--rb-space-3) var(--rb-space-3) var(--rb-space-4);
  border-bottom: 1px solid var(--rb-border);
}
.menu-fixado-title {
  display: inline-flex;
  align-items: center;
  gap: var(--rb-space-2);
  min-width: 0;
  font-size: var(--rb-fs-base);
  font-weight: var(--rb-fw-semibold);
  color: var(--rb-text);
}
.menu-fixado-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-fixado-solta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--rb-radius);
  background: transparent;
  color: var(--rb-primary-subtle-text);
  transition: background-color var(--rb-dur) var(--rb-ease);
}
.menu-fixado-solta:hover { background-color: var(--rb-surface-2); }
.menu-fixado-solta:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--rb-focus-ring); }

/* Alça de redimensionamento (borda direita) */
.menu-fixado-alca {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 7px;
  cursor: col-resize;
  touch-action: none;
}
.menu-fixado-alca::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background-color: transparent;
  transition: background-color var(--rb-dur) var(--rb-ease);
}
.menu-fixado-alca:hover::after,
.menu-fixado-alca:focus-visible::after,
body.menu-fixado-redimensionando .menu-fixado-alca::after {
  width: 3px;
  left: 2px;
  background-color: var(--rb-primary);
}
.menu-fixado-alca:focus-visible { outline: 0; }

/* Durante o arraste: sem seleção de texto e cursor fixo */
body.menu-fixado-redimensionando {
  user-select: none;
  cursor: col-resize;
}

.menu-fixado-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--rb-space-2);
}

.menu-fixado-grupo {
  margin: var(--rb-space-3) 0 var(--rb-space-1);
  padding: 0 10px;
  font-size: var(--rb-fs-xs);
  font-weight: var(--rb-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rb-text-subtle);
}
.menu-fixado-grupo:first-child { margin-top: var(--rb-space-1); }

.menu-fixado-sep {
  margin: var(--rb-space-2) 0;
  border: 0;
  border-top: 1px solid var(--rb-border);
  opacity: 1;
}

.menu-fixado-link {
  display: flex;
  align-items: center;
  gap: var(--rb-space-2);
  padding: 6px 10px;
  border-radius: var(--rb-radius-sm);
  font-size: var(--rb-fs-base);
  color: var(--rb-text);
  text-decoration: none;
  transition: background-color var(--rb-dur) var(--rb-ease);
}
.menu-fixado-link i { color: var(--rb-text-muted); }
.menu-fixado-link:hover { background-color: var(--rb-surface-2); color: var(--rb-text); }
.menu-fixado-link:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--rb-focus-ring); }
.menu-fixado-link.active {
  background-color: var(--rb-primary-subtle);
  color: var(--rb-primary-subtle-text);
}
.menu-fixado-link.active i { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .dropdown-pin, .menu-fixado-solta, .menu-fixado-link, .menu-fixado-alca::after { transition: none; }
}