/* ============================================================================
Font Awesome Pro Duotone Thin — corrige conflito com Semantic UI
----------------------------------------------------------------------------
O Semantic UI define `i.icon { font-family: Icons; font-weight: 400 }`
(elemento + classe = especificidade 0,1,1), que é MAIS específico que a
regra do próprio Font Awesome `.fadt { font-family: var(--_fa-family) }`
(só classe = especificidade 0,1,0) — então o Semantic sempre vencia e o
ícone renderizava com a fonte "Icons" dele em vez da Duotone Thin,
mesmo com o CSS/webfont da Font Awesome carregando certinho. Confirmado
via DevTools (aba Computed > font-family apontando pro semantic.min.css).
============================================================================ */
i.fadt,
i.fa-duotone {
font-family: var(--fa-family-duotone, "Font Awesome 7 Duotone") !important;
font-weight: 100 !important;
}
i.fab,
i.fa-brands {
font-family: var(--fa-family-brands, "Font Awesome 7 Brands") !important;
font-weight: 400 !important;
}
/* ============================================================================
Menu principal (sidebar) — padrão visual DashKit
----------------------------------------------------------------------------
Reskin do menu lateral (.sidemenu) para o mesmo padrão claro, com sombras
suaves e acento azul, usado no Extrato ASAAS / Design System.
Não altera nenhuma classe usada pelo Semantic UI (accordion/sidebar/dropdown)
nem pelo main.js (resizeSidebar, colhidden, hiddenCollapse) — só reestiliza.
============================================================================ */
.sidemenu {
background: #fff !important;
border-right: 1px solid #eef2f7;
box-shadow: 1px 0 0 rgba(16, 24, 40, .02);
}
/* Remove o divisor cru padrão do Semantic UI (linha de 1px entre itens do
menu vertical) — some visualmente errado com os cantos arredondados.
`.ui.vertical.menu .item:before` (Semantic) tem mais classes na seletora
que a regra simples abaixo, então vence por especificidade mesmo com
!important dos dois lados — por isso repetimos com as mesmas classes do
.sidemenu (ui vertical menu) pra garantir que a nossa vença. */
.sidemenu .item::before {
display: none !important;
}
.ui.vertical.menu.sidemenu .item::before {
display: none !important;
}
/* A linha visível não era essa pseudo-borda do Semantic — é uma regra
legada em resources/css/main.css (`.ui.vertical.menu .item { border-bottom:
1px solid #ccc }`), de antes do reskin DashKit, nunca removida. Ela é
global (afeta qualquer .ui.vertical.menu da aplicação), então em vez de
mexer no main.css aqui só anulamos dentro do sidemenu. */
.sidemenu.ui.vertical.menu .item,
.ui.vertical.menu.sidemenu .item {
border-bottom: none !important;
}
/* ===== Logo ================================================================ */
.sidemenu .logo {
height: auto !important;
padding: 22px 20px 18px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eef2f7;
}
/* Volta a preencher a largura do menu (como era originalmente em
main.css: .logo img{width:100%!important;height:auto}) — a versão
anterior travava a altura em 32px, o que deixava a logo pequena demais
em relação ao tamanho original. O modo colapsado (regra abaixo) continua
com seu próprio teto, então não estoura a barra estreita. */
.sidemenu .logo img {
width: 100% !important;
height: auto !important;
max-width: 220px;
}
/* Menu colapsado (modo só ícone, 60px de largura) — a 2ª (trocada
via main.js ao colapsar) agora é o favicon quadrado (onvisusfav-new.png,
310x306), não mais a wordmark larga com texto — antes ficava espremida
e ilegível tentando caber a logo inteira (397x262 / 2211x1232) numa
caixa de 40x22px. width/height fixos e iguais preservam o quadrado. */
.ui.sidebar.left.very.thin.icon.sidemenu .logo {
padding: 16px 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* .item img{padding-right:16px!important} é uma regra legada global
(main.css, pensada pra imagem-thumbnail ao lado de texto em outro
contexto) que também batia aqui por causa da classe "item" do link
da logo — sobrava padding só do lado direito da imagem, empurrando
ela pra fora do centro e comendo espaço, fazendo parecer menor. */
.ui.sidebar.left.very.thin.icon.sidemenu .logo img {
width: 32px !important;
height: 32px !important;
max-width: 32px;
padding: 0 !important;
margin: 0 !important;
}
/* ===== Divisórias =========================================================== */
.sidemenu .ui.divider {
border-top: none !important;
border-bottom: 1px solid #eef2f7 !important;
margin: 10px 16px !important;
}
/* ===== Cartão de perfil (cliente + usuário logado) ========================= */
.dk-side-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.dk-side-profile__avatar {
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 10px;
background: #eaf1ff;
color: #2e6bff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
/* O do Semantic tem width:1.18em/height:1em fixos (caixa
retangular, não quadrada) — mesmo com o wrapper centralizado via flex,
essa caixa assimétrica faz o glifo parecer deslocado dentro do badge. */
.dk-side-profile__avatar i.icon {
margin: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
}
.dk-side-profile__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.dk-side-profile__org {
font-size: 13px;
font-weight: 700;
color: #101828;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dk-side-profile__user {
font-size: 12px;
color: #98a2b3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== Cabeçalhos de seção (accordion title) =============================== */
.sidemenu .ui.accordion .title.item {
display: flex !important;
align-items: center;
padding: 10px 16px !important;
margin: 0 !important;
font-size: 14px;
font-weight: 700;
letter-spacing: .2px;
color: #667085;
cursor: pointer;
transition: color .15s ease;
}
.sidemenu .ui.accordion .title.item:hover {
color: #2e6bff;
}
/* Obs.: .active aqui é o estado "expandido" do accordion (Semantic UI),
não "página atual" — não deve ficar azul, senão dá a impressão de dois
itens destacados ao mesmo tempo quando o usuário abre outra seção. */
.sidemenu .ui.accordion .title.item .titleIcon {
float: none !important;
margin: 0 10px 0 0 !important;
font-size: 20px !important;
width: 14px;
text-align: center;
}
.sidemenu .ui.accordion .title.item .dropdown.icon {
margin: 0 0 0 auto !important;
order: 2;
font-size: 11px !important;
}
/* ===== Itens de navegação =================================================== */
.sidemenu .ui.accordion .content {
padding: 2px 0 8px !important;
}
.sidemenu a.item.transition {
display: flex !important;
align-items: center;
margin: 2px 10px !important;
padding: 9px 12px !important;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #344054 !important;
transition: background .15s ease, color .15s ease;
}
.sidemenu a.item.transition i {
font-size: 15px !important;
margin-top: 0 !important;
margin-right: 12px;
color: #98a2b3;
width: 16px;
text-align: center;
transition: color .15s ease;
}
.sidemenu a.item.transition:hover {
background: #f4f6fb;
color: #2e6bff !important;
}
.sidemenu a.item.transition:hover i {
color: #2e6bff;
}
/* ===== Itens de topo (fora de accordion, ex. Gestão de Clientes / Extrato) == */
.sidemenu > a.item:not(.logo):not(.dk-side-toplevel) {
display: flex !important;
align-items: center;
margin: 2px 10px !important;
padding: 10px 12px !important;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #344054 !important;
transition: background .15s ease, color .15s ease;
}
.sidemenu > a.item:not(.logo):not(.dk-side-toplevel) i {
font-size: 15px !important;
margin-right: 12px;
color: #98a2b3;
width: 16px;
text-align: center;
transition: color .15s ease;
}
/* ===== Itens soltos no nível dos títulos (Indicações / Ajuda) ==============
Ficam no mesmo nível visual dos títulos de seção (Administrador, Gerência
etc.), não são um item de navegação aninhado — por isso usam o mesmo
padding/margin dos títulos (10px 16px, sem inset/pill), em vez do padding
menor dos links dentro do accordion. */
.sidemenu a.item.transition.dk-side-toplevel {
margin: 0 !important;
padding: 10px 16px !important;
border-radius: 0 !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .2px;
color: #667085 !important;
}
.sidemenu a.item.transition.dk-side-toplevel:hover {
color: #2e6bff !important;
}
.sidemenu > a.item:not(.logo):not(.dk-side-toplevel):hover {
background: #f4f6fb;
color: #2e6bff !important;
}
.sidemenu > a.item:not(.logo):not(.dk-side-toplevel):hover i {
color: #2e6bff;
}
/* ===== Fallback em dropdown (modo ícone / colapsado) ======================== */
.sidemenu .ui.dropdown.item.displayblock,
.sidemenu .ui.dropdown.item.displaynone {
border-radius: 8px;
margin: 2px 8px !important;
}
/* O ícone-gatilho de cada dropdown (Administrador/Gerência/Financeiro/
Atendente/Profissional no modo colapsado) nunca tinha regra de cor nem
de tamanho — ficava preto quase puro (cor padrão do navegador, sem
herdar nada) e maior que os outros ícones da sidebar (Indicações/Ajuda,
que usam em vez de