/* =====================================================================
   EdgeSIP — o MÍNIMO que não existe no Velzon
   ---------------------------------------------------------------------
   REESCRITO EM 17/08/2026.

   A versão anterior redefinia coisas que o tema já resolve — entre elas
   `.table thead th`, com fundo e cor próprios. Isso clareava o cabeçalho
   das tabelas no modo escuro, que é justamente o defeito relatado.

   Confirmado no app.min.css: o tema NÃO estiliza `thead th`. Ele define
   só a cor da borda (`.table>thead{border-color:var(--vz-border-color)}`)
   e deixa o cabeçalho herdar o fundo da tabela. Qualquer regra nossa ali
   quebra o modo escuro.

   REGRA DAQUI PARA A FRENTE
   Nada neste arquivo pode redefinir componente do tema. Se o Velzon tem
   uma classe para aquilo, use a classe — não escreva CSS.

   O que sobrou aqui são três coisas que o tema realmente não tem:
   substituição da fonte de ícones, um estado de menu que não existe, e
   dois blocos de conteúdo próprios da aplicação.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Material Design Icons -> Remix
   ---------------------------------------------------------------------
   O Velzon usa DUAS famílias de ícone: Remix nas telas e Material Design
   Icons em pseudo-elementos internos (seta de menu, seta de dropdown,
   separador de breadcrumb, ordenação de tabela, checkbox, X de alerta).

   O build enxuto só traz o Remix — sem isto esses pontos viram o
   quadradinho de fonte ausente. Cada codepoint abaixo foi lido do
   próprio remixicon.min.css.
   --------------------------------------------------------------------- */

/* Seta dos grupos do menu. Aponta para a direita quando fechado; o
   próprio Velzon rotaciona 90° ao abrir. */
.navbar-menu .navbar-nav .nav-link[data-bs-toggle="collapse"]::after{
  font-family:remixicon !important;
  content:"\ea6e" !important;
  font-size:1.05rem;
}

.dropdown-toggle::after{
  font-family:remixicon !important;
  content:"\ea4e" !important;
  font-size:1rem;
  vertical-align:middle;
}

.breadcrumb-item+.breadcrumb-item::before{
  font-family:remixicon !important;
  content:"\ea6e" !important;
  font-size:14px;
}

.table .sort::before{ font-family:remixicon !important; content:"\ea78" !important; }
.table .sort::after { font-family:remixicon !important; content:"\ea4e" !important; }

.alert-dismissible .btn-close::after{
  font-family:remixicon !important;
  content:"\eb99" !important;
}

.form-check-outline .form-check-input:checked[type="checkbox"]::before{
  font-family:remixicon !important;
  content:"\eb7b" !important;
}

.custom-accordionwithicon .accordion-button::after{
  font-family:remixicon !important; content:"\ea6e" !important;
}
.custom-accordionwithicon .accordion-button:not(.collapsed)::after{
  content:"\ea4e" !important;
}


/* ---------------------------------------------------------------------
   2. Item de menu ainda não implementado
   ---------------------------------------------------------------------
   Estado que o tema não prevê. Aparece, mas não clica — o operador vê o
   mapa completo do sistema desde o primeiro dia, em vez de o menu
   "crescer" e mudar de lugar a cada entrega.
   --------------------------------------------------------------------- */
.item-pendente{
  display:block;
  opacity:.38;
  cursor:not-allowed;
  user-select:none;
}
.item-pendente:hover{ background:transparent !important; }
.nav-sm .item-pendente{ padding:.55rem 1.5rem; }


/* ---------------------------------------------------------------------
   3. Rolagem do menu lateral
   ---------------------------------------------------------------------
   O app.js do Velzon aplica SimpleBar em #scrollbar apenas em alguns
   modos de layout. Sem ele, um menu mais alto que a tela corta — foi o
   que aconteceu com os últimos blocos. Isto garante rolagem em qualquer
   caso, sem alterar aparência.
   --------------------------------------------------------------------- */
#scrollbar{
  max-height:calc(100vh - var(--vz-header-height, 70px));
  overflow-y:auto;
  overflow-x:hidden;
}


/* ---------------------------------------------------------------------
   4. Blocos de conteúdo da aplicação
   ---------------------------------------------------------------------
   Não são componentes do tema — são conteúdo que só existe aqui.
   --------------------------------------------------------------------- */

/* Números de telefone, valor e data alinhados na coluna. */
.num{ font-variant-numeric:tabular-nums; }

/* Estado vazio de listagem. */
.vazio{ padding:3rem 1rem; text-align:center; color:var(--vz-secondary-color); }
.vazio i{ font-size:2.5rem; opacity:.4; display:block; margin-bottom:.75rem; }

/* Aviso de pendência da API — usado enquanto um campo não existe no
   backend. Cores vindas das variáveis do tema, para acompanhar claro e
   escuro sem regra extra. */
.aviso-api{
  border-left:3px solid var(--vz-warning);
  background:var(--vz-warning-bg-subtle);
  color:var(--vz-warning-text-emphasis);
  padding:.6rem .9rem;
  font-size:.8125rem;
  border-radius:var(--vz-border-radius);
}

/* ---------------------------------------------------------------------
   Choices.js dentro de modal
   ---------------------------------------------------------------------
   A lista suspensa do Choices e' posicionada em relacao ao container. Sem
   z-index acima do modal, ela aparece ATRAS dele e o operador ve so' o
   campo de busca sem as opcoes.
   --------------------------------------------------------------------- */
.modal .choices__list--dropdown,
.modal .choices__list[aria-expanded]{ z-index: 1056; }

/* O Choices envolve o select num wrapper proprio; sem isto ele fica com
   margem inferior que desalinha do resto do formulario. */
.choices{ margin-bottom: 0; }

/* Ultima linha da lista de emitentes sem borda inferior. Resolver por CSS
   em vez de controlar o indice no laco PHP. */
.lista-emitentes > div:last-child{ border-bottom: 0 !important; }

/* ---------------------------------------------------------------------
   FUNDO DA TELA DE LOGIN
   ---------------------------------------------------------------------
   O markup do login e' o auth-signin-basic do Velzon, sem alteracao. O
   unico ajuste esta' aqui, e sao duas coisas:

   1. `.auth-one-bg-position` do tema e' uma FAIXA no topo: 380px (280px
      em tela menor). Serve ao modelo, em que a arte termina numa onda e o
      resto da pagina e' o fundo do corpo. O pedido foi a imagem ocupando
      a TELA, entao a faixa vira altura cheia.

   2. `.auth-one-bg` aponta para o auth-one-bg.jpg que vem no tema.
      Trocado pela nossa arte.

   A imagem e' servida como esta': 2560x1600, PNG, sem redimensionar e sem
   recomprimir. `background-size:cover` so' recorta o excesso conforme a
   proporcao da janela - nao reamostra o arquivo. `background-attachment:
   fixed` mantem a arte parada quando o cartao empurra a pagina em tela
   baixa, que e' o que o modelo faz com a faixa.

   Nao ha `.bg-overlay` no markup: no tema ele pinta um gradiente primary
   a 90% de opacidade por cima do fundo, feito para uniformizar a foto de
   banco de imagens do Velzon. Sobre arte propria ele apagaria a arte.
   --------------------------------------------------------------------- */
.auth-bg-edgesip{
  height:100%;
  min-height:100vh;
  background-image:url(../images/auth-bg-edgesip.png);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ---------------------------------------------------------------------
   A FONTE DO TEMA - CORRECAO DE 01/09/2026
   ---------------------------------------------------------------------
   O painel inteiro estava sendo desenhado em TIMES NEW ROMAN. Nao era
   escolha: era uma cadeia de variaveis do Velzon que nao fechava.

     body                          font-family: var(--vz-body-font-family)
     --vz-body-font-family    ->   var(--vz-font-sans-serif)
     --vz-font-sans-serif     ->   var(--vz-font-family-secondary)
     --vz-font-family-secondary -> definida SO' dentro de [data-theme=...]

   O ultimo elo mora em `[data-theme=default]` e `[data-theme=corporate]`
   no app.min.css. Nenhuma pagina nossa tinha o atributo `data-theme` no
   <html>, entao a variavel nunca existia, a cadeia toda virava valor
   invalido e o navegador usava a fonte padrao dele.

   POR QUE NAO RESOLVER SO' COM data-theme=corporate
   Essa e' a unica variante do tema que ja aponta para Public Sans, mas
   ela repinta a paleta INTEIRA: primary vira #687cfe, success #3cd188,
   o fundo do corpo #fbf7f4. Cinquenta e nove variaveis mudam. Trocaria
   a identidade do produto para consertar uma fonte.

   O QUE FOI FEITO
   `data-theme="default"` no <html> - o mesmo valor que o proprio
   auth-signin-basic.html do Velzon usa - que traz a tipografia e o
   espacamento do tema (--vz-font-base: 0.8125rem, headings em 500) sem
   tocar em cor nenhuma. E, aqui embaixo, as duas familias apontadas para
   Public Sans.

   POR QUE Public Sans E NAO hkgrotesk/Poppins
   Sao esses os nomes que o `default` traz, mas nenhum dos dois esta
   hospedado neste servidor - cairiam no sans-serif generico do sistema.
   Public Sans e' a fonte que o projeto baixou e serve localmente desde
   10/08/2026, em /assets/fonts, nos pesos 400/500/600/700. E nao e'
   escolha nossa: e' o mesmo valor que o Velzon usa na variante
   `corporate`, entao continua sendo fonte do tema.
   --------------------------------------------------------------------- */
:root{
  --vz-font-family-primary:   "Public Sans", sans-serif;
  --vz-font-family-secondary: "Public Sans", sans-serif;
}

/* ---------------------------------------------------------------------
   LOGIN: O BLOCO CENTRADO DE VERDADE
   ---------------------------------------------------------------------
   `.auth-page-content` do tema traz `padding-bottom:60px`. Ele existe
   para o modelo original, em que a pagina comeca no alto e cresce para
   baixo - a folga separa o cartao do rodape.

   Com o conteudo centralizado na vertical esse padding deixa de ser
   folga e vira desequilibrio: ele encolhe a caixa em que o navegador
   centraliza, e o conjunto sobe. Medido em 1920x1080: 283px acima contra
   343px abaixo, exatamente os 60px do padding.

   Zerado so' aqui dentro do login. O padding continua valendo em
   qualquer outra tela de auth.
   --------------------------------------------------------------------- */
.auth-page-wrapper .auth-page-content.flex-grow-1{ padding-bottom:0; }

/* ---------------------------------------------------------------------
   DASHBOARD: O GRAFICO TERMINA JUNTO COM A COLUNA DE CARDS
   ---------------------------------------------------------------------
   O cartao de "Chamadas simultaneas" tinha a area do desenho fixa em
   210px. Como a coluna da direita e' composta por tres cards de conteudo
   variavel, as duas nunca terminavam na mesma linha -- sobrava um pedaco
   de um lado ou do outro, dependendo da tela.

   Ja tentamos o caminho oposto, esticar os tres cards com `h-100` e
   `flex-fill`: a coluna transbordava por cima da linha seguinte. Por isso
   quem cede agora e' o grafico.

   COMO FUNCIONA
   O cartao ocupa 100% da altura da linha (que o Bootstrap ja estica), e
   dentro dele a area do desenho e' o unico elemento flexivel. Cabecalho e
   rodape tem altura propria; o que sobra vai todo para o desenho. Se a
   coluna da direita crescer, o desenho cresce junto; se encolher, encolhe.
   Nao ha numero para acertar, e nada quebra quando o conteudo mudar.

   O `min-height` existe para o desenho nunca virar um risco: mesmo que a
   coluna ao lado fique curta, o grafico para de encolher em 170px.

   So de xl para cima. Abaixo disso as colunas empilham, nao ha nada com
   que alinhar, e a altura volta a ser a fixa do `dash-sim-area`.
   ------------------------------------------------------------------- */
.dash-sim-area { height: 210px; }

@media (min-width: 1200px) {
  .dash-sim-card { height: 100%; }

  .dash-sim-card > .card-body { display: flex; flex-direction: column; }

  /* O #sim-grafico e' o alvo do recarregamento por AJAX a cada 3s: ele
     fica entre o card-body e o conteudo do partial, e precisa repassar a
     flexibilidade para dentro. */
  .dash-sim-card #sim-grafico {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .dash-sim-card .dash-sim-area {
    height: auto;
    flex: 1 1 auto;
    min-height: 170px;
  }
}
