/* ===== SEM MENU LATERAL: zerar a margem fantasma do Sidenav =====
   O tema Inspinia reserva `margin-left: var(--ins-sidenav-width)` (~250px) no
   `.content-page` E no `.app-topbar`, esperando o menu lateral esquerdo (Sidenav). O
   sistema migrou para menu horizontal no topo e NÃO usa mais Sidenav — mas a margem só
   era zerada por `html[data-layout=topnav]`. Quando esse atributo não estava aplicado a
   tempo (algumas telas/navegações Blazor não recebem o `data-layout`), sobrava o
   "buraco" à esquerda (no conteúdo e/ou na topbar). Zeramos de forma INCONDICIONAL. */
.content-page,
.app-topbar {
    margin-left: 0 !important;
}

/* ===== FUNDO DA TOPBAR SEM DEPENDER DE `data-layout` =====
   O background da topbar vem de `var(--ins-topbar-bg)`, que só é definida
   pelo tema quando `html[data-layout="topnav"]` está presente. Esse atributo
   é setado por um <script> inline em HorizontalLayout.razor que roda apenas
   no primeiro carregamento da página (F5); navegações client-side do Blazor
   (clicar em um item do menu) não reexecutam esse script, então o atributo
   nunca é reaplicado, a variável fica vazia e a topbar perde o fundo branco,
   expondo o cinza do body atrás dela. Fixamos o fundo de forma incondicional,
   já que o sistema não usa mais os outros layouts/temas do Inspinia. */
.app-topbar {
    background-color: #ffffff !important;
}

/* ===== LOGO NA TOPBAR (layout horizontal, sem sidenav) ===== */
.app-topbar .logo-topbar {
    display: flex !important;
    align-items: center;
}

/* ===== MENU HORIZONTAL FUNDIDO NA TOPBAR (uma unica barra) ===== */
/* O menu (.topbar-nav-merged) passa a viver dentro do .app-topbar,
   substituindo a antiga .topnav (segunda barra). Ajusta a altura
   disponivel do conteudo, que antes considerava duas barras. */
html[data-layout="topnav"] .content-page {
    min-height: calc(100vh - var(--ins-topbar-height));
}

.app-topbar .topbar-nav-merged {
    flex: 0 0 auto;
}

.app-topbar .topbar-nav-merged .navbar-nav {
    flex-direction: row;
}

/* Barra dividida em 3 colunas (logo | menu | acoes), com o menu
   centralizado de fato na largura total da barra, nao apenas no
   espaco sobrando ao lado do logo. */
.app-topbar .topbar-menu-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* O Inspinia limita .container-fluid a 85% em telas >=1400px no layout
   topnav, deixando sobra lateral em monitores wide. Mantemos 100%,
   igual ao layout lateral original, em qualquer resolucao. */
html[data-layout="topnav"] .container-fluid {
    max-width: 100%;
}

/* ===== GRID ACTION DROPDOWN (MENU HAMBURGUER) ===== */
/* Permite que o dropdown ultrapasse os limites do grid Syncfusion */
.e-grid td:has(.grid-action-dropdown) {
    overflow: visible !important;
}
.e-grid .e-content:has(.grid-action-dropdown) {
    overflow: visible !important;
}
.e-grid .e-gridcontent:has(.grid-action-dropdown) {
    overflow: visible !important;
}
.e-grid tbody tr:has(.grid-action-dropdown) {
    overflow: visible !important;
}
.grid-action-dropdown .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== SYNCFUSION MENU BAR NO TOPBAR ===== */
.sf-menubar-wrapper {
    display: flex;
    justify-content: center;
}

/* Fundo branco na barra do menu */
.sf-menubar-wrapper .e-menu-wrapper,
.sf-menubar-wrapper .e-menu-container,
.sf-menubar-wrapper ul.e-menu {
    background-color: #ffffff !important;
}

/* Garantir que o dropdown do SfMenu apareça acima de tudo */
.e-menu-wrapper .e-ul,
.e-menu-popup {
    z-index: 99999 !important;
}

/* Permitir overflow no topbar para o dropdown não ser cortado */
.app-topbar,
.topbar-menu,
.topbar-menu-grid {
    overflow: visible !important;
}

/* O SfMenu marca o item clicado com `.e-selected`, que por padrão pinta o
   fundo em cinza (mesma cor do body). Como a topbar é branca, isso cria a
   impressão de um "buraco" cinza em volta do item ativo do menu. Mantemos
   apenas o item ativo, sem a marcação de background. */
.app-topbar .e-menu-item.e-selected,
.app-topbar .e-menu-item.e-focused,
.app-topbar .e-menu-item.e-selected.e-focused {
    background-color: transparent !important;
}

/* ===== SOMBRA SOB A TOPBAR =====
   Dá a impressão de que a topbar (fundo branco) está "elevada" acima da
   área de conteúdo (fundo cinza), já que não há mais borda/divisor visível
   entre as duas depois da migração para menu horizontal. */
html[data-layout="topnav"] .app-topbar,
.app-topbar {
    position: relative;
    z-index: 1030;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Afasta o conteúdo da página da sombra da topbar, para a sombra não
   ficar "colada"/atropelada pelo conteúdo logo abaixo. */
.content-page {
    padding-top: 12px;
}

/* ===== ASSISTENTE VIRTUAL (painel lateral de ajuda) ===== */

/* Botão flutuante (FAB) */
.assistente-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--ins-primary, #6c5ffc);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 1041;
    transition: transform 0.15s ease, background 0.15s ease;
}

.assistente-fab:hover {
    transform: scale(1.06);
}

/* FAB some quando o painel está aberto (evita ficar sobre o botão de enviar) */
.assistente-fab.oculto {
    display: none;
}

/* Garante que o sidebar do assistente fique acima de outros elementos */
.assistente-sidebar.e-sidebar {
    z-index: 1042 !important;
}

.assistente-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.assistente-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 1rem;
    background: var(--ins-primary, #6c5ffc);
    color: #fff;
    flex: 0 0 auto;
}

.assistente-mensagens {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ins-secondary-bg, #f5f5f9);
}

.assistente-bubble {
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.assistente-bubble.do-usuario {
    align-self: flex-end;
    background: var(--ins-primary, #6c5ffc);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.assistente-bubble.do-assistente {
    align-self: flex-start;
    background: #fff;
    color: var(--ins-body-color, #4d5969);
    border: 1px solid var(--ins-border-color, #e5e8ec);
    border-bottom-left-radius: 2px;
}

.assistente-sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assistente-input {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--ins-border-color, #e5e8ec);
    background: #fff;
}

.assistente-input .form-control {
    flex: 1 1 auto;
}

/* Em telas pequenas o painel ocupa a largura total */
@media (max-width: 599.98px) {
    .assistente-sidebar.e-sidebar {
        width: 100% !important;
    }
}
.grid-action-btn {
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
}
.grid-action-btn:hover {
    background-color: #f0f4ff !important;
    border-color: #4e73df !important;
}