/* Retrofit da sidebar (Frente E2, 2026-10) — carrega DEPOIS de styles.css.
 *
 * Arquivo separado de propósito: styles.css tem ~25 mil linhas de camadas sobrepostas e está em
 * obra por outra frente (tokens/tipografia). Aqui só o que define o visual do MENU:
 *   - item: 36 px de altura, ícone Lucide 16 px + rótulo 14 px, estado ativo discreto
 *     (fundo suave + barra fina de 2 px na cor --accent);
 *   - cabeçalho de grupo pequeno (12 px, caixa alta — único lugar onde caixa alta é aceitável);
 *   - menu do cartão do usuário (Admin Console, Painel TV, tema, idioma, tour, sair);
 *   - aba do Calendário de Portfólio (iframe ocupando a área principal).
 * Não mexe no logo/marca (`[data-brand="logo"]`, bloco html[data-marca] no fim do styles.css).
 */

/* ── Itens do menu ───────────────────────────────────────────────────────────── */
.sidebar .nav { gap: 2px; }
.sidebar .nav-group { gap: 2px; }

.sidebar .nav-link {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  gap: 8px;
}
.sidebar .nav-link-content { gap: 10px; }
.sidebar .nav-link-label {
  font-size: 14px;
  line-height: 20px;
}
.sidebar .nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.72;
}
.sidebar .nav-link:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: transparent;
}
.sidebar .nav-link:hover .nav-icon { opacity: 1; }

/* Ativo discreto: fundo suave + barra fina de 2 px na cor de destaque. */
.sidebar .nav-link.active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.sidebar .nav-link.active .nav-icon { opacity: 1; }
.sidebar .nav-link.active::before {
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Cabeçalho de grupo: pequeno, 12 px, caixa alta só aqui. */
.sidebar .nav-section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 10px 6px;
  line-height: 16px;
}
.sidebar .nav > .nav-section-label:first-child { padding-top: 4px; }

/* Contagem (Minha Fila / Governança): discreta, números tabulares. */
.sidebar .nav-badge {
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sidebar .nav-link:not(.active) .nav-badge:not(.is-warn):not(.is-danger) {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}

/* Sub-lista de projetos continua com o recuo, só mais compacta. */
.sidebar .nav-sub { gap: 2px; }

/* ── Recolhida: só ícones; contagem vira ponto ───────────────────────────────── */
.sidebar.sidebar--collapsed .nav-link {
  padding: 0;
  justify-content: center;
}
.sidebar.sidebar--collapsed .nav-link.active::before { left: -4px; }
.sidebar.sidebar--collapsed .nav-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}

/* ── Menu do cartão do usuário ───────────────────────────────────────────────── */
.sidebar-user { cursor: pointer; }
.sidebar-user-menu {
  padding: 6px;
  gap: 2px;
}
.sidebar-user-menu .sidebar-menu-item {
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
}
.sidebar-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--border);
}
/* Tema: mesmo visual de item de menu (o .theme-toggle original é um pill de 18 px de raio). */
.sidebar-user-menu .sidebar-menu-item.theme-toggle {
  border: 0;
  background: transparent;
  border-radius: 8px;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  gap: 10px;
}
.sidebar-user-menu .sidebar-menu-item.theme-toggle .theme-toggle-text { display: inline; }
.sidebar-user-menu .sidebar-menu-item.theme-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
/* Linha de idioma: rótulo à esquerda, PT|EN à direita. */
.sidebar-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.sidebar-menu-row > i,
.sidebar-menu-row > svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-menu-row-label { flex: 1; }
.sidebar-menu-row .sidebar-locale { margin-left: auto; padding: 2px; }
.sidebar-menu-row .sidebar-locale-btn { font-size: 12px; letter-spacing: 0.04em; padding: 3px 9px; }

/* Recolhida: o menu abre ao lado da barra (fixed: a sidebar tem overflow oculto). */
.sidebar.sidebar--collapsed .sidebar-user-menu:not([hidden]) {
  display: flex;
  position: fixed;
  left: 72px;
  right: auto;
  bottom: 16px;
  width: 248px;
}
.sidebar.sidebar--collapsed .sidebar-user-menu .sidebar-locale { display: inline-flex; }
.sidebar.sidebar--collapsed .sidebar-user-menu .theme-toggle-text { display: inline; }

/* ── Calendário de Portfólio como aba ────────────────────────────────────────── */
/* O cabeçalho do app (.topbar) fica no topo; o iframe ocupa o resto da altura. */
.calendario-aba { padding: 0; margin: 0; }
.calendario-aba .calendario-aba-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 66px);
  min-height: 560px;
  border: 0;
  background: transparent;
}