/* =====================================================================================================
   Dash JogueiCerto — camada visual "pro" (14/10). SÓ APARÊNCIA: entra pelo includes/dash-tema.php, então
   vale só nas páginas com o tema (as de Telegram/robôs continuam intactas). Nada de lógica muda.
   O dash-pro.js complementa: escurece cartões claros das páginas, agrupa o menu e anima números.
   ===================================================================================================== */
:root{
  --jc-bg:#07070f; --jc-surface:#10111c; --jc-surface2:#161726; --jc-surface3:#1d1e30;
  --jc-line:rgba(255,255,255,.07); --jc-line2:rgba(255,255,255,.12);
  --jc-txt:#ecedf3; --jc-mut:#9496ab; --jc-red:#e01414; --jc-red2:#ff3b3b; --jc-red-deep:#8f0909;
  --jc-ok:#22c55e; --jc-warn:#f59e0b; --jc-radius:16px;
  --jc-shadow:0 10px 30px -12px rgba(0,0,0,.65);
}

/* ---------- fundo ---------- */
body.jc-pro{background:var(--jc-bg)!important;color:var(--jc-txt)}
body.jc-pro::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 600px at 85% -10%,rgba(224,20,20,.13),transparent 60%),
             radial-gradient(700px 500px at 10% 110%,rgba(143,9,9,.12),transparent 60%),var(--jc-bg)}
body.jc-pro ::-webkit-scrollbar{width:10px;height:10px}
body.jc-pro ::-webkit-scrollbar-track{background:transparent}
body.jc-pro ::-webkit-scrollbar-thumb{background:#262738;border-radius:10px;border:2px solid var(--jc-bg)}
body.jc-pro ::-webkit-scrollbar-thumb:hover{background:#3a3b52}
body.jc-pro{scrollbar-color:#262738 transparent}

/* ---------- menu lateral ---------- */
body.jc-pro .admin-sidebar{background:linear-gradient(180deg,rgba(16,17,28,.96),rgba(9,9,18,.97))!important;border-right:1px solid var(--jc-line)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:8px 0 40px -20px rgba(0,0,0,.8)}
body.jc-pro .admin-sidebar::-webkit-scrollbar-track{background:transparent}
body.jc-pro .sidebar-header{padding:20px 18px!important;border-bottom:1px solid var(--jc-line)!important;position:sticky;top:0;z-index:3;
  background:linear-gradient(180deg,rgba(16,17,28,.98),rgba(16,17,28,.9));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.jc-pro .sidebar-logo{filter:drop-shadow(0 0 12px rgba(224,20,20,.45))}
body.jc-pro .sidebar-badge{background:linear-gradient(135deg,var(--jc-red2),var(--jc-red-deep))!important;border-radius:999px!important;padding:4px 10px!important;
  font-size:10px!important;letter-spacing:.12em!important;box-shadow:0 4px 14px -4px rgba(224,20,20,.8)}
body.jc-pro .sidebar-nav{padding:10px 10px 90px!important}

/* busca do menu */
.jc-busca{position:relative;margin:4px 4px 10px}
.jc-busca input{width:100%;height:38px;border-radius:11px;border:1px solid var(--jc-line2);background:rgba(255,255,255,.035);color:var(--jc-txt);
  padding:0 34px 0 34px;font:600 13px "Inter",system-ui,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.jc-busca input::placeholder{color:#6d6f86}
.jc-busca input:focus{border-color:rgba(255,59,59,.6);box-shadow:0 0 0 3px rgba(224,20,20,.15);background:rgba(255,255,255,.06)}
.jc-busca>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#6d6f86;font-size:12px}
.jc-busca kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:700 10px "Inter",sans-serif;color:#6d6f86;border:1px solid var(--jc-line2);border-radius:6px;padding:2px 5px}

/* grupos */
.jc-grupo{margin-bottom:4px}
.jc-grupo-tit{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;padding:10px 10px 6px;color:#6d6f86;
  font:800 10.5px "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.jc-grupo-tit:hover{color:#c9cad8}
.jc-grupo-tit .seta{margin-left:auto;font-size:9px;transition:transform .25s}
.jc-grupo.fechado .jc-grupo-tit .seta{transform:rotate(-90deg)}
.jc-grupo-itens{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.jc-grupo-itens>div{overflow:hidden}
.jc-grupo.fechado .jc-grupo-itens{grid-template-rows:0fr}
.jc-grupo-tit .qtd{background:rgba(255,255,255,.06);color:#8a8ca2;border-radius:999px;padding:1px 7px;font-size:9.5px;letter-spacing:0}

/* itens */
body.jc-pro .admin-sidebar .nav-item{position:relative;gap:11px!important;padding:9px 10px!important;margin:1px 0!important;border-radius:11px!important;border-left:0!important;
  color:#a9abbf!important;font-size:13.5px!important;font-weight:600!important;transition:background .2s,color .2s,transform .2s!important;overflow:hidden}
body.jc-pro .admin-sidebar .nav-item i:first-child{width:30px!important;height:30px;display:grid;place-items:center;border-radius:9px;font-size:13px!important;
  background:rgba(255,255,255,.04);color:#8f91a8;transition:background .2s,color .2s,box-shadow .2s;flex-shrink:0}
body.jc-pro .admin-sidebar .nav-item:hover{background:rgba(255,255,255,.045)!important;color:#fff!important;transform:translateX(3px)}
body.jc-pro .admin-sidebar .nav-item:hover i:first-child{color:var(--jc-red2);background:rgba(224,20,20,.12)}
body.jc-pro .admin-sidebar .nav-item.active{background:linear-gradient(90deg,rgba(224,20,20,.22),rgba(224,20,20,.04))!important;color:#fff!important}
body.jc-pro .admin-sidebar .nav-item.active::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:var(--jc-red2);box-shadow:0 0 12px var(--jc-red2)}
body.jc-pro .admin-sidebar .nav-item.active i:first-child{background:linear-gradient(135deg,var(--jc-red2),var(--jc-red-deep));color:#fff;box-shadow:0 6px 16px -6px rgba(224,20,20,.9)}
body.jc-pro .admin-sidebar .nav-divider{display:none}
body.jc-pro .admin-sidebar .nav-item.jc-escondido{display:none!important}
.jc-nada{display:none;padding:14px 10px;color:#6d6f86;font-size:12.5px;font-weight:600;text-align:center}

/* rodapé do menu (sair) */
.jc-rodape-menu{position:sticky;bottom:0;margin-top:auto;padding:12px;border-top:1px solid var(--jc-line);
  background:linear-gradient(0deg,rgba(9,9,18,.99),rgba(9,9,18,.9));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;gap:10px}
.jc-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--jc-red2),var(--jc-red-deep));color:#fff;font-weight:800;font-size:14px;flex-shrink:0;box-shadow:0 6px 16px -6px rgba(224,20,20,.9)}
.jc-quem{min-width:0;flex:1;line-height:1.25}
.jc-quem b{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-quem span{font-size:11px;color:var(--jc-mut);display:flex;align-items:center;gap:5px}
.jc-quem span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jc-ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.jc-sair{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#a9abbf;background:rgba(255,255,255,.04);text-decoration:none;transition:background .2s,color .2s}
.jc-sair:hover{background:rgba(224,20,20,.18);color:#fff}

/* botão ☰ e fundo no celular */
body.jc-pro .toggle-btn{background:rgba(16,17,28,.9)!important;border:1px solid var(--jc-line2)!important;border-radius:12px!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px -8px rgba(0,0,0,.8)!important}
body.jc-pro .sidebar-backdrop.active{background:rgba(0,0,0,.55)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media(max-width:768px){body.jc-pro .admin-sidebar{transition:transform .35s cubic-bezier(.2,.8,.2,1)!important}}

/* ---------- conteúdo ---------- */
body.jc-pro .admin-content,body.jc-pro .main-content{animation:jcEntra .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes jcEntra{from{opacity:0;transform:translateY(10px)}}

/* superfícies (o JS marca com .jc-sup os blocos que eram claros) */
body.jc-pro .jc-sup{background:linear-gradient(180deg,rgba(22,23,38,.92),rgba(16,17,28,.92))!important;color:var(--jc-txt)!important;
  box-shadow:var(--jc-shadow),inset 0 1px 0 rgba(255,255,255,.04)!important}
body.jc-pro .jc-sup-in{background:rgba(255,255,255,.03)!important}
body.jc-pro .jc-txt{color:var(--jc-txt)!important}
body.jc-pro .jc-mut{color:var(--jc-mut)!important}

/* cabeçalho de página (o 1º bloco grande com h1) */
body.jc-pro .jc-cabeca{position:relative;overflow:hidden;border-radius:20px!important}
body.jc-pro .jc-cabeca::after{content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,20,20,.28),transparent 65%);pointer-events:none;animation:jcRespira 6s ease-in-out infinite}
@keyframes jcRespira{50%{transform:scale(1.15);opacity:.7}}
body.jc-pro .jc-cabeca h1,body.jc-pro .jc-cabeca h2{font-weight:800!important;letter-spacing:-.015em;color:#fff!important}
body.jc-pro .jc-cabeca h1 i,body.jc-pro .jc-cabeca h2 i{background:linear-gradient(135deg,var(--jc-red2),var(--jc-red-deep));-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* cartões de número */
body.jc-pro .jc-stat{position:relative;overflow:hidden;border-radius:var(--jc-radius)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s!important;
  opacity:0;animation:jcSobe .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes jcSobe{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
body.jc-pro .jc-stat:hover{transform:translateY(-4px);border-color:rgba(255,59,59,.35)!important;box-shadow:0 18px 40px -18px rgba(224,20,20,.55),inset 0 1px 0 rgba(255,255,255,.05)!important}
body.jc-pro .jc-stat::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);transform:translateX(-100%);transition:transform .8s;pointer-events:none}
body.jc-pro .jc-stat:hover::after{transform:translateX(100%)}

/* tabelas */
body.jc-pro .jc-sup table,body.jc-pro table.jc-tab{border-collapse:separate!important;border-spacing:0!important}
body.jc-pro table.jc-tab thead th,body.jc-pro table.jc-tab>tr:first-child>th{background:rgba(255,255,255,.035)!important;color:#8f91a8!important;
  font-size:11px!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--jc-line)!important}
body.jc-pro table.jc-tab thead th:first-child{border-top-left-radius:12px}
body.jc-pro table.jc-tab thead th:last-child{border-top-right-radius:12px}
body.jc-pro table.jc-tab td{border-bottom:1px solid rgba(255,255,255,.045)!important;border-top:0!important}
body.jc-pro table.jc-tab tbody tr{transition:background .15s}
body.jc-pro table.jc-tab tbody tr:hover>td{background:rgba(224,20,20,.06)!important}

/* campos */
body.jc-pro .jc-campo{background:rgba(5,5,12,.55)!important;border:1px solid var(--jc-line2)!important;color:var(--jc-txt)!important;border-radius:11px!important;
  transition:border-color .2s,box-shadow .2s!important}
body.jc-pro .jc-campo:focus{border-color:rgba(255,59,59,.65)!important;box-shadow:0 0 0 3px rgba(224,20,20,.16)!important;outline:none!important}
body.jc-pro .jc-campo::placeholder{color:#6d6f86!important}
body.jc-pro select.jc-campo option{background:#10111c;color:#ecedf3}

/* botões (só efeito; as cores de cada página continuam) */
body.jc-pro .admin-content button,body.jc-pro .admin-content .btn,body.jc-pro .main-content button,body.jc-pro .main-content .btn{transition:transform .15s,filter .2s,box-shadow .2s}
body.jc-pro .admin-content button:not(:disabled):hover,body.jc-pro .admin-content .btn:hover,body.jc-pro .main-content button:not(:disabled):hover,body.jc-pro .main-content .btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
body.jc-pro .admin-content button:not(:disabled):active,body.jc-pro .main-content button:not(:disabled):active{transform:translateY(0) scale(.98)}

/* modais */
body.jc-pro .modal-overlay,body.jc-pro .modal{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.jc-pro .modal-content{border-radius:18px!important;animation:jcPop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes jcPop{from{opacity:0;transform:translateY(12px) scale(.96)}}

@media(prefers-reduced-motion:reduce){body.jc-pro *,body.jc-pro *::before,body.jc-pro *::after{animation:none!important;transition:none!important}body.jc-pro .jc-stat{opacity:1}}
/* evita o "piscar" dos cartões brancos antes do JS rodar; se o JS não rodar, aparece sozinho em 1,2 s */
body:has(.admin-sidebar):not(.jc-pro) :is(.content,.admin-content,.main-content){opacity:0;animation:jcFailsafe 0s 1.2s forwards}
@keyframes jcFailsafe{to{opacity:1}}

/* tipografia única no conteúdo (ícones Font Awesome ficam com a fonte deles) */
body.jc-pro :is(.content,.admin-content,.main-content) :not(i):not([class*="fa-"]):not(code):not(pre):not(kbd){font-family:"Inter",system-ui,sans-serif}
body.jc-pro :is(.content,.admin-content,.main-content) :is(td,th,input,select,textarea,button){font-variant-numeric:tabular-nums}
/* título com texto em gradiente escuro (ex.: Usuários): fica branco; o ícone mantém o gradiente vermelho */
body.jc-pro .jc-cabeca :is(h1,h2){background:none!important;-webkit-text-fill-color:#fff!important}
body.jc-pro .jc-cabeca :is(h1,h2) i{-webkit-text-fill-color:transparent!important;background:linear-gradient(135deg,var(--jc-red2),var(--jc-red-deep))!important;-webkit-background-clip:text!important;background-clip:text!important}
/* celular: com o menu aberto o ☰ vai para fora do menu (não cobre a logo) e vira "fechar" */
@media(max-width:768px){
body.jc-pro .toggle-btn{transition:left .35s cubic-bezier(.2,.8,.2,1)!important}
body.jc-pro:has(.admin-sidebar.active) .toggle-btn{left:calc(min(260px,100vw - 54px) + 10px)!important}
}

/* 16/10: ao digitar na busca (Ctrl K) a lista encolhe, a barra de rolagem sumia e o menu "pulava" 15px. Espaço da barra fica sempre reservado. */
body.jc-pro .admin-sidebar{scrollbar-gutter:stable}