/*
* utilis-dashboard-theme.css
* Restyle do menu lateral e do Dashboard Principal (index) conforme o layout
* de referência do Figma "UTILIS · 01.1.0 · Dashboard". Escopado a
* #layout-menu e .utilis-dash para não afetar o restante do sistema.
******************************************************************************/

/*
* As cores de texto/borda usam as CSS vars do Bootstrap (--bs-heading-color,
* --bs-body-color, etc.) em vez de rgba fixo: o tema (core.css / core-dark.css)
* já redefine essas vars no dark mode, então nosso texto acompanha o tema
* automaticamente em vez de ficar ilegível (cinza escuro sobre fundo escuro).
*/
:root {
  --utilis-primary: #3485c6;
  --utilis-primary-soft: rgba(52, 133, 198, 0.16);
  --utilis-secondary: #69bd45;
  --utilis-success: #28c76f;
  --utilis-warning: #ffab00;
  --utilis-text-primary: var(--bs-heading-color, rgba(52, 52, 52, 0.9));
  --utilis-text-secondary: var(--bs-body-color, rgba(52, 52, 52, 0.7));
  --utilis-text-disabled: var(--bs-secondary-color, rgba(52, 52, 52, 0.4));
  --utilis-border: var(--bs-border-color, rgba(47, 43, 61, 0.12));
  /* --bs-card-bg só existe dentro de .card (é var local do componente, não
     do :root) — fora de um .card ela não resolve e vira transparente. Pra
     caixa de busca/dropdown, que não são .card, usamos esta cópia própria. */
  --utilis-surface: #fff;
  --utilis-radius-md: 6px;
  --utilis-radius-sm: 4px;
  --utilis-shadow-card: 0 3px 12px 0 rgba(47, 43, 61, 0.14);
}

html.dark-style {
  --utilis-surface: #2f3349;
}

/*
* Menu lateral
******************************************************************************/

#layout-menu,
#layout-menu .menu-link,
#layout-menu .menu-header-text {
  font-family: 'Urbanist', sans-serif;
}

#layout-menu .menu-header-text {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  color: var(--utilis-text-disabled);
}

#layout-menu .menu-link {
  border-radius: var(--utilis-radius-md);
  color: var(--utilis-text-primary);
  font-size: 0.9375rem;
  font-weight: 400;
}

html:not(.layout-menu-collapsed) #layout-menu .menu-item:not(.active) > .menu-link:hover,
.layout-menu-hover.layout-menu-collapsed #layout-menu .menu-item:not(.active) > .menu-link:hover {
  background: var(--utilis-primary-soft);
}

#layout-menu.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(270deg, rgba(52, 133, 198, 0.7) 0%, var(--utilis-primary) 100%);
  box-shadow: 0px 2px 6px 0px rgba(52, 133, 198, 0.3);
}

#layout-menu .menu-inner .menu-item.open > .menu-link.menu-toggle,
.layout-menu-hover.layout-menu-collapsed #layout-menu .menu-inner .menu-item.open > .menu-link.menu-toggle {
  background: var(--utilis-primary-soft);
}

#layout-menu .menu-sub .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--utilis-primary-soft) !important;
  color: var(--utilis-primary) !important;
  box-shadow: none;
  border-radius: 0 50px 50px 0;
}

/*
* Dashboard Principal
******************************************************************************/

.utilis-dash,
.utilis-dash .card {
  font-family: 'Urbanist', sans-serif;
}

.utilis-dash .card {
  border: none;
  border-radius: var(--utilis-radius-md);
  box-shadow: var(--utilis-shadow-card);
}

.utilis-dash .card-header {
  border-bottom: none;
}

.utilis-dash h4,
.utilis-dash h5,
.utilis-dash h6,
.utilis-dash .card-title {
  color: var(--utilis-text-primary);
  font-weight: 500;
}

.utilis-dash .text-muted {
  color: var(--utilis-text-secondary) !important;
}

.utilis-dash .kpi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.utilis-dash .kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--utilis-text-primary);
  line-height: 1.3;
  margin-bottom: 0.125rem;
}

.utilis-dash .kpi-label {
  font-size: 0.9375rem;
  color: var(--utilis-text-secondary);
}

.utilis-dash .kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.utilis-dash .kpi-icon.utilis-primary { background: rgba(52, 133, 198, 0.12); color: var(--utilis-primary); }
.utilis-dash .kpi-icon.utilis-secondary { background: rgba(105, 189, 69, 0.12); color: var(--utilis-secondary); }
.utilis-dash .kpi-icon.utilis-success { background: rgba(40, 199, 111, 0.12); color: var(--utilis-success); }
.utilis-dash .kpi-icon.utilis-warning { background: rgba(255, 171, 0, 0.12); color: var(--utilis-warning); }
.utilis-dash .kpi-icon.utilis-neutral { background: rgba(52, 52, 52, 0.08); color: var(--utilis-text-secondary); }

/* Tabela "Top Contribuintes" — <table> de verdade (th/td), não div solta:
   leitor de tela precisa da associação linha/coluna aqui. */
.utilis-dash .rank-table thead th {
  font-size: 0.8125rem;
  text-transform: none;
  color: var(--utilis-text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--utilis-border);
  white-space: nowrap;
}

.utilis-dash .rank-table td {
  border-bottom: 1px solid var(--utilis-border);
  vertical-align: middle;
}

.utilis-dash .rank-table tbody tr:last-child td {
  border-bottom: none;
}

.utilis-dash .rank-num {
  width: 22px;
  color: var(--utilis-text-secondary);
  font-size: 0.875rem;
}

.utilis-dash .rank-badge {
  display: inline-block;
  min-width: 72px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--utilis-radius-sm);
  color: #fff;
}

.utilis-dash .rank-badge.tipo-pessoa { background: var(--utilis-secondary); }
.utilis-dash .rank-badge.tipo-empresa { background: var(--utilis-primary); }

.utilis-dash .rank-name {
  font-weight: 500;
  color: var(--utilis-text-primary);
}

.utilis-dash .rank-value {
  color: var(--utilis-success);
  font-weight: 500;
}

.utilis-dash .rank-count {
  color: var(--utilis-text-primary);
  font-weight: 500;
}

/*
* Barra de pesquisa da navbar
******************************************************************************/

#layout-navbar .navbar-nav-right > .navbar-nav:not(.ms-auto):has(.navbar-search-wrapper) {
  flex: 1 1 auto;
  min-width: 0;
}

#layout-navbar .navbar-search-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* Menu horizontal: caixa mais compacta, não precisa dos 420px do layout vertical. */
#layout-navbar .navbar-nav-right > ul .navbar-search-wrapper {
  max-width: none;
  width: 220px;
}

#layout-navbar .navbar-search-wrapper .global-search-toggler {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--utilis-border);
  border-radius: var(--utilis-radius-md);
  background: var(--utilis-surface);
}

#layout-navbar .navbar-search-wrapper .global-search-toggler i.ti-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--utilis-primary-soft);
  color: var(--utilis-primary);
  font-size: 1rem;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Campo de busca de verdade, dentro da própria caixa — sem criar outra
   caixa/overlay por cima da tela ao digitar. */
#layout-navbar .navbar-search-wrapper .global-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  color: var(--utilis-text-primary);
  box-shadow: none !important;
  outline: none;
}

#layout-navbar .navbar-search-wrapper .global-search-input::placeholder {
  color: var(--utilis-text-disabled);
}

#layout-navbar .navbar-search-wrapper .global-search-close {
  font-size: 1rem;
  color: var(--utilis-text-disabled);
  flex-shrink: 0;
}

/*
* Dropdown de resultados — ancorado na própria caixa de pesquisa (mesma
* largura dela), mesmo padrão visual do resto do tema.
******************************************************************************/

#global-search-dropdown {
  border-radius: var(--utilis-radius-md);
  border: 1px solid var(--utilis-border);
  background: var(--utilis-surface);
  box-shadow: var(--utilis-shadow-card);
  font-family: 'Urbanist', sans-serif;
}

#global-search-dropdown .list-group-item {
  background: transparent;
  border-color: var(--utilis-border);
  color: var(--utilis-text-primary);
}

#global-search-dropdown h6 {
  color: var(--utilis-text-primary);
}

#global-search-dropdown .badge.bg-utilis-pessoa { background: var(--utilis-secondary) !important; color: #fff; }
#global-search-dropdown .badge.bg-utilis-empresa { background: var(--utilis-primary) !important; color: #fff; }

/* ---------------------------------------------------------------------------
 * Ícones dos itens de topo do menu lateral
 *
 * O core do Vuexy traz, sem condição alguma:
 *
 *   .menu-vertical .menu-inner > .menu-item > .menu-toggle > i:first-child
 *     { display: none }
 *
 * Isso existe porque, no menu vertical nativo do Vuexy, o ícone de um item de
 * topo com submenu vem de outro elemento. Aqui a estrutura publicada em
 * horizontal_menu.json é renderizada também na sidebar (MenuService.save_json_menu
 * grava o mesmo menu_structure nos dois arquivos), então esse `i:first-child`
 * É o ícone real do item — e a regra o apagava.
 *
 * Efeito observado antes deste bloco: dos 10 itens visíveis do menu, 9 ficavam
 * sem ícone; só sobrava o de item-folha (`.menu-link` sem submenu).
 * --------------------------------------------------------------------------- */
.menu-vertical .menu-inner > .menu-item > .menu-toggle > i:first-child {
  /* `!important` e necessario: o template-customizer do Vuexy injeta
     core-dark.css em runtime, DEPOIS deste arquivo no <head>. Como o seletor
     da regra que esconde o icone e identico a este, sem `!important` ela
     venceria a cascata por vir por ultimo. */
  display: inline-block !important;
  width: 1.375rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* Itens-folha de topo: o ícone aparece, mas sem a classe `menu-icon` fica
   colado no texto. Iguala o espaçamento ao dos itens com submenu. */
.menu-vertical .menu-inner > .menu-item > .menu-link > i:first-child:not(.menu-icon) {
  width: 1.375rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* No menu colapsado, o Vuexy desenha um traço de 1.375rem x 1px como
   placeholder NO LUGAR do ícone do item de topo:

     .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas)
       :not(.layout-menu-fixed-offcanvas) .layout-menu.menu-vertical
       .menu-inner > .menu-item > .menu-toggle::before

   As duas regras são um par: uma esconde o ícone, a outra põe o traço no lugar.
   Como o bloco acima reativa o ícone, o placeholder passa a ser desenhado por
   cima dele -- era o traço cruzando o meio de cada ícone na sidebar colapsada.
   `!important` pelo mesmo motivo do bloco anterior (core-dark.css é injetado
   depois deste arquivo). */
.layout-menu-collapsed .menu-vertical .menu-inner > .menu-item > .menu-toggle::before {
  content: none !important;
  display: none !important;
}