/* Dash JogueiCerto — tela ao vivo (16/10): aviso de novidade, brilho no que mudou e tabelas .tbl em cartão no celular */
#jv-novo{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:10050;
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:#d20d0d;color:#fff;font:600 14px/1 Inter,-apple-system,sans-serif;box-shadow:0 14px 34px -10px rgba(210,13,13,.8);cursor:pointer;transition:transform .25s,opacity .25s}
#jv-novo.on{transform:translate(-50%,0);opacity:1}
#jv-novo b{font-weight:800;text-decoration:underline}
.jv-novo{animation:jvBrilho 1.6s ease-out}
@keyframes jvBrilho{0%{box-shadow:0 0 0 2px rgba(34,197,94,.75);background-color:rgba(34,197,94,.12)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.jv-novo{animation:none}}

@media (max-width:760px){
  .content .tbl{overflow:visible!important}
  .content .tbl table,.content .tbl tbody,.content .tbl tr,.content .tbl td{display:block;width:100%;box-sizing:border-box}
  .content .tbl table{border-collapse:separate;border-spacing:0;min-width:0!important}
  .content .tbl tr.jv-cab{display:none}
  .content .tbl tr{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:6px 14px;margin:0 0 10px}
  .content .tbl td{display:flow-root;text-align:right;padding:9px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.05)!important;word-break:break-word}
  .content .tbl td:last-child{border-bottom:0!important}
  .content .tbl td[data-jv]:not([data-jv=""])::before{content:attr(data-jv);float:left;margin-right:12px;max-width:42%;text-align:left;color:#8b8da3;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
  .content .tbl td.jc-cliente{display:block;text-align:left}
  .content .tbl td.jc-cliente[data-jv]::before{float:none;display:block;margin-bottom:6px}
  .content .tbl td.jv-acoes{display:block;text-align:left}
  .content .tbl td.jv-acoes::before{float:none;display:block;margin-bottom:8px;max-width:none}
  .content .tbl td.jv-acoes .acoes,.content .tbl td.jv-acoes>form{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .content .tbl td.jv-acoes .acoes>form{display:flex;flex:1 1 0;min-width:120px}
  .content .tbl td.jv-acoes .btn,.content .tbl td.jv-acoes button{flex:1 1 0;justify-content:center;min-height:46px;padding:10px 14px!important;font-size:14px!important;border-radius:12px!important}
  .content .tbl td.jv-acoes input[type=text],.content .tbl td.jv-acoes input:not([type]),.content .tbl td.jv-acoes select{flex:1 1 100px;min-height:44px;font-size:16px}
  .content .tbl td .muted{text-align:inherit}
}

/* 16/10 app do iPhone (tela inicial, barra de status transparente): nada clicável embaixo da barra de status.
   env() = 0 no navegador comum e no PC, então lá nada muda. */
html{padding-top:env(safe-area-inset-top,0px)}
body.jc-hub .toggle-btn,.toggle-btn{top:calc(14px + env(safe-area-inset-top,0px))!important}
body.jc-hub .hb-topo,.hb-topo{top:calc(10px + env(safe-area-inset-top,0px))!important}
.admin-sidebar{padding-top:env(safe-area-inset-top,0px)!important;box-sizing:border-box}
.modal-overlay{padding-top:calc(16px + env(safe-area-inset-top,0px))!important}

/* 16/10: cabeçalho fixo (sticky) é uma pílula; ao rolar, o texto da página aparecia em volta dele e "por cima" do
   botão ☰ (parecia tudo sobreposto). Faixa escura atrás do cabeçalho tampa o conteúdo que passa por baixo. */
.hb-topo::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-70px;right:-18px;top:calc(-14px - env(safe-area-inset-top,0px));bottom:-14px;
  background:linear-gradient(180deg,#07070d 0,#07070d 72%,rgba(7,7,13,0) 100%)}
@media (min-width:769px){.hb-topo::before{left:-28px;right:-28px}}

/* 16/10: ~40 abas tinham html,body{overflow-x:hidden}. Isso faz o body virar caixa de rolagem própria, e a barra do
   topo (sticky) passa a se medir pelo body: no app do iPhone descia ~55px e cobria o título; no PC não ficava fixa
   ao rolar. overflow-x:clip corta o excesso lateral igual, sem criar caixa de rolagem. Travas de menu/chat
   (html.menu-aberto body / html.sup-chat, overflow:hidden) são mais específicas e continuam valendo. */
html,body{overflow-x:clip!important}
/* 16/10: ~10 abas (avisos, torneios/missões/roleta, apostas-esporte, afiliados, divulgadores, pag. antecipado, vigia,
   clonador) traziam body{padding:22px 16px 60px} próprio: barra do topo 22px mais baixa e 14px fora do alinhamento
   das outras abas. Mesmo respiro para todas: o padding fica só no .content, igual ao Dashboard. */
body.jc-hub{padding:0!important}
body.jc-hub:not([data-jc-pg="suporte"]) > .content{padding:12px 30px 60px!important}
@media(max-width:768px){body.jc-hub:not([data-jc-pg="suporte"]) > .content{padding:12px 16px 40px!important}}

/* 16/10 (2): modal no centro quando cabe; quando não cabe, começa no topo e rola dentro do fundo escuro.
   Página de trás travada (html.jv-trava, ver dash-vivo.js). */
.modal-overlay.active{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100%;height:100dvh}
.modal-overlay.active>.modal-content{margin-top:auto!important;margin-bottom:auto!important;flex-shrink:0}
html.jv-trava{overflow:hidden}
/* 16/10 (2): lista aberta do "selecionar" vinha com texto branco em fundo branco (Android/PC) */
select{color-scheme:dark}
select option,select optgroup{background:#10111c;color:#ecedf3}
/* 16/10 (2): faixa atrás do cabeçalho sólida até a borda; o conteúdo não aparece mais por baixo da barra */
.hb-topo::before{background:linear-gradient(180deg,#07070d 0,#07070d calc(100% - 6px),rgba(7,7,13,0) 100%)}
/* 16/10 (2): "Editando: <nome>" no Editar Usuário saía escuro sobre escuro */
.modal-content .user-info-box strong,.modal-content .trans-info-box strong{color:#ff4d4d!important}

/* 16/10: tudo que "gruda" ao rolar tem que parar ABAIXO do cabeçalho fixo (.hb-topo: top 10px + 62px no PC,
   54px no celular, + safe-area do app do iPhone). Antes a prévia dos banners grudava a 12-18px do topo e
   passava por baixo do cabeçalho; e com uma coluna só (abaixo de 1100px) a prévia de 620px grudava por cima do formulário. */
body.jc-hub{--hb-livre:calc(84px + env(safe-area-inset-top,0px))}
@media(max-width:768px){body.jc-hub{--hb-livre:calc(76px + env(safe-area-inset-top,0px))}}
body.jc-hub .preview-cx,body.jc-hub .pronto-previa,body.jc-hub[data-jc-pg="divulgadores"] .barra{top:var(--hb-livre)!important}
@media(max-width:1099px){body.jc-hub .preview-cx{position:static!important}}
/* a prévia do editor de banners mora dentro de um <div> sem classe (o item da grade .editor); sticky nela
   não fazia nada porque o pai tinha a altura dela. Quem gruda agora é esse item da grade, abaixo do cabeçalho. */
@media(min-width:1100px){body.jc-hub .editor>div:has(>.preview-cx){position:sticky;top:var(--hb-livre);align-self:start}body.jc-hub .preview-cx{position:static!important}}