/*
 * Voxentra: produtos (Send, Mail, Flow) dentro do painel do WhatsCRM (ver products.js).
 * Os itens da barra são clones dos nativos (mesmas classes MUI); aqui só o que é próprio da integração.
 */
:root {
  --vx-nav-active: #0035d9;
  --vx-header-h: 60px;
}

html.vx-dark {
  --vx-nav-active: #6f8fff;
}

/* Item ativo de um produto: ícone e texto na cor primária (o fundo e a barra vêm do .Mui-selected nativo). */
.vx-nav__button.Mui-selected .MuiListItemIcon-root,
.vx-nav__button.Mui-selected .MuiListItemText-primary {
  color: var(--vx-nav-active);
}

.vx-nav__button.Mui-selected .MuiListItemText-primary {
  font-weight: 600;
}

/* Produto aberto: o item nativo que o React mantém marcado volta ao visual de item comum. */
html.vx-product-open .MuiDrawer-paper .MuiListItemButton-root.Mui-selected:not(.vx-nav__button) {
  background-color: transparent !important;
  color: var(--vx-nav-text, inherit) !important;
}

html.vx-product-open
  .MuiDrawer-paper
  .MuiListItemButton-root.Mui-selected:not(.vx-nav__button)::before,
html.vx-product-open
  .MuiDrawer-paper
  .MuiListItemButton-root.Mui-selected:not(.vx-nav__button)::after {
  opacity: 0 !important;
}

html.vx-product-open
  .MuiDrawer-paper
  .MuiListItemButton-root.Mui-selected:not(.vx-nav__button)
  .MuiListItemIcon-root {
  color: var(--vx-nav-icon, inherit) !important;
}

html.vx-product-open
  .MuiDrawer-paper
  .MuiListItemButton-root.Mui-selected:not(.vx-nav__button)
  .MuiListItemText-primary {
  color: var(--vx-nav-text, inherit) !important;
  font-weight: inherit !important;
}

/* Área de conteúdo: o produto ocupa o lugar do conteúdo nativo, abaixo do cabeçalho, sem rolagem dupla. */
html.vx-product-open main > :not(:first-child):not(.MuiAppBar-root):not(.vx-product) {
  display: none !important;
}

html.vx-product-open,
html.vx-product-open body {
  overflow: hidden;
}

.vx-product {
  display: block;
  width: 100%;
  height: calc(100vh - var(--vx-header-h));
  height: calc(100dvh - var(--vx-header-h));
  min-height: 0;
  background: transparent;
}

.vx-product__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}