/* v27g · ajustes específicos do HEADER (top-right) e da MÁSCARA mobile icon-only.
   Toda a estilização da .navigation desktop migrou para v27g-menu.css. */

/* === DESKTOP · alinhamento topo da product-bar (encosta no topo do viewport) === */
@media (min-width: 769px) {
  .app-container.teams-layout .product-bar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 4px solid #0a2540 !important;   /* casa com a moldura navy da sidebar */
  }
  .app-container.teams-layout .product-bar .product-item:first-of-type {
    margin-top: 0 !important;
  }
}

/* === MOBILE · header top-right: avatar sempre visível, esconde label do nome === */
@media (max-width: 768px) {
  .app-container.teams-layout .header.teams-header {
    padding: 0 12px !important;
  }
  .app-container.teams-layout .header.teams-header .profile-name {
    display: none !important;
  }
  .app-container.teams-layout .header.teams-header .profile-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
    flex-shrink: 0;
  }
  .app-container.teams-layout .header.teams-header .profile-info {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .app-container.teams-layout .header.teams-header .persona-switch {
    flex-shrink: 0 !important;
  }
}

/* === MOBILE · máscara de item ativo em icon-only · pill 44x44 === */
@media (max-width: 768px) {
  /* O wrapper .nav-item tem margin 12px + overflow:hidden (style.css) e CORTAVA o
     pill de 44px pela direita na calha de 60px. Em icon-only ele não constrange. */
  .app-container.teams-layout.sidebar-icon-only .nav-item {
    width: 40px !important;
    margin: 2px auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-link {
    width: 40px !important;
    height: 38px !important;
    margin: 2px auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
    min-width: 0 !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-link.active {
    background: #2B6394 !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(43,99,148,.28) !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-link.active .nav-icon svg {
    color: white !important;
  }

  .app-container.teams-layout.sidebar-icon-only .nav-profile-badge {
    padding: 12px 0 !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-profile-dot {
    margin: 0 auto !important;
  }

  /* O ÍCONE DO APP vive na BARRA DE TÍTULO (header) · a calha NÃO o repete.
     Esconde o toggle-row no mobile (evita ícone duplicado). */
  .app-container.teams-layout.sidebar-icon-only .sidebar-toggle-row {
    display: none !important;
  }

  /* CALHA · centralização à prova de bala via FLEX (não depende de margin:auto nem
     de cálculo de largura do container). nav-content e nav-group centram os filhos;
     larguras fixas e pequenas garantem folga simétrica e ZERO corte. */
  .app-container.teams-layout.sidebar-icon-only .nav-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 6px 0 !important;
  }
  /* Agrupamento por FUNDO (sem linha separadora) · blocos sutis alternados de 48px
     centrados no trilho de 60px → 6px de folga de cada lado. */
  .app-container.teams-layout.sidebar-icon-only .nav-group {
    width: 48px !important;
    box-sizing: border-box !important;
    margin: 6px auto !important;
    padding: 4px 0 !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-group.nav-group-alt {
    background: rgba(43,99,148,.09) !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-group .nav-item,
  .app-container.teams-layout.sidebar-icon-only .nav-group .nav-link {
    margin: 2px 0 !important;     /* flex já centra · sem auto */
  }
  .app-container.teams-layout.sidebar-icon-only .sidebar-bar-toggle {
    width: 32px !important;
    height: 24px !important;
    margin-top: 0 !important;
  }
  .app-container.teams-layout.sidebar-icon-only .sidebar-bar-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  .app-container.teams-layout.sidebar-icon-only .nav-logout-footer {
    padding: 12px 8px !important;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .app-container.teams-layout.sidebar-icon-only .nav-logout-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .app-container.teams-layout.sidebar-icon-only .nav-logout-btn:hover {
    background: rgba(0,0,0,.06);
  }

  /* Tap targets ≥44px · WCAG 2.5.5 */
  .app-container.teams-layout .sidebar-bar-toggle {
    min-width: 44px;
    min-height: 30px;
  }
}