/* ==========================================================================
   DESIGN SYSTEM — MI7 GRUPO v2.0
   pages/shell.css
   Estilos específicos do shell DS (header/toopbar/footer/leftbar) que
   complementam as classes base em style.css. Não redefine .sidebar,
   .sidebar__*, .app-header, .app-footer — apenas acrescenta peças do shell
   coexistente (menu de usuário, toopbar dinâmica, skeleton do leftbar).
   ========================================================================== */

/* ==========================================================================
   HEADER — menu do usuário
   ========================================================================== */
.header__user {
  position: relative;
}

.header__user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.header__user-name {
  font-size: var(--font-sm);
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: var(--z-header);
}

.header__user-dropdown[hidden] {
  display: none;
}

.header__user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-sm);
  text-align: left;
  transition: background-color var(--t-fast);
}

.header__user-item:hover {
  background: var(--color-bg-surface-alt);
}

/* ==========================================================================
   LEFTBAR — truncar textos longos de apps/módulos preservando alinhamento
   O demo usa overflow:hidden no pai .sidebar__item sem ellipsis no filho.
   Aqui adicionamos ellipsis ao texto sem alterar alinhamento: a regra
   mantém text-align:left herdado de .sidebar__item (style.css :280) e
   força o span a ocupar só o espaço disponível entre ícone e chevron.
   ========================================================================== */
.sidebar__item-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* ==========================================================================
   LEFTBAR — flyout quando retraída
   style.css força `max-height: 0 !important` e `.sidebar` tem
   `overflow: hidden`. Por isso o submenu absolute é clippado. Usamos
   `position: fixed` (escapa de qualquer overflow ancestral) e o JS
   atualiza `--flyout-top` / `--flyout-left` a partir do bounding rect
   do grupo. A ativação é via classe `.is-flyout` (não :hover) porque
   o :hover quebra no vão de 1px entre group.rect.right e o submenu
   fixed — o JS aplica delay de 150ms antes de fechar, tolerando o vão.
   ========================================================================== */
.sidebar.is-collapsed .sidebar__submenu.is-flyout {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed;
  top: var(--flyout-top, 0);
  left: var(--flyout-left, 64px);
  min-width: 220px;
  padding: 6px 4px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: calc(var(--z-modal) + 10);
}

.sidebar.is-collapsed .sidebar__submenu.is-flyout li,
.sidebar.is-collapsed .sidebar__submenu.is-flyout .sidebar__item--sub {
  padding: 8px 10px;
  white-space: nowrap;
  overflow: visible;
}

/* style.css:322 zera o texto de qualquer .sidebar__item-text quando
   colapsado, o que dentro do flyout esconde o display_name do módulo.
   No popover queremos ícone + texto, então restauramos a visibilidade. */
.sidebar.is-collapsed .sidebar__submenu.is-flyout .sidebar__item-text {
  opacity: 1;
  width: auto;
  overflow: visible;
  pointer-events: auto;
}

/* Tooltip padrão do DS aparece em :hover (style.css :313). Quando o
   flyout está visível o tooltip do app duplica informação — oculta. */
.sidebar.is-collapsed
  .sidebar__group:has(.sidebar__submenu.is-flyout)
  > .sidebar__group-toggle[data-tooltip]::after {
  opacity: 0;
}

/* ==========================================================================
   LEFTBAR — skeleton enquanto o fetch de permissões resolve
   ========================================================================== */
.sidebar__skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 4px;
}

.sidebar__skeleton .skeleton {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-surface-alt) 0%,
    var(--color-bg-hover) 50%,
    var(--color-bg-surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: sidebar-skeleton 1.2s infinite linear;
}

.sidebar__skeleton .skeleton--text:nth-child(1) {
  width: 70%;
}
.sidebar__skeleton .skeleton--text:nth-child(2) {
  width: 55%;
}
.sidebar__skeleton .skeleton--text:nth-child(3) {
  width: 80%;
}
.sidebar__skeleton .skeleton--text:nth-child(4) {
  width: 45%;
}

@keyframes sidebar-skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}