/* ============================================================
 * virtus-tema-admin.css — Camada de ACABAMENTO do painel Virtus
 * ------------------------------------------------------------
 * Carrega DEPOIS de virtus-admin.css. A divisão é de propósito:
 *
 *   virtus-admin.css       resolve DIVERGÊNCIA (medidas, fontes, tom da
 *                          barra). Sem ela, cada aba abre diferente.
 *   virtus-tema-admin.css  resolve ACABAMENTO (paleta, hover, cartões,
 *                          tabelas, gráficos). É estética.
 *
 * Duas folhas em vez de uma porque as decisões têm vidas diferentes: se
 * um dia você quiser trocar o visual, remove ESTA linha do admin-shell e
 * o painel continua alinhado, só volta ao visual antigo.
 *
 * Nenhuma tela foi editada. Todo o efeito vem de redefinir as variáveis
 * que as 66 telas já usam — é o que torna um redesign global viável sem
 * reenviar 66 arquivos por gerenciador de arquivos.
 * ============================================================ */


/* ═══════════════ 1 · PALETA ═══════════════
 *
 * Aqui está a alavanca do redesign inteiro. Cada tela do admin declara
 * seu próprio :root com estas mesmas variáveis. Como esta folha carrega
 * por último, estes valores vencem — e a paleta nova se propaga para
 * fundo, cartões, textos, bordas, botões e badges de todas as telas de
 * uma vez, sem tocar em nenhuma delas.
 */
:root{
  /* Superfícies — azul-marinho profundo, nunca preto puro */
  --bg:        #061426;
  --bg2:       #081A30;
  --bg3:       #0B2039;
  --surface:   #0B2039;
  --surface2:  #0E2743;

  /* Barra lateral um passo mais escura que a área principal.
     É a "variação tonal extremamente sutil" — 2 pontos de luminância,
     suficiente para separar sem virar duas telas coladas. */
  /* ── A BARRA LATERAL ────────────────────────────────────────────────
   * Eu tinha posto #0A1B31 aqui. O CSS de normalização já pintava a barra
   * de #0A1B33: DUAS unidades de diferença. O tema carregava, sobrescrevia
   * e produzia exatamente a mesma cor — por isso "não mudou nada".
   *
   * Agora vale o valor do briefing, #07182C: azul-marinho profundo, quase
   * preto, mas ainda azul. Contra o #061426 da área principal a diferença
   * é de ~6 unidades — perceptível como separação, longe de virar duas
   * telas coladas.
   *
   * O aspecto "opaco" não vinha só da luminosidade: vinha da saturação.
   * #0A1B31 tem o azul lavado por cinza. #07182C mantém o mesmo grau de
   * escuridão com o azul mais limpo. */
  --adm-sidebar-bg: #07182C;

  /* Linhas e bordas */
  --line:  rgba(148,163,184,.10);
  --line2: rgba(148,163,184,.18);
  --grid:  rgba(148,163,184,.08);

  /* Texto */
  --txt:  #F8FAFC;
  --txt2: #94A3B8;
  --txt3: #64748B;
  --txt4: #475569;

  /* Cores. Azul domina; o resto é estado, não decoração. */
  --cyan:   #08AEEF;
  --blue:   #2563EB;
  --violet: #6D28D9;
  --cyan2:  #06B6D4;
  --green:  #10B981;
  --amber:  #F59E0B;
  --pink:   #F43F5E;
  --red:    #F43F5E;
  /* --gold existia em várias telas e sumiria se eu não remapeasse.
     Aponto para o âmbar da paleta nova em vez de deixar o dourado
     antigo destoando sozinho. */
  --gold:   #F59E0B;

  --r:      13px;   /* raio padrão dos cartões */
  --dur:    200ms;  /* duração base das transições */
  --ease:   cubic-bezier(.16,1,.3,1);
}

html, body{ background: var(--bg) !important; color: var(--txt); }


/* ═══════════════ 2 · BARRA LATERAL ═══════════════ */

.sidebar,
.vadmin-sidebar{
  background: var(--adm-sidebar-bg) !important;
  /* Borda com um fio de azul, não cinza puro: separa da área principal sem
     desenhar uma linha visível. */
  border-right: 1px solid rgba(56,110,180,.16) !important;
  /* Profundidade sem degradê no fundo: uma luz de 1px na aresta interna,
     como acontece em superfície real que recebe luz de cima. É o que dá
     relevo sem cair no "site futurista" que o briefing pede para evitar. */
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03),
              1px 0 24px -8px rgba(0,0,0,.6) !important;
}

/* Faixa da logo: respiro maior e divisória quase imperceptível. */
.vadmin-sb-header,
.sidebar .sb-logo{
  border-bottom: 1px solid rgba(148,163,184,.07) !important;
}

/* ── Item em repouso ──
   Ícone e texto no mesmo tom: nada de ícone colorido individualmente,
   que é o que faz menu parecer template. */
.vadmin-nav-item,
.sidebar .sl{
  color: var(--txt2) !important;
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease) !important;
}
.vadmin-nav-item i,
.sidebar .sl i{ color: currentColor !important; opacity: .78; }

/* ── Hover ──
   Azul translúcido na horizontal, com o brilho vindo de dentro e não de
   uma sombra por fora. */
.vadmin-nav-item:hover,
.sidebar .sl:hover{
  color: var(--txt) !important;
  background: linear-gradient(90deg,
              rgba(14,165,233,.16),
              rgba(37,99,235,.09)) !important;
  border-color: rgba(99,155,255,.14) !important;
}
.vadmin-nav-item:hover i,
.sidebar .sl:hover i{ opacity: 1; }

/* ── Ativo ──
   Degradê contido: 100°, três paradas, opacidade baixa. O que dá a
   sensação de "aplicativo infantil" é saturação alta, não o degradê em
   si — por isso as cores entram em rgba e não chapadas. */
/* CALIBRADO CONTRA A ÁREA DO ALUNO.
 *
 * Minha primeira versão pintava o item ativo em rgba com 30% de opacidade,
 * na intenção de "intensidade muito controlada". O resultado foi o azul
 * opaco que você viu: com 30% sobre um fundo #07182C, o que chega ao olho
 * é quase o fundo, não o azul.
 *
 * O aluno resolve isto com gradiente CHAPADO — virtus-ui.css, linha 44:
 *     --vc-gradiente: linear-gradient(100deg, #2563eb, #7c3aed)
 * mais uma sombra baixa e difusa. É saturado e continua elegante, porque o
 * refinamento vem da sombra e do ângulo, não de diluir a cor.
 *
 * Uso aqui as três paradas que você pediu no briefing, em cor sólida. O
 * ângulo de 100° é o mesmo dos dois lados do sistema. */
.vadmin-nav-item.ativo,
.vadmin-nav-item.active,
.sidebar .sl.active{
  color: #fff !important;
  background: linear-gradient(100deg, #087FC5 0%, #2563EB 55%, #4338CA 100%) !important;
  border: 1px solid rgba(99,155,255,.28) !important;
  /* Sombra baixa, muito difusa e sem deslocamento lateral: dá relevo sem
     virar halo. O valor negativo no spread é o que impede o vazamento. */
  box-shadow: 0 8px 22px -12px rgba(37,99,235,.95),
              inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.vadmin-nav-item.ativo i,
.vadmin-nav-item.active i,
.sidebar .sl.active i{ color: #fff !important; opacity: 1; }

/* ── Indicador lateral ──
   2px, degradê ciano→azul→violeta. É a assinatura visual: aparece só no
   item selecionado e em nenhum outro lugar do sistema. */
.vadmin-nav-item.ativo::before,
.vadmin-nav-item.active::before,
.sidebar .sl.active::before{
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 2.5px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #22D3EE, #3B82F6 55%, #A855F7);
  box-shadow: 0 0 9px -1px rgba(34,211,238,.75);
}

/* ── Rótulos de categoria ──
   Discretos por definição: se competirem com os itens, o menu perde a
   hierarquia. */
.vadmin-sec-label,
.sidebar .sb-section{
  color: var(--txt4) !important;
  font-size: 9.5px !important;
  letter-spacing: .13em !important;
  opacity: .9;
}

/* ── Scrollbar ── */
.vadmin-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.vadmin-sb-nav::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.16) !important;
  border-radius: 99px;
  transition: background var(--dur);
}
.vadmin-sidebar::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.vadmin-sb-nav::-webkit-scrollbar-thumb:hover{
  background: rgba(8,174,239,.45) !important;
}
/* Corpo da página: a mesma barra, para não aparecer a do sistema. */
body::-webkit-scrollbar{ width: 10px; }
body::-webkit-scrollbar-track{ background: var(--bg); }
body::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.14);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
body::-webkit-scrollbar-thumb:hover{ background: rgba(8,174,239,.40); }


/* ═══════════════ 3 · BARRA RECOLHIDA ═══════════════
 *
 * O botão que liga isto é injetado por includes/admin-shell.php, e a
 * escolha fica no navegador. A classe vive no <html> para que a largura
 * já esteja certa antes da primeira pintura — no <body> haveria um salto
 * visível a cada carregamento.
 */
html.adm-fina{ --adm-sidebar: 74px; }

html.adm-fina .vadmin-sidebar,
html.adm-fina .sidebar{ width: 74px !important; }
html.adm-fina .vadmin-main,
html.adm-fina .app-main{ margin-left: 74px !important; }

.vadmin-sidebar, .sidebar,
.vadmin-main, .app-main{
  transition: width var(--dur) var(--ease), margin-left var(--dur) var(--ease);
}

/* Some o texto, ficam os ícones centralizados. */
html.adm-fina .vadmin-nav-item,
html.adm-fina .sidebar .sl{
  justify-content: center;
  padding: 0 !important;
  gap: 0;
  overflow: visible;   /* a dica precisa escapar do item */
}
html.adm-fina .vadmin-nav-item > *:not(i),
html.adm-fina .sidebar .sl > *:not(i){ display: none !important; }
html.adm-fina .vadmin-nav-item{ font-size: 0 !important; }
html.adm-fina .vadmin-nav-item i{ font-size: 19px !important; }

/* Rótulo de categoria vira um traço: mantém o agrupamento sem texto. */
html.adm-fina .vadmin-sec-label,
html.adm-fina .sidebar .sb-section{
  font-size: 0 !important;
  padding: 12px 20px 6px !important;
  min-height: 0;
}
html.adm-fina .vadmin-sec-label::after,
html.adm-fina .sidebar .sb-section::after{
  content: '';
  display: block;
  height: 1px;
  background: var(--line);
  border-radius: 2px;
}

/* Só a esfera da marca quando recolhida. */
html.adm-fina .vadmin-sb-header .vlogo__texto,
html.adm-fina .sidebar .sb-logo .vlogo__texto{ display: none; }

/* ── Dica ao passar o mouse ──
   Feita com ::after e o atributo data-rotulo (posto pelo admin-shell),
   sem elemento extra e sem biblioteca. */
html.adm-fina .vadmin-nav-item[data-rotulo]:hover::after,
html.adm-fina .sidebar .sl[data-rotulo]:hover::after{
  content: attr(data-rotulo);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt);
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 7px 12px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.7);
  animation: adm-dica .16s var(--ease) both;
  pointer-events: none;
}
@keyframes adm-dica{ from{opacity:0;transform:translateY(-50%) translateX(-4px)} to{opacity:1} }

/* Botão de recolher, no rodapé do menu. */
.adm-recolher{
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  margin-top: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--txt3);
  font: 500 12.5px/1 'Manrope','Sora',sans-serif;
  cursor: pointer;
  transition: color var(--dur), background var(--dur);
}
.adm-recolher:hover{ color: var(--txt); background: rgba(255,255,255,.05); }
.adm-recolher i{ font-size: 17px; transition: transform var(--dur) var(--ease); }
html.adm-fina .adm-recolher{ justify-content: center; padding: 0; }
html.adm-fina .adm-recolher span{ display: none; }
html.adm-fina .adm-recolher i{ transform: rotate(180deg); }


/* ═══════════════ 4 · CARTÕES ═══════════════
 *
 * "Reduzir a aparência de caixas": borda de 1px quase invisível, fundo a
 * um passo do fundo da página, sombra mínima. O cartão deve delimitar,
 * não se anunciar.
 */
.card, .panel, .box, .aq-card, .aq-kpi, .bq-card, .stat-card{
  background: var(--surface) !important;
  border: 1px solid rgba(148,163,184,.07) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card:hover, .panel:hover, .aq-card:hover, .stat-card:hover{
  border-color: rgba(148,163,184,.14) !important;
}

/* KPI: número grande com tabular-nums, para que os dígitos não dancem
   quando o valor muda por filtro. */
.aq-kpi .val, .kpi-val, .stat-val, .big-number{
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.2px;
}
.aq-kpi::before, .kpi::before{ opacity: .8; }

/* Espaço para o minigráfico de tendência dentro do KPI. */
.kpi-spark{
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  opacity: .9;
}


/* ═══════════════ 5 · TABELAS ═══════════════ */

table{ border-collapse: collapse; width: 100%; }

th{
  font-family: 'Manrope','Sora',sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt3) !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  white-space: nowrap;
}

td{
  font-size: 13px !important;
  color: var(--txt2) !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(148,163,184,.06) !important;
}

tbody tr{ transition: background var(--dur) var(--ease); }
tbody tr:hover > td{ background: rgba(37,99,235,.055) !important; }
tbody tr:last-child > td{ border-bottom: none !important; }

/* Números à direita e com largura fixa de dígito: coluna de valores
   alinhada é o detalhe que separa tabela de planilha. */
td.mono, td .mono, .num, td[data-num]{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* ── Badges ── */
.badge, .badge-v, .tag{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  border: 1px solid transparent;
  background: rgba(148,163,184,.10);
  color: var(--txt2);
  text-transform: none;
}
.badge-green,.badge-ok   { background: rgba(16,185,129,.12) !important; color:#34D399 !important; border-color: rgba(16,185,129,.22) !important; }
.badge-gold,.badge-warn  { background: rgba(245,158,11,.12) !important; color:#FBBF24 !important; border-color: rgba(245,158,11,.22) !important; }
.badge-red,.badge-erro   { background: rgba(244,63,94,.12)  !important; color:#FB7185 !important; border-color: rgba(244,63,94,.22)  !important; }


/* ═══════════════ 6 · BOTÕES ═══════════════ */

.btn{
  border-radius: 10px !important;
  font-family: 'Manrope','Sora',sans-serif;
  font-weight: 600;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur), border-color var(--dur);
}
.btn-primary{
  background: linear-gradient(100deg, #087FC5, #2563EB) !important;
  box-shadow: 0 2px 12px -4px rgba(37,99,235,.55) !important;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 18px -5px rgba(37,99,235,.7) !important;
}
/* O brilho que atravessa o botão vinha do layout antigo. Some: é efeito
   de landing page, não de painel de trabalho. */
.btn-primary::after{ display: none !important; }

.btn-ghost{
  background: rgba(148,163,184,.06) !important;
  border: 1px solid var(--line2) !important;
  color: var(--txt2) !important;
}
.btn-ghost:hover{
  background: rgba(148,163,184,.10) !important;
  border-color: rgba(8,174,239,.35) !important;
  color: var(--txt) !important;
}

/* ── Campos ── */
input, select, textarea{
  background: rgba(148,163,184,.05) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 10px !important;
  color: var(--txt) !important;
  transition: border-color var(--dur), box-shadow var(--dur);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(8,174,239,.55) !important;
  box-shadow: 0 0 0 3px rgba(8,174,239,.10) !important;
  outline: none !important;
}


/* ═══════════════ 7 · GRÁFICOS ═══════════════
 *
 * A aparência das linhas, barras e roscas é definida em
 * assets/js/virtus-graficos-admin.js, porque cor de série e raio de
 * barra são opções do Chart.js e não CSS. Aqui fica só o que é DOM:
 * o contêiner, a legenda e a dica flutuante.
 */

.aq-cv, .chart-wrap, .grafico{ position: relative; }

/* Dica personalizada, desenhada pelo JS. */
.vg-tip{
  position: fixed;
  z-index: 9999;
  min-width: 132px;
  padding: 10px 12px;
  background: #0A1D34;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.75);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  font-family: 'Inter','Manrope',sans-serif;
}
.vg-tip.on{ opacity: 1; transform: none; }
.vg-tip-cab{
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt3);
  margin-bottom: 7px;
}
.vg-tip-linha{ display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.vg-tip-cor{ width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.vg-tip-rot{ font-size: 12px; color: var(--txt2); }
.vg-tip-val{
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.vg-tip-var{ font-size: 11px; font-weight: 600; margin-top: 6px; }
.vg-tip-var.sobe{ color: #34D399; }
.vg-tip-var.desce{ color: #FB7185; }

/* Total no centro da rosca, desenhado pelo plugin. */
.vg-donut-centro{ pointer-events: none; }


/* ═══════════════ 8 · ESQUELETO DE CARREGAMENTO ═══════════════
 *
 * Reproduz o formato do que vai chegar, em vez de um disco girando no
 * meio da tela. Uso: adicione a classe .vg-skel ao elemento.
 */
.vg-skel{
  background: linear-gradient(90deg,
              rgba(148,163,184,.05) 25%,
              rgba(148,163,184,.11) 37%,
              rgba(148,163,184,.05) 63%);
  background-size: 400% 100%;
  animation: vg-skel 1.3s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  user-select: none;
}
@keyframes vg-skel{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.vg-skel-kpi{ height: 104px; border-radius: var(--r); }
.vg-skel-graf{ height: 250px; border-radius: var(--r); }
.vg-skel-linha{ height: 14px; margin: 9px 0; }


/* ═══════════════ 9 · TELA SEM DADOS ═══════════════ */

.vg-vazio, .aq-vazio{
  display: grid;
  place-items: center;
  gap: 5px;
  text-align: center;
  padding: 52px 22px;
}
.vg-vazio i, .aq-vazio i{
  font-size: 30px;
  color: var(--txt4);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(148,163,184,.04);
  margin-bottom: 6px;
}
.vg-vazio-tit{ font-family:'Sora',sans-serif; font-size: 14.5px; font-weight: 700; color: var(--txt); }
.vg-vazio-sub{ font-size: 12.8px; color: var(--txt3); max-width: 42ch; line-height: 1.6; }


/* ═══════════════ 10 · ENTRADA DA PÁGINA ═══════════════
 *
 * Curta e escalonada. Passar de 600ms faz a interface parecer lenta —
 * o efeito deixa de ser refinamento e vira espera.
 */
@media (prefers-reduced-motion: no-preference){
  .aq-kpi, .kpi, .stat-card{
    animation: vg-sobe .38s var(--ease) both;
  }
  .aq-kpi:nth-child(2),.kpi:nth-child(2){ animation-delay: .04s }
  .aq-kpi:nth-child(3),.kpi:nth-child(3){ animation-delay: .08s }
  .aq-kpi:nth-child(4),.kpi:nth-child(4){ animation-delay: .12s }
  .aq-kpi:nth-child(5),.kpi:nth-child(5){ animation-delay: .16s }
  .aq-kpi:nth-child(6),.kpi:nth-child(6){ animation-delay: .20s }
  .aq-kpi:nth-child(7),.kpi:nth-child(7){ animation-delay: .24s }
  .aq-kpi:nth-child(8),.kpi:nth-child(8){ animation-delay: .28s }
}
@keyframes vg-sobe{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }


/* ═══════════════ 11 · TELAS ESTREITAS ═══════════════ */

@media (max-width: 1280px){
  .aq-grid3{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1024px){
  html.adm-fina{ --adm-sidebar: 0px; }
  .aq-grid3, .aq-grid2{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  th, td{ padding: 10px !important; }
  .aq-kpis{ grid-template-columns: repeat(2,1fr) !important; }
}