/* ====================================
   WebApp - Sidebar Styles
   ==================================== */

/* Dashboard Wrapper */
.dashboard-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Banner Super Admin ponta a ponta: fixo no topo (acima da sidebar fixa),
   empurrando sidebar, topbar e conteúdo para baixo pela sua altura. */
body.has-superadmin-banner {
  --superadmin-banner-h: 2.75rem;
}

body.has-superadmin-banner .superadmin-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  min-height: var(--superadmin-banner-h);
  margin: 0;
}

body.has-superadmin-banner .sidebar {
  top: var(--superadmin-banner-h);
  height: calc(100dvh - var(--superadmin-banner-h));
}

body.has-superadmin-banner .main-content {
  padding-top: var(--superadmin-banner-h);
}

body.has-superadmin-banner .topbar {
  top: var(--superadmin-banner-h);
}

@media (max-width: 767.98px) {
  body.has-superadmin-banner {
    --superadmin-banner-h: 3.75rem;
  }
}

/* Banner de conta bloqueada (#115) ponta a ponta: fixo no topo (acima da sidebar fixa),
   GIGANTE e persistente, empurrando sidebar, topbar e conteúdo para baixo pela sua altura.
   Só na área do cliente (Blocked só existe para investidor). */
body.has-account-blocked-banner {
  --account-blocked-banner-h: 3.5rem;
}

body.has-account-blocked-banner .account-blocked-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  min-height: var(--account-blocked-banner-h);
  margin: 0;
}

body.has-account-blocked-banner .sidebar {
  top: var(--account-blocked-banner-h);
  height: calc(100dvh - var(--account-blocked-banner-h));
}

body.has-account-blocked-banner .main-content {
  padding-top: var(--account-blocked-banner-h);
}

body.has-account-blocked-banner .topbar {
  top: var(--account-blocked-banner-h);
}

@media (max-width: 767.98px) {
  body.has-account-blocked-banner {
    --account-blocked-banner-h: 5rem;
  }
}

/* Sidebar Base */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1040;
  overflow: hidden;
  transition: transform var(--transition-speed) ease;
}

.sidebar-logo {
  /* Mesma altura do topbar para que a linha divisória da logo coincida com a
     borda inferior do header (mesmo alinhamento horizontal). */
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-logo-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  color: var(--color-surface-card);
  text-decoration: none;
}

.sidebar-logo-img {
  /* Limita largura E altura: logos altas/quadradas (ex.: Maximus) não podem
     exceder a altura do header (a sidebar tem overflow:hidden e cortaria). */
  max-width: 110px;
  max-height: calc(var(--topbar-height) - 24px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-logo-compact,
.sidebar-logo-name {
  display: none;
}

.sidebar-logo-compact {
  /* Recebe a MESMA logo branca (transparente) do header e mostra só o glifo do
     ícone (que fica à esquerda do wordmark) recortando com object-fit: cover +
     object-position à esquerda — fica branco sobre o roxo, igual ao header,
     sem o quadrado de marca colorido e sem perder nitidez. */
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
  object-position: left center;
}

.sidebar-logo-name {
  max-width: 4rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-align: center;
}

.sidebar-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 var(--spacing-sm);
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-xs) 0;
  overflow-y: auto;
  /* Scrollbar fina/discreta — não rouba largura útil dos links. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

/* Sidebar Groups */
.sidebar-group {
  margin-bottom: var(--spacing-sm);
}

.sidebar-group-title {
  padding: var(--spacing-xs) var(--menu-item-padding-x);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease;
  border-left: 3px solid transparent;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-surface-card);
}

.sidebar-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-surface-card);
  border-left-color: var(--color-surface-card);
}

.sidebar-link i {
  font-size: 1.25rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-spacer {
  /* flex: 1 removido: estava disputando espaço com .sidebar-nav (que tambem
     usa flex: 1), forcando o nav a rolar mesmo havendo viewport sobrando.
     Agora o spacer fica colapsado e o nav cresce ate caber todos os itens.
     Se ainda exceder a viewport, o .sidebar-nav rola internamente (overflow-y). */
  flex: 0;
}

.sidebar-footer {
  padding: 0.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.sidebar-logout {
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-surface-card);
}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--scrim);
  z-index: 1035;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

/* ====================================
   Sidebar Accordion Menu
   ==================================== */

.sidebar-accordion {
  margin-bottom: var(--spacing-xs);
}

.sidebar-accordion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
}

.sidebar-accordion-header:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-surface-card);
}

.sidebar-accordion-toggle {
  font-size: 0.625rem;
  margin-left: auto;
  transition: transform var(--transition-speed) ease;
}

/* Ícone principal do header do accordion (ex: engrenagem de configurações) */
.sidebar-accordion-header > i:first-of-type {
  font-size: 1.25rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-accordion-header[aria-expanded="true"] .sidebar-accordion-toggle {
  transform: rotate(180deg);
}

.sidebar-accordion:has(.sidebar-link.active) .sidebar-accordion-header,
.sidebar-accordion-header[aria-expanded="true"] {
  color: var(--color-surface-card);
}

/* Indicador de menu ABERTO/expandido: realce sutil no cabeçalho (mesmo espírito
   do item selecionado — fundo translúcido + acento na borda esquerda). */
.sidebar-accordion-header[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(255, 255, 255, 0.5);
}

/* Hover não deve apagar o realce de aberto. */
.sidebar-accordion-header[aria-expanded="true"]:hover {
  background: rgba(255, 255, 255, 0.15);
}

.sidebar-accordion-body {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.sidebar-accordion-body.collapsing {
  max-height: 0;
}

.sidebar-accordion-body.collapse:not(.show) {
  display: none;
}

.sidebar-accordion-body.show {
  display: block;
}

/* Compact menu items in accordion.
   Recuo à direita (padding-left maior que o do header) para evidenciar que os
   subitens estão DENTRO do menu pai; o ícone do header alinha com o início do
   texto dos filhos. */
.sidebar-accordion .sidebar-link {
  padding: 0.625rem var(--menu-item-padding-x) 0.625rem calc(var(--menu-item-padding-x) + var(--spacing-md));
  font-size: 0.875rem;
}

.sidebar-accordion .sidebar-link i {
  font-size: 1.125rem;
  width: 1.25rem;
}

/* ====================================
   Sidebar Badge — chip de pendências
   ==================================== */

.sidebar-link {
  position: relative;
}

/* Wrapper do texto + badge */
.sidebar-link .sidebar-link-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
}

/* ====================================
   Modo só-ícone (sidebar colapsada) — #60
   Apenas desktop (≥992px); no mobile a sidebar é drawer (overlay).
   Reduz --sidebar-width: como .sidebar e .main-content usam essa variável,
   ambos acompanham o colapso automaticamente.
   ==================================== */
@media (min-width: 992px) {
  body.sidebar-collapsed {
    /* Um pouco mais largo para caber o nome abaixo do ícone (antes 76px). */
    --sidebar-width: 96px;
  }

  /* Recolhido NÃO esconde os rótulos: eles vão ABAIXO do ícone. Só some o que não
     cabe nesse formato compacto: logo full, chevrons/badges e títulos de grupo. */
  body.sidebar-collapsed .sidebar-logo-img,
  body.sidebar-collapsed .sidebar-accordion-toggle,
  body.sidebar-collapsed .sidebar-group-title {
    display: none;
  }

  body.sidebar-collapsed .sidebar-logo {
    padding-inline: 0.5rem;
  }

  /* Colapsada: somente o ícone compacto da marca, sem o nome do tenant. */
  body.sidebar-collapsed .sidebar-logo-compact {
    display: inline-flex;
  }

  /* Sub-itens de accordion ficam ocultos no modo compacto (expanda para acessar). */
  body.sidebar-collapsed .sidebar-accordion-body {
    display: none !important;
  }

  /* Links e cabeçalhos de accordion: ícone em cima, NOME abaixo (centralizado). */
  body.sidebar-collapsed .sidebar-link,
  body.sidebar-collapsed .sidebar-accordion-header,
  body.sidebar-collapsed .sidebar-logout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    text-align: center;
    border-left-color: transparent;
  }

  /* Recolhido mostra o NOME COMPLETO abaixo do ícone: o rótulo QUEBRA em até
     duas linhas em vez de truncar com reticências (sem abreviar — ex.:
     "Meus Investimentos", "Configurações", "Administração"). */
  body.sidebar-collapsed .sidebar-link > span,
  body.sidebar-collapsed .sidebar-link .sidebar-link-label,
  body.sidebar-collapsed .sidebar-logout span,
  body.sidebar-collapsed .sidebar-accordion-header > span {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 0.66rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    /* Garante o nome completo em até 2 linhas; o 3º+ termo cai para a 2ª linha. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body.sidebar-collapsed .sidebar-link i,
  body.sidebar-collapsed .sidebar-accordion-header > i:first-of-type {
    margin: 0;
    font-size: 1.3rem;
  }
}

/* ====================================================================
   EXPERIÊNCIA / ACESSIBILIDADE do menu (#163) — guiado pelas skills de UX
   (.claude/skills/ui-ux-pro-max: alvo de toque ≥44px e foco de teclado).
   SEM mexer no esquema de cores: o outline claro só combina com o tema
   atual da sidebar e é um indicador de FOCO, não recolor.
   ==================================================================== */
.sidebar-link,
.sidebar-accordion-header,
.sidebar-logout {
  min-height: var(--btn-height-md, 44px);
}

.sidebar-link:focus-visible,
.sidebar-accordion-header:focus-visible,
.sidebar-logout:focus-visible,
.sidebar-logo-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: -2px;
  border-radius: 4px;
}

.env-indicator-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.75rem;
}

.env-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.env-indicator--development {
  background-color: #c9a227;
}

.env-indicator--local {
  background-color: #e8730c;
}

.env-indicator--staging {
  background-color: #dc3545;
}