/* v27g · MENU LATERAL · estilo Microsoft Teams 2.x / Fluent
   Princípios:
   - Minimalismo: navy só como ACENTO, nunca como moldura
   - Espaçamento generoso · respira
   - Hierarquia tipográfica delicada · pesos 400/600, não 700
   - Item ativo: background suave + barrinha navy à esquerda · não bloco navy
   - Sem decorações pesadas (frames, sombras chamativas, gradientes)
*/

/* =========================================================================
   DESKTOP (≥769px)
   ========================================================================= */
@media (min-width: 769px) {

  /* === Limpa qualquer moldura/pseudo herdado === */
  .app-container.teams-layout::before,
  .app-container.teams-layout::after {
    display: none !important;
  }

  /* === NAVIGATION (coluna 2) ============================================== */
  .app-container.teams-layout .navigation {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 260px !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fafafa !important;
    background-image: none !important;
    border: none !important;
    border-right: 1px solid #ebebeb !important;   /* separador hairline · sutil */
    box-shadow: none !important;
    position: relative !important;
  }
  .app-container.teams-layout .navigation .nav-header { display: none !important; }

  /* === Estado external-collapsed · NÃO adiciona filete navy à esquerda ·
     o estilo limpo Teams não usa moldura · só o hairline existente */
  .app-container.teams-layout.external-collapsed .navigation {
    border-left: none !important;
    box-shadow: none !important;
  }

  /* === nav-content · scroll dos itens =================================== */
  .app-container.teams-layout .navigation .nav-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
  }
  .app-container.teams-layout .navigation .nav-content::-webkit-scrollbar { width: 6px; }
  .app-container.teams-layout .navigation .nav-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.14); border-radius: 3px;
  }
  .app-container.teams-layout .navigation .nav-content::-webkit-scrollbar-track {
    background: transparent;
  }

  /* === Header da sidebar (sidebar-toggle-row) ============================
     Layout flexbox · ícone | nome | chevron na MESMA linha (usa `order` para reordenar
     o HTML que vem na ordem cycle/toggle/label). Mais previsível que grid. */
  .app-container.teams-layout .navigation .sidebar-toggle-row {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #fafafa !important;
    border: none !important;
    border-bottom: 1px solid #ebebeb !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
  /* Ícone do produto · primeiro item visualmente (order:1) */
  .app-container.teams-layout .sidebar-product-cycle {
    order: 1 !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: var(--p-color, #2B6394);
    color: #fff;
    border: none !important;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: filter .15s ease;
  }
  .app-container.teams-layout .sidebar-product-cycle:hover { filter: brightness(1.08); }
  .app-container.teams-layout .sidebar-product-cycle svg { width: 16px; height: 16px; color: #fff; }

  /* Label · cresce para preencher o espaço entre ícone e chevron (order:2) */
  .app-container.teams-layout .sidebar-product-label {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .app-container.teams-layout .sidebar-product-label .sidebar-product-name {
    font-size: 14px; font-weight: 600; color: #242424; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .app-container.teams-layout .sidebar-product-label .sidebar-product-sub {
    font-size: 11.5px; color: #707070; line-height: 1.3; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Chevron · último item visualmente (order:3) */
  .app-container.teams-layout .sidebar-bar-toggle {
    order: 3 !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #707070 !important;
    border: none !important;
    padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .app-container.teams-layout .sidebar-bar-toggle:hover {
    background: rgba(0,0,0,.05) !important;
    color: #242424 !important;
  }
  .app-container.teams-layout .sidebar-bar-toggle svg { width: 14px; height: 14px; }

  /* === Chip da persona · ESCONDIDO na sidebar ·
     papel do usuário é informação dele · vive no avatar/dropdown do topo direito === */
  .app-container.teams-layout .navigation .nav-profile-badge {
    display: none !important;
  }

  /* === Dividers · hairline sutil entre seções === */
  .app-container.teams-layout .navigation .nav-divider {
    height: 1px !important;
    background: transparent !important;
    border-top: 1px solid #ebebeb !important;
    margin: 12px 16px 4px !important;
  }
  .app-container.teams-layout .navigation .nav-group-title {
    color: #707070 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 8px 16px 4px !important;
    margin: 0 !important;
  }

  /* === Itens · respiração e refinamento ============================== */
  .app-container.teams-layout .navigation .nav-item {
    margin: 1px 8px !important;
    padding: 0 !important;
    position: relative;   /* para a barrinha de active à esquerda */
  }
  .app-container.teams-layout .navigation .nav-link {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 7px 12px !important;
    border-radius: 4px !important;
    color: #242424 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;        /* leve · não 600 */
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .12s ease;
    position: relative;
  }
  .app-container.teams-layout .navigation .nav-link::before {
    /* barrinha navy à esquerda · só aparece no hover/active · estilo Teams */
    content: '';
    position: absolute;
    left: -4px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background .12s ease;
  }
  .app-container.teams-layout .navigation .nav-link:hover {
    background: rgba(0,0,0,.04) !important;
    color: #242424 !important;
  }
  .app-container.teams-layout .navigation .nav-link.active {
    background: rgba(43,99,148,.10) !important;     /* acento sutil · não bloco navy */
    color: #2B6394 !important;
    font-weight: 600 !important;
  }
  .app-container.teams-layout .navigation .nav-link.active::before {
    background: #2B6394 !important;                  /* barrinha 3px navy · marca seleção */
  }
  .app-container.teams-layout .navigation .nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 20px !important;
    line-height: 0 !important;
  }
  .app-container.teams-layout .navigation .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    color: #616161 !important;        /* ícones em cinza neutro · não navy */
    flex-shrink: 0;
    transition: color .12s ease;
  }
  .app-container.teams-layout .navigation .nav-link.active .nav-icon svg {
    color: #2B6394 !important;        /* ícone também ganha navy quando ativo */
  }
  .app-container.teams-layout .navigation .nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  /* Badge de contagem (estilo e-mail · ex.: Pendências "3") */
  .app-container.teams-layout .navigation .nav-badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-left: auto;
    min-width: 20px; height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #2B6394;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
  }
  .app-container.teams-layout .navigation .nav-link.active .nav-badge {
    background: #fff;
    color: #2B6394;
  }

  /* === Footer · botão Sair (e Apps quando product-bar oculta) ============== */
  .app-container.teams-layout .navigation .nav-logout-footer {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px 12px !important;
    margin: 0 !important;
    background: #fafafa !important;
    border: none !important;
    border-top: 1px solid #ebebeb !important;
  }
  .app-container.teams-layout .nav-logout-btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #707070;
    font-size: 13px; font-weight: 400;
    cursor: pointer;
    transition: all .12s ease;
  }
  .app-container.teams-layout .nav-logout-btn:hover {
    background: rgba(0,0,0,.04);
    color: #242424;
  }
  .app-container.teams-layout .nav-logout-btn svg {
    width: 14px; height: 14px; color: inherit;
  }

  /* === main-content background neutro · sem branco puro pra reduzir contraste === */
  .app-container.teams-layout .main-content {
    background: #f5f5f5 !important;
  }

  /* === Product-bar minimalista (Teams real): SÓ ícones, sem labels, tooltip ao hover === */
  .app-container.teams-layout .product-bar {
    background: #4B4B4B !important;       /* cinza Teams */
    box-shadow: none !important;
    padding: 8px 0 !important;
    gap: 2px !important;
    /* ROLA na vertical quando há muitos apps. O tooltip agora é position:fixed (escapa sem precisar de
       overflow visível) → dá pra ter overflow-y:auto sem cortar o tooltip. max-height trava a barra na janela
       (não cresce além da tela / barra do Windows). */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 50 !important;                /* fica acima da navigation (coluna 2) */
  }
  .app-container.teams-layout .product-bar .product-item {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    color: rgba(255,255,255,.72) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
  }
  .app-container.teams-layout .product-bar .product-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }
  .app-container.teams-layout .product-bar .product-item.active {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
  .app-container.teams-layout .product-bar .product-item.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important; bottom: 10px !important;
    width: 3px !important;
    background: #fff !important;
    border-radius: 0 3px 3px 0 !important;
  }
  .app-container.teams-layout .product-bar .product-icon svg {
    width: 22px !important; height: 22px !important;
  }
  /* ESCONDE labels e logo · ícones com tooltip já comunicam */
  .app-container.teams-layout .product-bar .product-label,
  .app-container.teams-layout .product-bar .product-logo {
    display: none !important;
  }
  /* === Tooltip ao hover · card com título + subtítulo + seta ===============
     Mostra "Nome do app" + "para que serve" ao parar o mouse sobre o ícone.
     Estética casa com o resto · navy, hairline, fade suave. */
  .app-container.teams-layout .product-bar .product-tooltip {
    position: fixed !important;            /* escapa do overflow da barra (que agora rola) · top/left vêm do JS no hover */
    transform: translateY(-50%) translateX(-4px) !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    min-width: 180px !important;
    max-width: 240px !important;
    background: #2b2b2b !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1000 !important;
    transition: opacity .15s ease, transform .15s ease !important;
    white-space: normal !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
  }
  /* Setinha apontando pro ícone */
  .app-container.teams-layout .product-bar .product-tooltip::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #2b2b2b;
    border-radius: 1px;
  }
  /* Título do app em negrito */
  .app-container.teams-layout .product-bar .product-tooltip-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.2 !important;
  }
  /* Subtítulo / descrição "para que serve" */
  .app-container.teams-layout .product-bar .product-tooltip-sub {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,.72) !important;
    line-height: 1.3 !important;
  }
  /* Aparece ao passar o mouse sobre o ícone · pequeno slide à direita */
  .app-container.teams-layout .product-bar .product-item:hover .product-tooltip,
  .app-container.teams-layout .product-bar .product-item:focus-visible .product-tooltip {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
    transition-delay: .35s;       /* pequeno delay · não invade ao passar rápido */
  }

  /* === Grid · product-bar bem fina (48px) · Teams real === */
  .app-container.teams-layout {
    grid-template-columns: 48px 260px 1fr !important;
  }
  .app-container.teams-layout.external-collapsed {
    grid-template-columns: 0 260px 1fr !important;
  }
}

/* ===========================================================================
   DESKTOP · APP-SHELL · barra de título no topo (largura total) com o ícone do
   app à esquerda; product-bar + menu + conteúdo abaixo, acompanhando-se.
   (Carrega por último → autoritativo sobre o layout base.)
   =========================================================================== */
@media (min-width: 769px) {
  .app-container.teams-layout .header.teams-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 56px !important;
    z-index: 100 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: #f5f7fa !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }
  /* Ícone do app na barra de título (esquerda) · cor do produto */
  .app-container.teams-layout .header.teams-header .app-bar-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border: none; border-radius: 9px; cursor: default;
    background: var(--p-color, #2B6394); color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
  }
  .app-container.teams-layout .header.teams-header .app-bar-icon svg { width: 21px; height: 21px; }
  .app-container.teams-layout .header.teams-header .app-bar-icon img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; display: block; }
  .app-container.teams-layout .header.teams-header .profile-info { margin-left: auto !important; }

  /* product-bar + menu + conteúdo começam ABAIXO do header (56px) */
  /* padding-bottom: faixa segura no rodapé — (a) tira os últimos ícones de cima da BARRA DO WINDOWS e
     (b) força a coluna a transbordar quando há muitos apps → habilita rolagem (rodinha + arrasto). */
  .app-container.teams-layout .product-bar { padding-top: 56px !important; padding-bottom: 64px !important; }
  .app-container.teams-layout .navigation  { padding-top: 56px !important; }
  /* Header fixo no topo (80) · recuo lateral MÍNIMO (12px) entre a área da página
     e o primeiro card → cards mais largos, mais espaço interno (1º nível). */
  .app-container.teams-layout .main-content .content-area { padding: 80px 12px 24px !important; }
  /* Ícone do app vive no header → a calha NÃO repete o toggle-row */
  .app-container.teams-layout .sidebar-toggle-row { display: none !important; }
}

/* Espaçamento entre blocos de menu (.nav-group) no desktop/menu expandido · sem linha */
.app-container.teams-layout .nav-group + .nav-group { margin-top: 8px; }

/* ===========================================================================
   AUTORITATIVO · CALHA MOBILE (icon-only) · carrega por ÚLTIMO, vence todos.
   O problema de "tudo deslocado pra direita e cortado" vinha de centralizar
   dentro de uma caixa cuja largura dependia de herança/scrollbar. Aqui FIXAMOS
   a largura em CADA nível (border-box) e centramos por flex · zero dependência.
   =========================================================================== */
@media (max-width: 768px) {
  /* trilho: 60px PAR. A divisória NÃO consome largura (vira sombra inset), então a
     área interna fica 60 (par) e toda a cascata de centralização dá pixel inteiro. */
  .app-container.teams-layout.sidebar-icon-only .navigation {
    width: 60px !important;
    box-sizing: border-box !important;
    border-right: none !important;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.10) !important;
  }
  /* coluna de scroll: ocupa os 60px exatos, sem padding lateral, centra os filhos */
  .app-container.teams-layout.sidebar-icon-only .nav-content {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* bloco de agrupamento: ocupa a largura TODA (stretch) — esta é a versão que
     centralizou de fato (margin:auto não funcionava aqui). Como é full-width 60px,
     o fundo é simétrico por definição. O pill é centrado DENTRO dele. */
  .app-container.teams-layout.sidebar-icon-only .nav-group {
    align-self: stretch !important;
    width: auto !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
    padding: 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* wrapper do item: 50px centrado no bloco de 60 via align-items → (60−50)/2 = 5px PAR */
  .app-container.teams-layout.sidebar-icon-only .nav-item {
    width: 50px !important;
    box-sizing: border-box !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
  }
  /* pill: 40px → (50−40)/2 = 5px PAR de cada lado dentro do bloco · simétrico */
  .app-container.teams-layout.sidebar-icon-only .nav-link {
    width: 40px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3º estado · OCULTO · o estado mantém a classe sidebar-icon-only junto, então a
     regra de 60px acima venceria · aqui usamos as DUAS classes (especificidade 5)
     pra forçar largura 0 e devolver a largura ao conteúdo. */
  .app-container.teams-layout.sidebar-icon-only.sidebar-hidden .navigation {
    width: 0 !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .app-container.teams-layout.sidebar-hidden .main-content { left: 0 !important; }
  /* sem calha → sem as faixas de fade dela */
  .app-container.teams-layout.sidebar-hidden .navigation::before,
  .app-container.teams-layout.sidebar-hidden .navigation::after { display: none !important; }
}

/* === LOGO Blanes no header (esquerda) · sempre visível (desktop + mobile) · clique = trocar de app ===
   Fundo transparente (a marca logo.png é RGBA). Regras fora de @media + !important p/ vencer os estilos
   por-breakpoint do antigo ícone de produto. NÃO afeta o registro/carga de módulos (puramente visual). */
.app-container.teams-layout .header.teams-header .app-bar-icon {
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; flex: 0 0 auto !important;
  border: none !important; border-radius: 8px !important; cursor: pointer !important;
  background: transparent !important; box-shadow: none !important; padding: 4px !important;
}
.app-container.teams-layout .header.teams-header .app-bar-icon img {
  width: 32px !important; height: 32px !important;
  object-fit: contain !important; display: block !important; border-radius: 0 !important;
}
.app-container.teams-layout .header.teams-header .app-bar-icon svg { display: none !important; }
.app-container.teams-layout .header.teams-header .app-bar-icon:hover { background: rgba(0,0,0,.06) !important; }
/* Nome do módulo ao lado do logo · só no mobile (regra mobile o exibe); oculto no desktop. */
.app-container.teams-layout .header.teams-header .app-bar-product { display: none; }
/* "Blanes Framework" ao lado do logo · só no DESKTOP (a regra mobile o oculta). */
.app-container.teams-layout .header.teams-header .app-bar-brand {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: #1f2937; letter-spacing: .2px; margin-left: 4px;
}