/* ==========================================================================
   CIUTEK - Velvet Nexus: limpeza, centralizacao e lateral

   Este arquivo faz tres coisas:
     1. impede que componentes do tema anterior aparecam no Velvet Nexus;
     2. centraliza a plataforma no computador e no celular;
     3. desenha os dois botoes da coluna da direita.

   Nada aqui apaga codigo do servidor. As telas antigas continuam existindo
   para quem precisar delas; elas apenas nao aparecem enquanto este tema
   estiver ativo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Componentes do tema anterior que nao aparecem mais
   -------------------------------------------------------------------------- */
.ctk-app .chat-all-container,          /* barra "Amigos Online" */
.ctk-app .wow_side_invite_prnt,        /* "Convidar Seus Amigos" */
.ctk-app #sidebar-sticky,              /* "ultimas atividades" */
.ctk-app .ck-oculto-nexus {
  display: none !important;
}

/* "1 pessoa da sua rede esta on-line" - o cartao inteiro, nao so o texto */
.ctk-app .col-md-3.sidebar.rightcol ul.list-group:has(.wow_side_online) { display: none !important; }
.ctk-app .wow_side_online { display: none !important; }

/* o botao "+ Mais" do criador de publicacao e o painel que ele abria */
.ctk-app .sun_pub_mid_foot .poster-left-buttons:has(.btn.mor) { display: none !important; }
.ctk-app .sun_pub_mid_foot .btn.mor,
.ctk-app .sun_foot_drop_menu { display: none !important; }

/* --------------------------------------------------------------------------
   2. Centralizacao da plataforma
   O trilho da esquerda tem 76px e fica por cima do conteudo. Para o conteudo
   ficar centrado no espaco que sobra, a caixa ganha um recuo interno do mesmo
   tamanho do trilho e e centrada com margem automatica.
   -------------------------------------------------------------------------- */
/* O corpo reservava 250px a direita para a barra de chat antiga. Com ela
   fora do tema, esse espaco so desalinhava a pagina inteira. */
.ctk-app { padding-right: 0 !important; }
.ctk-app .navbar { padding-right: 0 !important; }

@media (min-width: 992px) {
  .ctk-app.ck-com-trilho #ck-conteudo,
  .ctk-app.ck-com-trilho .navbar .container-fluid {
    max-width: 1176px;            /* 1100 de conteudo + 76 do trilho */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 76px !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
  /* sem o trilho (visitante deslogado) nao ha o que compensar */
  .ctk-app:not(.ck-com-trilho) #ck-conteudo,
  .ctk-app:not(.ck-com-trilho) .navbar .container-fluid {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 991px) {
  .ctk-app #ck-conteudo,
  .ctk-app .navbar .container-fluid {
    /* o .container do tema traz uma largura fixa por faixa; no celular ela
       deixava uma sobra so de um lado */
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;   /* margem lateral pedida: entre 12 e 16px */
    padding-right: 14px !important;
    box-sizing: border-box;
  }
  .ctk-app .col-md-3.sidebar.rightcol,
  .ctk-app .col-md-6,
  .ctk-app .col-md-8,
  .ctk-app .col-md-4 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* nada pode empurrar a pagina para os lados */
.ctk-app { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   3. Os dois botoes da coluna da direita
   Ficam no lugar que era da barra de amigos on-line.
   -------------------------------------------------------------------------- */
.ck-lados {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
}

.ck-lado {
  --ck-lado-a: #9a6bff;
  --ck-lado-b: #7a41f0;
  --ck-lado-c: #4a1fb0;

  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(135deg, var(--ck-lado-a) 0%, var(--ck-lado-b) 52%, var(--ck-lado-c) 100%);
  /* profundidade: luz em cima, sombra embaixo, apoio no chao */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .26),
    0 8px 20px rgba(122, 65, 240, .34);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.ck-lado:hover {
  color: #fff;
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 0 rgba(0, 0, 0, .26),
    0 12px 28px rgba(122, 65, 240, .46);
}
.ck-lado:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .34),
    0 3px 10px rgba(122, 65, 240, .30);
}
.ck-lado:focus-visible {
  outline: 2px solid #d9c6ff;
  outline-offset: 3px;
}

/* o segundo botao muda de temperatura para nao virar um par igual */
.ck-lado--assinar {
  --ck-lado-a: #c9a4ff;
  --ck-lado-b: #8b5cf6;
  --ck-lado-c: #3b1592;
}

.ck-lado__icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30);
}
.ck-lado__icone svg { width: 19px; height: 19px; }

.ck-lado__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-lado__titulo { font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.ck-lado__apoio {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-lado__contador {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--ck-lado-c);
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.ck-lado__contador[data-ck-tem="1"] { display: flex; }

@media (max-width: 991px) {
  .ck-lados { flex-direction: row; }
  .ck-lado { min-height: 52px; padding: 0 14px; }
  .ck-lado__apoio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-lado { transition: none; }
}


/* ==========================================================================
   O 1 px de rolagem lateral no celular

   O .container recebe 14 px de folga lateral, mas a .row do Bootstrap vem
   com margem negativa de 15 px de fabrica. A diferenca de 1 px de cada lado
   era o que fazia a pagina rolar para o lado - o suficiente para o gesto
   horizontal ficar solto e a tela tremer ao arrastar.

   Os dois numeros agora saem da mesma variavel, entao nao ha como voltarem
   a discordar. So a linha de primeiro nivel e ajustada: .row aninhada, que
   vive dentro de uma coluna com folga propria, fica como esta.
   ========================================================================== */
@media (max-width: 991px) {
  .ctk-app { --ck-folga-lateral: 14px; }

  .ctk-app .content-container.container {
    padding-left: var(--ck-folga-lateral) !important;
    padding-right: var(--ck-folga-lateral) !important;
  }
  .ctk-app .page-margin > .row {
    margin-left: calc(var(--ck-folga-lateral) * -1) !important;
    margin-right: calc(var(--ck-folga-lateral) * -1) !important;
  }
}


/* ==========================================================================
   Rolagem lateral: os dois casos que sobraram
   ========================================================================== */
@media (max-width: 991px) {

  /* 1. A pagina de perfil traz .row e .page-margin no MESMO elemento, entao
        o seletor de filho nao a alcancava. Mesmo acerto, outra forma. */
  .ctk-app .row.page-margin {
    margin-left: calc(var(--ck-folga-lateral, 14px) * -1) !important;
    margin-right: calc(var(--ck-folga-lateral, 14px) * -1) !important;
  }

  /* 2. Em tela de 320 px os dois botoes laterais somavam 317 px num espaco
        de 306 px. Um item flex nasce com min-width: auto e por isso se
        recusa a encolher abaixo do proprio conteudo. Liberando isso, eles
        dividem a largura em duas metades iguais e o texto quebra dentro. */
  .ctk-app .ck-lados { flex-wrap: wrap; }
  .ctk-app .ck-lados > .ck-lado {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 3. A faixa de filtros ja se recortava sozinha (overflow-x: hidden), de
        modo que em tela estreita os ultimos icones ficavam inalcancaveis:
        cortados, sem jeito de chegar neles. Agora ela rola, como a faixa
        dos Stories. */
  .ctk-app ul.list-group.filterby {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ctk-app ul.list-group.filterby::-webkit-scrollbar { display: none; }
  .ctk-app ul.list-group.filterby > li { flex: 0 0 auto; }
}