/* ==========================================================================
   Vertex Admin — global.css  (spec 329, Regra 2 / FR-018)

   ÚNICO arquivo com valores visuais do painel admin. Mudar um token aqui muda o painel
   inteiro: os tokens alimentam as variáveis do Bootstrap/AdminLTE e as poucas classes
   estruturais próprias. Proibido cor/medida fixa em template ou JS (teste de varredura).
   Independente do sistema principal: não importa nada dele e não é importado por ele.

   Seções: 1 Tokens · 2 Ponte Bootstrap · 3 Ponte AdminLTE · 4 Componentes · 5 Utilitários
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Paleta — tripletos RGB (o Bootstrap compõe transparências a partir deles) */
  --vx-destaque-rgb: 13, 115, 119;        /* petróleo — cor de identidade do admin */
  --vx-sucesso-rgb: 22, 128, 61;
  --vx-perigo-rgb: 200, 38, 38;
  --vx-aviso-rgb: 202, 138, 4;
  --vx-info-rgb: 37, 99, 235;
  --vx-neutro-rgb: 100, 116, 139;
  --vx-texto-rgb: 15, 23, 42;

  --vx-destaque: rgb(var(--vx-destaque-rgb));
  --vx-destaque-escuro: rgb(9, 82, 85);
  --vx-sucesso: rgb(var(--vx-sucesso-rgb));
  --vx-perigo: rgb(var(--vx-perigo-rgb));
  --vx-aviso: rgb(var(--vx-aviso-rgb));
  --vx-info: rgb(var(--vx-info-rgb));
  --vx-neutro: rgb(var(--vx-neutro-rgb));

  /* Superfícies (tema claro) */
  --vx-fundo: rgb(243, 245, 248);
  --vx-superficie: rgb(255, 255, 255);
  --vx-borda: rgb(226, 232, 240);
  --vx-texto: rgb(var(--vx-texto-rgb));
  --vx-texto-suave: rgb(100, 116, 139);
  --vx-texto-sobre-cor: rgb(255, 255, 255);

  /* Sidebar (escura, como a referência AdminLTE) */
  --vx-sidebar-fundo: rgb(17, 24, 39);
  --vx-sidebar-texto: rgb(203, 213, 225);
  --vx-sidebar-texto-ativo: rgb(255, 255, 255);
  --vx-sidebar-hover: rgba(255, 255, 255, 0.06);
  --vx-sidebar-ativo-fundo: var(--vx-destaque);
  --vx-sidebar-largura: 250px;

  /* Tipografia */
  --vx-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vx-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vx-fonte-tamanho: 0.9375rem;
  --vx-fonte-pequena: 0.8125rem;
  --vx-titulo-pagina: 1.375rem;
  --vx-numero-destaque: 1.5rem;
  --vx-peso-forte: 600;

  /* Espaços, raios, sombras */
  --vx-espaco-1: 0.25rem;
  --vx-espaco-2: 0.5rem;
  --vx-espaco-3: 1rem;
  --vx-espaco-4: 1.5rem;
  --vx-raio: 0.5rem;
  --vx-raio-pequeno: 0.375rem;
  --vx-sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --vx-sombra-forte: 0 4px 12px rgba(15, 23, 42, 0.12);

  /* Gráficos (lidos por static/js/graficos.js via getComputedStyle) */
  --vx-grafico-1: var(--vx-destaque);
  --vx-grafico-2: var(--vx-info);
  --vx-grafico-3: var(--vx-aviso);
  --vx-grafico-4: var(--vx-sucesso);
  --vx-grafico-5: var(--vx-perigo);
  --vx-grafico-6: var(--vx-neutro);
  --vx-grafico-grade: var(--vx-borda);
  --vx-grafico-texto: var(--vx-texto-suave);
  --vx-grafico-altura: 260px;

  /* Tabelas no celular: largura mínima antes de rolar dentro do card */
  --vx-tabela-largura-min: 680px;
}

/* 2. PONTE BOOTSTRAP ------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary-rgb: var(--vx-destaque-rgb);
  --bs-success-rgb: var(--vx-sucesso-rgb);
  --bs-danger-rgb: var(--vx-perigo-rgb);
  --bs-warning-rgb: var(--vx-aviso-rgb);
  --bs-info-rgb: var(--vx-info-rgb);
  --bs-secondary-rgb: var(--vx-neutro-rgb);
  --bs-primary: var(--vx-destaque);
  --bs-success: var(--vx-sucesso);
  --bs-danger: var(--vx-perigo);
  --bs-warning: var(--vx-aviso);
  --bs-info: var(--vx-info);
  --bs-secondary: var(--vx-neutro);
  --bs-body-bg: var(--vx-fundo);
  --bs-body-color: var(--vx-texto);
  --bs-body-font-family: var(--vx-fonte);
  --bs-body-font-size: var(--vx-fonte-tamanho);
  --bs-secondary-color: var(--vx-texto-suave);
  --bs-border-color: var(--vx-borda);
  --bs-border-radius: var(--vx-raio);
  --bs-border-radius-sm: var(--vx-raio-pequeno);
  --bs-link-color: var(--vx-destaque);
  --bs-link-color-rgb: var(--vx-destaque-rgb);
  --bs-link-hover-color: var(--vx-destaque-escuro);
  --bs-tertiary-bg: var(--vx-fundo);
  --bs-font-monospace: var(--vx-fonte-mono);
  --bs-focus-ring-color: rgba(var(--vx-destaque-rgb), 0.35);
}

.btn-primary {
  --bs-btn-bg: var(--vx-destaque);
  --bs-btn-border-color: var(--vx-destaque);
  --bs-btn-hover-bg: var(--vx-destaque-escuro);
  --bs-btn-hover-border-color: var(--vx-destaque-escuro);
  --bs-btn-active-bg: var(--vx-destaque-escuro);
  --bs-btn-active-border-color: var(--vx-destaque-escuro);
  --bs-btn-disabled-bg: var(--vx-destaque);
  --bs-btn-disabled-border-color: var(--vx-destaque);
  --bs-btn-color: var(--vx-texto-sobre-cor);
  --bs-btn-hover-color: var(--vx-texto-sobre-cor);
  --bs-btn-active-color: var(--vx-texto-sobre-cor);
  --bs-btn-focus-shadow-rgb: var(--vx-destaque-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--vx-texto-suave);
  --bs-btn-border-color: var(--vx-borda);
  --bs-btn-hover-bg: var(--vx-fundo);
  --bs-btn-hover-color: var(--vx-texto);
  --bs-btn-hover-border-color: var(--vx-neutro);
  --bs-btn-active-bg: var(--vx-fundo);
  --bs-btn-active-color: var(--vx-texto);
}

.form-control,
.form-select {
  --bs-border-radius: var(--vx-raio-pequeno);
  border-color: var(--vx-borda);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--vx-destaque);
  box-shadow: 0 0 0 0.2rem rgba(var(--vx-destaque-rgb), 0.2);
}

.table {
  --bs-table-bg: var(--vx-superficie);
  --bs-table-color: var(--vx-texto);
  --bs-table-border-color: var(--vx-borda);
  --bs-table-hover-bg: var(--vx-fundo);
}

/* 3. PONTE ADMINLTE -------------------------------------------------------- */
.app-sidebar {
  --lte-sidebar-width: var(--vx-sidebar-largura);
  --lte-sidebar-color: var(--vx-sidebar-texto);
  --lte-sidebar-hover-color: var(--vx-sidebar-texto-ativo);
  --lte-sidebar-hover-bg: var(--vx-sidebar-hover);
  --lte-sidebar-active-color: var(--vx-sidebar-texto-ativo);
  --lte-sidebar-menu-active-bg: var(--vx-sidebar-ativo-fundo);
  --lte-sidebar-menu-active-color: var(--vx-sidebar-texto-ativo);
  --lte-sidebar-header-color: var(--vx-texto-suave);
  background-color: var(--vx-sidebar-fundo);
}

.app-header,
.app-footer {
  background-color: var(--vx-superficie);
  border-color: var(--vx-borda);
}

.app-main {
  background-color: var(--vx-fundo);
}

.sidebar-brand {
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-brand .brand-text {
  color: var(--vx-sidebar-texto-ativo);
  font-weight: var(--vx-peso-forte);
  letter-spacing: 0.02em;
}

.sidebar-brand .brand-marca {
  color: var(--vx-destaque);
}

.card {
  --bs-card-bg: var(--vx-superficie);
  --bs-card-border-color: var(--vx-borda);
  --bs-card-border-radius: var(--vx-raio);
  --bs-card-cap-bg: var(--vx-superficie);
  box-shadow: var(--vx-sombra);
}

.card-title {
  font-size: var(--vx-fonte-tamanho);
  font-weight: var(--vx-peso-forte);
}

.info-box {
  border-radius: var(--vx-raio);
  box-shadow: var(--vx-sombra);
  background-color: var(--vx-superficie);
}

.info-box .info-box-number {
  font-size: var(--vx-numero-destaque);
  font-weight: var(--vx-peso-forte);
}

.info-box .info-box-text {
  color: var(--vx-texto-suave);
  font-size: var(--vx-fonte-pequena);
}

.info-box .info-box-detalhe {
  color: var(--vx-texto-suave);
  font-size: var(--vx-fonte-pequena);
}

/* 4. COMPONENTES PRÓPRIOS (usados só pelas macros em templates/componentes) -- */
.vx-titulo-pagina {
  font-size: var(--vx-titulo-pagina);
  font-weight: var(--vx-peso-forte);
  margin: 0;
}

.vx-subtitulo {
  color: var(--vx-texto-suave);
  font-size: var(--vx-fonte-pequena);
}

.vx-badge {
  font-weight: var(--vx-peso-forte);
  border-radius: var(--vx-raio-pequeno);
  font-size: var(--vx-fonte-pequena);
}

.vx-destaque-falhas {
  border-left: 4px solid var(--vx-perigo);
}

.vx-grafico {
  position: relative;
  height: var(--vx-grafico-altura);
}

.vx-estado-vazio {
  color: var(--vx-texto-suave);
  text-align: center;
  padding: var(--vx-espaco-4) var(--vx-espaco-3);
}

.vx-estado-vazio .bi {
  font-size: var(--vx-numero-destaque);
  display: block;
  margin-bottom: var(--vx-espaco-2);
}

.vx-mono {
  font-family: var(--vx-fonte-mono);
  font-size: var(--vx-fonte-pequena);
}

.vx-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vx-espaco-3);
  background-color: var(--vx-sidebar-fundo);
}

.vx-login-caixa {
  width: 100%;
  max-width: 400px;
}

.vx-login-marca {
  color: var(--vx-texto-sobre-cor);
  text-align: center;
  font-size: var(--vx-titulo-pagina);
  margin-bottom: var(--vx-espaco-3);
}

.vx-login-marca .brand-marca {
  color: var(--vx-destaque);
}

.vx-carregando {
  opacity: 0.55;
  transition: opacity 0.2s;
}

.vx-linha-tempo-hora {
  white-space: nowrap;
  color: var(--vx-texto-suave);
  font-size: var(--vx-fonte-pequena);
}

/* Celular: tabela mantém largura legível e rola DENTRO do card (a página nunca rola de lado) */
@media (max-width: 767.98px) {
  .table-responsive > .table {
    min-width: var(--vx-tabela-largura-min);
  }

  .table-responsive > .table .vx-mono {
    overflow-wrap: normal;
    word-break: normal;
  }
}

.vx-badge {
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

/* 5. UTILITÁRIOS ------------------------------------------------------------ */
.vx-oculto {
  display: none !important;
}

.vx-quebra {
  overflow-wrap: anywhere;
}