/* =====================================================================
 * virtus-admin-mentor.css
 * ---------------------------------------------------------------------
 * Traz o acabamento do Painel do Mentor para o Administrativo.
 *
 * ═══ POR QUE ESTE ARQUIVO EXISTE, EM VEZ DE 81 ARQUIVOS EDITADOS ═══
 *
 * O admin tem 81 telas. Todas usam as mesmas classes genéricas — .card,
 * .btn, .badge — e leem cores de variáveis CSS (--bg, --cyan, --txt2).
 * Isso significa que o visual inteiro está definido em dois lugares, não
 * em oitenta e um.
 *
 * Então este arquivo faz duas coisas, e só duas:
 *   1. redefine as VARIÁVEIS com a paleta do mentor;
 *   2. reestiliza os COMPONENTES DE CASCA (sidebar, topo, cartões,
 *      botões) com o mesmo acabamento.
 *
 * Nenhuma tela foi tocada. Nenhuma marcação mudou. Se algo ficar
 * estranho numa tela específica, basta remover a linha que carrega este
 * arquivo e tudo volta ao que era — é uma camada, não uma reescrita.
 *
 * CARREGAR POR ÚLTIMO, depois de virtus-admin.css e virtus-tema-admin.css.
 * ===================================================================== */

/* ═══════════ 1. PALETA ═══════════
   Os mesmos valores do painel do mentor. Os nomes são os que o admin já
   usa, então a troca se propaga sozinha para as 81 telas. */
:root{
  --bg:        #05070F;
  --bg2:       #080C17;
  --bg3:       #0B1020;
  --surface:   #0E1526;
  --surface2:  #131C33;
  --adm-sidebar-bg: linear-gradient(180deg,#0A0F1E,#070B16);

  --line:  #1A2440;
  --line2: #243156;
  --grid:  rgba(148,163,184,.07);

  --txt:  #EEF2FB;
  --txt2: #9FB0CE;
  --txt3: #66779A;
  --txt4: #4A5878;

  /* Ciano e violeta do index — os mesmos dos botões do site. */
  --cyan:   #00B8FF;
  --cyan2:  #22D3EE;
  --blue:   #2B8EFF;
  --violet: #7A00FF;
  --green:  #22C55E;
  --amber:  #FFB23E;
  --pink:   #F472B6;
  --red:    #F472B6;
  --gold:   #FFB23E;

  --r: 16px;
  --adm-raio: 13px;
  --adm-grad: linear-gradient(135deg,#00B8FF,#7A00FF);
  --adm-ease: cubic-bezier(.16,1,.3,1);
}

body{ background: var(--bg); }

/* ═══════════ 2. SIDEBAR ═══════════ */
.vadmin-sidebar{
  background: var(--adm-sidebar-bg) !important;
  border-right: 1px solid var(--line) !important;
  position: fixed; isolation: isolate;
}
/* Luz ambiente — dois halos em períodos que não coincidem, para o olho
   não achar onde o laço reinicia. Mesma técnica do painel do mentor. */
.vadmin-sidebar::before,
.vadmin-sidebar::after{
  content:''; position:absolute; pointer-events:none; z-index:-1;
  border-radius:50%; filter:blur(46px);
}
.vadmin-sidebar::before{
  width:300px;height:300px;top:-90px;left:-110px;
  background:radial-gradient(circle,rgba(0,184,255,.24),transparent 68%);
  animation:admLuzA 38s ease-in-out infinite;
}
.vadmin-sidebar::after{
  width:240px;height:240px;bottom:8%;right:-100px;
  background:radial-gradient(circle,rgba(122,0,255,.22),transparent 68%);
  animation:admLuzB 52s ease-in-out infinite;
}
@keyframes admLuzA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(26px,120px,0) scale(1.14)}
  66%{transform:translate3d(-14px,300px,0) scale(.92)}
}
@keyframes admLuzB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-30px,-190px,0) scale(1.18)}
  75%{transform:translate3d(18px,-70px,0) scale(.9)}
}

.vadmin-sec-label{
  font-size:9.5px !important; font-weight:700 !important;
  letter-spacing:1.7px !important; text-transform:uppercase !important;
  color:var(--txt3) !important; padding:17px 22px 7px !important;
}

.vadmin-nav-item{
  display:flex; align-items:center; gap:12px;
  margin:1px 12px !important; padding:9px 12px !important;
  border-radius:11px !important; font-size:13.3px !important;
  color:var(--txt2) !important; position:relative; overflow:hidden;
  border:1px solid transparent !important;
  transition:color .28s var(--adm-ease), background .28s var(--adm-ease),
             transform .28s var(--adm-ease), box-shadow .28s var(--adm-ease) !important;
}
.vadmin-nav-item i{
  font-size:17px !important; width:19px; flex:0 0 auto; opacity:.8;
  transition:transform .28s var(--adm-ease), color .28s, opacity .28s;
}
/* Lâmina de luz atravessando o item no hover. */
.vadmin-nav-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(0,184,255,.14) 50%,transparent 65%);
  transform:translateX(-130%);
}
.vadmin-nav-item:hover::after{ transform:translateX(130%); transition:transform .65s var(--adm-ease); }
.vadmin-nav-item:hover{
  color:var(--txt) !important; background:rgba(255,255,255,.045) !important;
  transform:translateX(3px);
  box-shadow:0 6px 22px -16px rgba(0,184,255,.9);
}
.vadmin-nav-item:hover i{ color:var(--cyan); opacity:1; transform:translateX(2px); }

.vadmin-nav-item.active{
  color:#fff !important;
  background:linear-gradient(100deg,rgba(0,184,255,.20),rgba(122,0,255,.14)) !important;
  border-color:rgba(0,184,255,.34) !important;
  box-shadow:0 8px 26px -14px rgba(0,184,255,.9), inset 0 1px 0 rgba(255,255,255,.07) !important;
  animation:admRespira 6s ease-in-out infinite;
}
.vadmin-nav-item.active i{ color:var(--cyan) !important; opacity:1; }
.vadmin-nav-item.active::before{
  content:''; position:absolute; left:-13px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 4px 4px 0;
  background:var(--adm-grad); box-shadow:0 0 10px var(--cyan);
}
@keyframes admRespira{
  0%,100%{box-shadow:0 8px 26px -14px rgba(0,184,255,.7), inset 0 1px 0 rgba(255,255,255,.07)}
  50%    {box-shadow:0 10px 30px -12px rgba(0,184,255,1),  inset 0 1px 0 rgba(255,255,255,.10)}
}

.vadmin-badge{
  margin-left:auto; background:rgba(0,184,255,.18) !important;
  color:var(--cyan) !important; font-size:10px !important; font-weight:700 !important;
  padding:1px 7px !important; border-radius:20px !important;
  border:1px solid rgba(0,184,255,.3) !important;
}

/* ═══════════ 3. TOPO ═══════════ */
.topbar{
  background:rgba(8,12,23,.72) !important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03), 0 12px 30px -24px rgba(0,0,0,1);
}
.topbar .logo{
  background:var(--adm-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:800;
}

/* ═══════════ 4. CARTÕES ═══════════
   Vidro com profundidade e borda que acende no hover — igual ao mentor. */
.card{
  position:relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.028), transparent 60%),
    var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -28px rgba(0,0,0,.9) !important;
  transition:transform .34s var(--adm-ease), box-shadow .34s var(--adm-ease) !important;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px; opacity:0; transition:opacity .34s var(--adm-ease);
  background:linear-gradient(140deg, rgba(0,184,255,.5), transparent 42%, rgba(122,0,255,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.card:hover::before{ opacity:1; }
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -32px rgba(0,0,0,1) !important;
}

/* ═══════════ 5. BOTÕES ═══════════
   Mesmo gradiente do index e do painel do mentor, com altura fixa.
   Altura fixa evita o que aconteceu no mentor: padding + fontes
   diferentes produzem botões de alturas diferentes lado a lado. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 20px; line-height:1;
  border-radius:12px !important; font-weight:700 !important; font-size:13.5px !important;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .24s var(--adm-ease), box-shadow .24s, background .24s, color .24s !important;
}
.btn-sm{ height:32px; padding:0 14px; font-size:12.5px !important; }
.btn i{ font-size:16px; }

.btn-primary{
  background:var(--adm-grad) !important; color:#fff !important; border:none !important;
  box-shadow:0 8px 24px -8px rgba(0,184,255,.55) !important;
}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .6s var(--adm-ease); pointer-events:none;
}
.btn-primary:hover::after{ left:170%; }
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -8px rgba(0,184,255,.75) !important;
}
.btn-ghost, .btn-outline{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#EAF2FF !important; backdrop-filter:blur(8px);
}
.btn-ghost:hover, .btn-outline:hover{
  border-color:rgba(0,184,255,.5) !important; background:rgba(255,255,255,.1) !important;
}
.btn:active{ transform:translateY(0) scale(.98); transition-duration:.09s !important; }

/* ═══════════ 6. ETIQUETAS ═══════════ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.4px;
  padding:4px 10px !important; border-radius:20px !important;
  background:rgba(255,255,255,.05); color:var(--txt2);
}
.badge-green{ background:rgba(34,197,94,.13) !important; color:var(--green) !important; }
.badge-gold { background:rgba(255,178,62,.14) !important; color:var(--amber) !important; }
.badge-red  { background:rgba(244,114,182,.13) !important; color:var(--pink) !important; }

/* ═══════════ 7. TABELAS ═══════════ */
table th{
  font-size:10px !important; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--txt3) !important; font-weight:700 !important;
  border-bottom:1px solid var(--line) !important;
}
table td{ border-bottom:1px solid var(--line) !important; color:var(--txt2); }
tbody tr{ transition:background .22s, box-shadow .22s; }
tbody tr:hover{
  background:linear-gradient(90deg, rgba(0,184,255,.07), transparent 70%) !important;
  box-shadow:inset 2px 0 0 var(--cyan);
}

/* ═══════════ 8. FORMULÁRIOS ═══════════ */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=search],input[type=url],
select,textarea{
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--line2) !important;
  border-radius:12px !important; color:var(--txt) !important;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--cyan) !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:0 0 0 3px rgba(0,184,255,.18) !important;
  outline:none !important;
}

/* ═══════════ 9. FOCO VISÍVEL ═══════════
   Regra geral. Sem ela, navegar o admin por teclado é navegar às cegas:
   o contorno padrão do navegador some no fundo escuro. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:8px;
}

/* ═══════════ 10. ENTRADA EM CASCATA ═══════════ */
.vadmin-sidebar{ animation:admEntraLado .55s var(--adm-ease) both; }
@keyframes admEntraLado{ from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
.topbar{ animation:admEntraTopo .5s var(--adm-ease) both; }
@keyframes admEntraTopo{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .vadmin-nav-item:hover,.card:hover,.btn:hover{ transform:none; }
}