/* ============================================================
   COMPREC — tema para o Perfex CRM
   Copie este arquivo para:  perfex_crm/assets/css/custom.css
   O Perfex carrega esse arquivo por ultimo, entao ele manda
   em cima do visual de fabrica. Nao precisa editar nada do Perfex.

   Cores e fontes vem de comprec-documento-mestre.pdf, secao 11.
   ============================================================ */

/* A Inter e a unica fonte do CRM. Nada de serifa aqui: decidido em
   10/11/2026, depois de a Fraunces aparecer nos titulos de novo. Ela fica
   para o material de marca, nao para a tela de quem trabalha o dia inteiro. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --cp-verde-escuro:   #0B5348;
  --cp-verde-agua:     #48BAB8;
  --cp-branco:         #FFFFFF;
  --cp-verde-profundo: #0A3F35;
  --cp-verde-gelo:     #E8F0EF;
  --cp-cinza-medio:    #5F5E5A;

  --cp-verde-hover:        #0E6456;
  --cp-verde-agua-escuro:  #2E9A98;
  --cp-verde-agua-fraco:   #DCF0EF;
  --cp-tinta:              #10221F;
  --cp-linha:              #DCE6E4;
  --cp-fundo-suave:        #F5F8F7;

  /* Os tres sao a mesma fonte de proposito: titulo se distingue pelo peso e
     pelo tamanho, nao por trocar de familia. */
  --cp-fonte-titulo: "Inter", "Segoe UI", system-ui, sans-serif;
  --cp-fonte-numero: "Inter", "Segoe UI", system-ui, sans-serif;
  --cp-fonte-texto:  "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- 1. Base ---------- */

body,
body .tw-font-sans {
  font-family: var(--cp-fonte-texto) !important;
  color: var(--cp-tinta);
}

/* Degradê atrás do conteúdo, para os cartões brancos ficarem apoiados em algo
   e não num cinza chapado. */
#wrapper {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(72, 186, 184, 0.10), transparent 60%),
    radial-gradient(900px 480px at 96% 4%, rgba(11, 83, 72, 0.07), transparent 62%),
    linear-gradient(180deg, #F2F7F6 0%, var(--cp-fundo-suave) 40%, #EFF4F3 100%);
  background-attachment: fixed;
}

.content {
  background: transparent;
}

/* Titulos de pagina na voz da marca: caixa baixa, serifa */
.panel-heading h4,
.panel_s .panel-heading .panel-title,
h4.no-margin,
.customer-profile-group-heading,
.heading-title {
  font-family: var(--cp-fonte-titulo) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- 2. Barra lateral (verde escuro institucional) ---------- */

/* Degradê suave no fundo da barra, mais claro em cima e mais fundo embaixo.
   Dá profundidade sem sair do verde da marca. */
.sidebar,
#menu,
#setup-menu-wrapper {
  background: linear-gradient(177deg,
              #0E6155 0%,
              var(--cp-verde-escuro) 42%,
              #083A31 100%) !important;
  border-right: 0 !important;
}

/* ícones de traço, no lugar dos cheios do Perfex */
.sidebar ul.nav li a svg.cp-icone {
  width: 18px;
  height: 18px;
  flex: none;
  margin-right: 14px;
  float: left;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.sidebar ul.nav li.active > a svg.cp-icone,
.sidebar ul.nav li > a:hover svg.cp-icone {
  opacity: 1;
}

/* os que sobrarem em Font Awesome ficam mais leves, para combinar */
.sidebar ul.nav li a i.menu-icon {
  font-size: 16px !important;
  opacity: 0.72;
}

.sidebar ul.nav li a,
#setup-menu > li:first-child {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: transparent !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Item sob o cursor e item aberto */
.sidebar > ul.nav > li:hover a:first-child,
.sidebar > ul.nav > li.active a:first-child {
  background: var(--cp-verde-profundo) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus,
.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: var(--cp-branco) !important;
}

/* O item aberto e um bloco cheio, do jeito do sistema interno */
.sidebar > ul.nav > li.active a:first-child {
  background: #11695B !important;
  border-color: transparent !important;
}

.sidebar > ul.nav > li {
  border-left: 0 !important;
  position: relative;
}

/* a marquinha na borda da barra, dizendo em que aba voce esta */
.sidebar > ul.nav > li.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--cp-verde-agua);
}

/* ---------- 2a. A barra lateral com a logo em cima e a pessoa embaixo ----- */

#menu.sidebar {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* A barra lateral vai de cima a baixo, como no sistema interno, e a barra do
   topo comeca depois dela - senao o topo passa por cima da logo. */
@media (min-width: 769px) {
  /* presa na janela, nao na pagina: sem isso ela estica junto com uma lista
     longa e o rodape vai parar a 23 mil pixels de altura */
  #menu.sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    /* o Perfex escreve min-height na marra, do tamanho da pagina inteira */
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 100 !important;
  }

  #header {
    margin-left: 230px !important;
  }

  body.hide-sidebar:not(.show-sidebar) #header {
    margin-left: 0 !important;
  }
}

/* a logo, trazida do topo para dentro da barra */
#menu #logo {
  display: flex !important;
  align-items: center;
  height: auto !important;
  padding: 20px 8px 18px !important;
  flex: none;
  order: -2;
  /* a linha fininha embaixo da logo, como na Compass */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0 -2px;
}

/* a logo da empresa e verde; dentro da barra verde ela some, entao vira
   branca. O arquivo continua o mesmo - isso e so na tela. */
#menu #logo img {
  height: 30px !important;
  width: auto !important;
  filter: brightness(0) invert(1);
}

#menu > ul.nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 4px !important;
  order: -1;
}

/* a pessoa logada vai para o rodape da barra */
#menu .sidebar-user-profile {
  order: 10;
  flex: none;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 14px 4px 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#menu .sidebar-user-profile .profile {
  background: transparent !important;
  border: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#menu .sidebar-user-profile .profile:hover,
#menu .sidebar-user-profile .profile:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

/* rotulo de grupo: GERENCIAL, COMERCIAL, OPERAÇÃO... */
.sidebar .cp-grupo {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 18px 13px 7px;
  pointer-events: none;
  list-style: none;
}

.sidebar .cp-grupo:first-child {
  padding-top: 12px;
}

/* as acoes do rodape: minha conta e sair */
#menu .sidebar-user-profile {
  display: flex;
  align-items: center;
  gap: 6px;
}

#menu .sidebar-user-profile .profile {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-acoes {
  display: flex;
  gap: 2px;
  flex: none;
}

.cp-acao {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6) !important;
}

.cp-acao:hover,
.cp-acao:focus {
  background: rgba(255, 255, 255, 0.10);
  color: var(--cp-branco) !important;
}

.cp-acao svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Submenu */
.sidebar ul.nav li .nav-second-level li a {
  color: rgba(255, 255, 255, 0.70) !important;
}

.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover {
  color: var(--cp-verde-agua) !important;
}

.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: var(--cp-verde-agua) !important;
}

#setup-menu > li:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Cartão do usuário no topo da barra lateral */
.sidebar-user-profile .profile {
  background-color: var(--cp-verde-profundo) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}

.sidebar-user-profile .profile:hover,
.sidebar-user-profile .profile:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--cp-branco) !important;
}

.sidebar-user-profile .profile * {
  color: inherit !important;
}

/* Logo no topo da barra */
.logo img,
.navbar-brand img {
  max-height: 46px;
}

/* ---------- 2b. Cor primária do Tailwind (o azul de fábrica) ---------- */

.tw-bg-primary-500,
.tw-bg-primary-600,
.tw-bg-primary-700,
.hover\:tw-bg-primary-700:hover,
.hover\:tw-bg-primary-600:hover {
  background-color: var(--cp-verde-escuro) !important;
}

.tw-text-primary-500,
.tw-text-primary-600,
.tw-text-primary-700,
.hover\:tw-text-primary-700:hover {
  color: var(--cp-verde-agua-escuro) !important;
}

.tw-border-primary-500,
.tw-border-primary-600,
.tw-border-primary-700 {
  border-color: var(--cp-verde-escuro) !important;
}

.tw-ring-primary-500,
.focus\:tw-ring-primary-500:focus {
  --tw-ring-color: var(--cp-verde-agua) !important;
}

.tw-bg-primary-50,
.tw-bg-primary-100 {
  background-color: var(--cp-verde-agua-fraco) !important;
}

/* ---------- 3. Barra do topo ---------- */

#header {
  background: var(--cp-branco) !important;
  border-bottom: 1px solid var(--cp-linha) !important;
  box-shadow: none !important;
}

#header li > a.active,
#header .icon:hover {
  color: var(--cp-verde-escuro) !important;
}

/* ---------- 4. Botoes ---------- */

.btn-primary,
.btn-info,
.btn-success {
  background-color: var(--cp-verde-escuro) !important;
  border-color: var(--cp-verde-escuro) !important;
  color: var(--cp-branco) !important;
  border-radius: 8px !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-success:focus,
.btn-primary:active,
.btn-info:active,
.btn-success:active {
  background-color: var(--cp-verde-hover) !important;
  border-color: var(--cp-verde-hover) !important;
}

.btn-default {
  border-radius: 8px !important;
}

/* Botao secundario: contorno verde agua */
.btn-primary.btn-outline,
.btn-info.btn-outline {
  background: transparent !important;
  color: var(--cp-verde-agua-escuro) !important;
  border-color: var(--cp-verde-agua) !important;
}

/* ---------- 5. Links, abas e selos ---------- */

a,
a:hover,
a:focus {
  color: var(--cp-verde-agua-escuro);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--cp-verde-escuro) !important;
  border-bottom-color: var(--cp-verde-agua) !important;
}

/* Selos de situacao no estilo do sistema interno: pilula cheia em verde agua
   para o que esta em dia, contorno cinza para o que ainda esta em aberto. */
.label,
.badge {
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.label-info,
.badge-info,
.bg-info,
.label-success,
.badge-success {
  background-color: var(--cp-verde-agua) !important;
  color: var(--cp-verde-profundo) !important;
}

.label-default,
.badge-default {
  background-color: transparent !important;
  color: var(--cp-cinza-medio) !important;
  border: 1px solid var(--cp-linha) !important;
}

.label-primary,
.badge-primary,
.bg-primary {
  background-color: var(--cp-verde-escuro) !important;
}

.text-info,
.text-primary,
.text-success {
  color: var(--cp-verde-agua-escuro) !important;
}

/* ---------- 6. Cards e tabelas ---------- */

.panel_s,
.panel-default {
  border: 1px solid var(--cp-linha) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 34, 31, 0.05), 0 2px 10px rgba(16, 34, 31, 0.05) !important;
}

.panel_s .panel-heading {
  border-bottom: 1px solid var(--cp-linha) !important;
  background: transparent !important;
}

/* Cabecalho de tabela como no sistema interno: faixa verde escura, texto
   branco, em caixa normal. */
table.table > thead > tr > th,
table.table > thead > tr > th a {
  background: var(--cp-verde-escuro) !important;
  color: var(--cp-branco) !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  padding-top: 13px;
  padding-bottom: 13px;
  white-space: nowrap;
}

table.table > thead > tr > th:first-child {
  border-top-left-radius: 8px;
}

table.table > thead > tr > th:last-child {
  border-top-right-radius: 8px;
}

/* setinha de ordenacao visivel sobre o verde */
table.table > thead > tr > th.sorting:after,
table.table > thead > tr > th.sorting_asc:after,
table.table > thead > tr > th.sorting_desc:after,
table.table > thead > tr > th .fa,
table.table > thead > tr > th .fas {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* linhas mais altas e respiradas, como no sistema interno */
table.table > tbody > tr > td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #EEF3F2 !important;
}

table.table > tbody > tr:hover > td {
  background: #F7FBFA !important;
}

/* Valor em tabela: algarismo de largura fixa, para as colunas de dinheiro
   ficarem alinhadas de cima a baixo. */
table.table > tbody > tr > td.text-right,
table.table > tbody > tr > td.num,
.cp-kpi b,
.cp-col-valor,
.cp-card-valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Linha selecionada / destaque */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #FAFCFB;
}

/* ---------- 7. Formularios ---------- */

.form-control:focus,
.selectpicker:focus,
.bootstrap-select.open > .dropdown-toggle {
  border-color: var(--cp-verde-agua) !important;
  box-shadow: 0 0 0 3px var(--cp-verde-agua-fraco) !important;
}

.checkbox input[type="checkbox"]:checked + label::before,
.radio input[type="radio"]:checked + label::after {
  background-color: var(--cp-verde-escuro) !important;
  border-color: var(--cp-verde-escuro) !important;
}

/* ---------- 8. Kanban (o quadro do funil) ---------- */

/* o fundo do quadro, para as colunas se destacarem */
.kan-ban-wrapper,
#kan-ban {
  background: transparent !important;
}

.kan-ban-col-wrapper {
  padding: 0 7px !important;
}

.kan-ban-col-wrapper > .panel_s {
  background: var(--cp-fundo-suave) !important;
  border: 1px solid var(--cp-linha) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  /* nada de overflow:hidden aqui: era ele que cortava o menu "Novo Lead"
     pela metade, porque o menu abre para fora da coluna. Quem arredonda os
     cantos agora sao as duas pontas, o cabecalho e a lista de cartoes */
  overflow: visible;
}

.kan-ban-col-wrapper > .panel_s > .panel-heading {
  border-radius: 11px 11px 0 0;
}

.kan-ban-col-wrapper .kan-ban-content-wrapper {
  border-radius: 0 0 11px 11px;
}

/* o menu da coluna abre por cima de tudo */
.kan-ban-col-wrapper .dropdown-menu {
  z-index: 1200;
}

/* As cores da etapa saem do menu. Elas pintam o cabecalho da coluna, e o
   cabecalho ja segue a identidade da Comprec - mexer nisso so desarruma. */
.kan-ban-settings.cpicker-wrapper,
.kan-ban-col-wrapper .kanban-color-picker {
  display: none !important;
}

/* --- o topo da coluna: nome, quantidade e valor --- */
.kan-ban-col-wrapper .panel-heading {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.cp-col-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--cor, var(--cp-verde-escuro));
  color: #fff;
}

.cp-col-nome {
  font-weight: 700;
  font-size: 0.88rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cp-col-qtd {
  flex: none;
  background: rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cp-col-valor {
  padding: 10px 14px 12px;
  background: #fff;
  border-bottom: 1px solid var(--cp-linha);
  font-family: var(--cp-fonte-numero);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cp-verde-profundo);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* a engrenagem de cor da etapa, discreta */
.kan-ban-col-wrapper .kanban-color-picker {
  color: rgba(255, 255, 255, 0.72) !important;
  flex: none;
}

.kan-ban-col-wrapper .panel-heading .fa-reorder {
  color: rgba(255, 255, 255, 0.5) !important;
  flex: none;
}

/* --- a pilha de cartoes --- */
.kan-ban-content {
  padding: 8px 8px 12px !important;
  background: var(--cp-fundo-suave) !important;
}

/* --- o cartao --- */
li.lead-kan-ban {
  background: #fff !important;
  border: 1px solid var(--cp-linha) !important;
  border-left: 3px solid var(--cor, var(--cp-verde-agua)) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 34, 31, 0.05) !important;
  transition: box-shadow .15s ease, transform .15s ease;
}

li.lead-kan-ban:hover {
  box-shadow: 0 4px 14px rgba(16, 34, 31, 0.12) !important;
  transform: translateY(-1px);
}

li.lead-kan-ban .panel-body {
  padding: 11px 13px !important;
}

li.lead-kan-ban .lead-name a {
  color: var(--cp-tinta) !important;
  font-weight: 600 !important;
  font-size: 0.86rem;
  line-height: 1.3;
}

li.lead-kan-ban .lead-name a:hover {
  color: var(--cp-verde-agua-escuro) !important;
}

li.lead-kan-ban .lead-name span {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  white-space: normal !important;
}

/* o valor do lead em destaque, como no quadro do Bitrix */
.cp-card-valor {
  display: block;
  font-family: var(--cp-fonte-numero);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cp-verde-profundo);
  letter-spacing: -0.015em;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-col-valor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-card-linha {
  display: block;
  font-size: 0.74rem;
  color: var(--cp-cinza-claro);
  margin: 0;
}

/* A primeira linha do cartao e a origem do lead ("Fonte: ..."). O script a
   remove, mas o quadro pinta antes dele rodar - sem isto, ela pisca na tela.
   Quando a primeira linha for o valor, o script marca com .cp-card-valor e
   ela volta a aparecer. */
li.lead-kan-ban .tw-grow > p:first-child:not(.cp-card-valor) {
  display: none;
}

li.lead-kan-ban .text-right small {
  color: var(--cp-cinza-claro) !important;
}

/* ---------- 9. Tela de login ---------- */

body.login_admin,
body.login_client,
body.login {
  background: var(--cp-verde-escuro) !important;
}

/* a logo branca aparece melhor sobre o verde */
body.login_admin .authentication-form-wrapper img,
body.login_client .authentication-form-wrapper img {
  filter: brightness(0) invert(1);
}

/* só o cartão branco do formulário ganha sombra; o resto fica no verde */
body.login_admin .authentication-form-wrapper div.tw-bg-white,
body.login_client .authentication-form-wrapper div.tw-bg-white {
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 34px rgba(5, 25, 22, 0.32) !important;
}

/* título e subtítulo ficam sobre o verde, então vão em branco */
body.login_admin h1,
body.login_client h1 {
  font-family: var(--cp-fonte-titulo) !important;
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cp-branco) !important;
}

body.login_admin h1 + p,
body.login_client h1 + p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---------- 9b. Barras de rolagem ----------
   A do sistema operacional é cinza e grossa, e some com o visual. Estas são
   finas, arredondadas e na cor da marca: claras no conteúdo, translúcidas
   sobre o verde. */

* {
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: #C2D6D2 transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #C2D6D2;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cp-verde-agua);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--cp-verde-agua-escuro);
  background-clip: content-box;
}

/* os cantos e as setinhas das pontas saem de cena */
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* sobre o verde da barra lateral e do modo TV */
#menu,
#menu *,
.kan-ban-col-wrapper .panel-heading,
.cp-col-topo {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

#menu ::-webkit-scrollbar-thumb,
#menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.26);
  background-clip: content-box;
}

#menu ::-webkit-scrollbar-thumb:hover,
#menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
  background-clip: content-box;
}

/* dentro das colunas do quadro, mais discreta ainda */
.kan-ban-content::-webkit-scrollbar,
.kan-ban-content ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* a barra horizontal do quadro inteiro */
.kan-ban-wrapper::-webkit-scrollbar,
#kan-ban::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 12px;
}

/* ---------- 10. Detalhes ---------- */

::selection {
  background: var(--cp-verde-agua);
  color: var(--cp-verde-profundo);
}

.progress-bar {
  background-color: var(--cp-verde-agua) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover {
  background-color: var(--cp-verde-escuro) !important;
  border-color: var(--cp-verde-escuro) !important;
}

/* ===========================================================
   11/11/2026 - ajustes pedidos pelo Miguel
   =========================================================== */

/* A caixinha "Procurar Leads" do Perfex. A barra de filtros da Comprec,
   logo acima, faz o mesmo e muito mais - e faz no servidor, que e onde a
   busca tem de acontecer quando sao 44 mil precatorios. Duas buscas na
   mesma tela so confundem. */
.leads-search {
  display: none !important;
}

/* O quadro acompanha o monitor.

   O Perfex prende cada coluna em 340 px e empurra uma largura minima na
   .container-fluid, entao num monitor largo sobrava um vazio a direita e
   num estreito aparecia barra de rolagem sem precisar. Aqui as colunas
   dividem a largura que houver, e so viram esteira quando de fato nao
   cabem mais (272 px cada). A altura e calculada no comprec.php, que mede
   onde o quadro comeca - e so la da para saber, porque a barra de filtros
   muda esse ponto. */
#kan-ban {
  display: flex !important;
  align-items: flex-start;
  gap: 6px;
}

#kan-ban .kan-ban-col {
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 272px !important;
  float: none !important;
  margin-right: 0 !important;
  /* sem !important aqui de proposito: o modulo esconde as colunas que nao
     sao do consultor (a "Customer" do Perfex, por exemplo) escrevendo
     display:none no proprio elemento, e um !important nesta linha ganhava
     dele - foi assim que a coluna Customer reapareceu no quadro */
  display: block;
}

.leads-kan-ban.container-fluid {
  min-width: 0 !important;
}

/* No rodape da barra, so o nome.

   O e-mail nao informa nada a quem ja esta logado, e as duas linhas
   deixavam o bloco mais alto do que os botoes de conta e sair, que subiam
   e ficavam por cima do nome. Com uma linha so, nome e foto se alinham
   sozinhos. */
#menu .sidebar-user-profile .profile > span > span > span:last-child {
  display: none !important;
}

#menu .sidebar-user-profile .profile > span {
  padding-top: 0 !important;
}

/* Os lapisinhos azuis ao lado de cada campo personalizado.

   Eles sao atalho do Perfex para EDITAR A DEFINICAO do campo (ir para a tela
   de configuracao), nao para editar o valor. Nao servem a quem esta
   cadastrando um precatorio, e ficavam largados na tela quando o campo ao
   lado deles saia. Quem precisa mexer na definicao de um campo vai em
   Configuracoes -> Campos personalizados. */
.custom-field-inline-edit-link {
  display: none !important;
}