/* ===== Tokens do DISC que se adaptam ao tema do app ===== */
#chart-wrapper{
  --disc-title-w: 70px;

  /* Baseados nas variáveis do tema (com fallbacks) */
  --disc-fg:        var(--text-color, #1f2937);
  --disc-fg-muted:  color-mix(in srgb, var(--text-color, #1f2937) 60%, var(--panel-background, #ffffff) 40%);

  /* Trilho e destaque calculados sobre o fundo do painel + cor do texto.
     Funciona tanto no claro quanto no escuro sem precisar de media queries. */
  --disc-track:     color-mix(in srgb, var(--panel-background, #ffffff) 85%, var(--text-color, #000000) 15%);
  --disc-top-bg:    color-mix(in srgb, var(--panel-background, #ffffff) 88%, var(--text-color, #000000) 12%);
  --disc-top-brd:   color-mix(in srgb, var(--panel-background, #ffffff) 70%, var(--text-color, #000000) 30%);
}

/* Fallback para navegadores sem color-mix (mantém algo legível) */
@supports not (background: color-mix(in srgb, white 50%, black 50%)) {
  #chart-wrapper{
    --disc-fg:        var(--text-color, #1f2937);
    --disc-fg-muted:  #6b7280;
    --disc-track:     #e5e7eb;
    --disc-top-bg:    rgba(0,0,0,.06);
    --disc-top-brd:   rgba(0,0,0,.18);
  }
}




/* opcional: valor em negrito para o top1 */
.disc-bar.is-top1 .disc-value { font-weight: 700; }

/* se quiser um leve aumento de altura na barra vencedora */
.disc-bar.is-top1 .disc-progress { height: 8px; }



#chart-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 150px);
    overflow: hidden; /* Oculta áreas fora do contêiner */
    border: 1px solid var(--template-border-color); /* Define a borda */
    border-radius: 30px; /* Deve ser maior para acompanhar o border-radius da borda original */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    background-color: var(--panel-background); /* Fundo claro */
}

/* Títulos/labels/valores pegam a cor do tema */
#chart-wrapper .disc-section-title{ 
  flex:0 0 var(--disc-title-w);
  font-weight:800;
  opacity:.9;
  color: var(--disc-fg);
}

.disc-divider { height:8px; }


.chart-tabs { 
    display:flex; gap:8px; 
    margin:8px 0 4px; 
    position: absolute;
    top: 15px;
    left: 30px;
    z-index: 10;
}
.chart-tabs .tab { 
    border:0; 
    padding:8px 12px; 
    border-radius:8px; 
    background:#eee; 
    cursor:pointer; 

}
.chart-tabs .tab.active { 
    background:#00bcd4; 
    color:#fff; 
}

#chart-container {
    transform: scale(1);
    transform-origin: center;
    width: 100%;
    height: auto;
}

#chart-controls {
    display: flex;
    gap: 8px;
    position: absolute;
    bottom: 15px;
    left: 30px;
    z-index: 10;
    border: 1px solid var(--template-border-color); /* Define a borda */
    border-radius: 8px; /* Deve ser maior para acompanhar o border-radius da borda original */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    background-color: var(--panel-background); /* Fundo claro */
    padding: 8px;
}

.custom-node {
  position: relative;
  width: 500px; /* Largura fixa */
  height: auto; /* Altura fixa */
  border: 2px solid var(--template-border-color); /* Borda azul */
  border-radius: 8px; /* Bordas arredondadas */
  background-color: var(--tab-background); /* Fundo claro */
  text-align: center; /* Centraliza o texto */
  display: flex; /* Habilita flexbox */
  flex-direction: column; /* Organiza elementos em coluna */
  justify-content: center; /* Centraliza verticalmente */
  align-items: top; /* Centraliza horizontalmente */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: all 0.3s ease; /* Suaviza mudanças visuais */
  overflow: hidden;
}

.custom-node:hover {
  border-color: var(--main-color); /* Cor da borda mais escura */
  cursor: pointer; /* Mostra o cursor de clique */
}

.custom-header {
  padding: 10px;
  padding-left: 20px;
  width: 100%;
  height: auto;
  display: flex; /* Ativa o Flexbox */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  border-top-left-radius: 1px !important;
  border-top-right-radius: 1px !important;
}

.custom-header-texto {
  padding-left: 20px;
  width: 100%;
  height: auto;
  display: flex; /* Ativa o Flexbox */
  flex-direction: column;
}

.custom-header-texto strong {
  text-align: left; /* Centraliza o texto */
  font-weight: bold; /* Texto em negrito */
  font-size: 22px; /* Tamanho do texto */
  color: var(--text-color); /* Cor do texto (cinza escuro) */
}

.custom-header-texto em {
  text-align: left; /* Centraliza o texto */
  font-size: 18px; /* Tamanho do texto */
  color: var(--text-color); /* Cor do texto (cinza escuro) */
}

.custom-header-texto p {
  text-align: left; /* Centraliza o texto */
  font-weight: bold; /* Texto em negrito */
  font-size: 12px; /* Tamanho do texto */
  color: var(--text-color); 
  margin-bottom: 0px !important; /* 🔥 Remove a margem inferior */
  margin-top: 0px !important;
}

.custom-body {
  padding-top: 16px;
  font-size: 14px;
  color: var(--text-color);
  flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-body-infos {
  padding-left: 10px;
  font-size: 14px;
  color: var(--text-color);
  flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  border-left: 4px solid var(--template-border-color); /* 🔥 Borda adicionada no lado esquerdo */
}

.custom-body p {
  margin: 5px 0; /* Evita espaçamentos desnecessários */
  align-self: left; /* Centraliza o próprio elemento */
  text-align: left; /* Centraliza o texto */
}



.custom-button {
    background-color: var(--main-color); /* Cor do botão */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}


.chart-spacer {
    width: 2px; /* Largura da linha */
    background-color: silver; /* Cor da linha */
    height: 35px; /* Altura total do contêiner */
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Define um tamanho fixo para botões de ícones */
    height: 40px;
    padding: 0;
    border-radius: 50%; /* Deixa o botão redondo */
}

.icon-btn i {
    margin: 0 !important; /* Remove qualquer margem padrão */
    padding: 0;
    font-size: 18px; /* Mantém o ícone no tamanho correto */
    line-height: 1;
    text-align: center;
    width: 100%;
}

.config-vaga-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
}

.delete-vaga-desativado-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
    color: grey;
}

.delete-vaga-btn {
    position: absolute;
    padding: 10px;
    top: 5px;
    right: 5px;
    color: red;
}


.table-scroll {
    max-height: 220px; /* 🔥 Ajuste a altura máxima conforme necessário */
    overflow-y: auto;   /* 🔥 Ativa scroll vertical quando necessário */
    overflow-x: auto;   /* 🔥 Ativa scroll horizontal caso a tabela seja larga */
}

/* Estiliza a barra de rolagem para melhor aparência */
.table-scroll::-webkit-scrollbar {
    width: 8px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}

.table-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* 🔥 Faixa de cor do setor */
.setor-indicator {
    position: absolute;
    left: 0px;
    top: 0;
    width: 8px; /* Largura da faixa */
    height: 100%;
    background-color: #CCCCCC; /* Cor padrão se não for definida */
    z-index: 5;
}

/* 🔥 Foto do avatar */
.custom-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--template-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.custom-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.truncate-text {
    display: block; /* Permite que o texto respeite a largura do elemento pai */
    width: calc(100% - 35px); /* Ocupa todo o espaço disponível */
    white-space: nowrap; /* Impede que o texto quebre linha */
    overflow: hidden; /* Oculta o texto excedente */
    text-overflow: ellipsis; /* Adiciona "..." ao final do texto que exceder */
}

/* 🔥 Contêiner principal das barras DISC */
.disc-container {
    padding-left: 15px;
    padding-right: 10px;
    width: 100%;
    display: flex;
    gap: 8px;
    text-align: left;
}

/* 🔥 Cada barra do DISC */
.disc-bar {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 5px;
}

/* 🔥 Nome da categoria (D, I, S, C) */
#chart-wrapper .disc-label {
    font-weight: bold;
    color: var(--disc-fg);
    width: 20px;
    text-align: center;
}

/* 🔥 Barra de progresso (estrutura externa) */
#chart-wrapper .disc-progress {
    flex: 1;
    height: 14px; /* 🔥 Aumentei um pouco a altura para melhor visibilidade */
    border-radius: 7px;
    background: var(--disc-track);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--disc-top-brd);
}

/* 🔥 Preenchimento das barras */
.disc-fill {
    height: 100%;
    transition: width 0.3s ease-in-out;
    border-radius: 1px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* 🔥 Sombra interna para dar um efeito mais 3D */
}

/* 🔥 Cores modernas para cada perfil */
.dominancia { 
    background: linear-gradient(90deg, #FF6B6B, #FF3B3B); /* 🔥 Vermelho vibrante com gradiente */
}

.influencia { 
    background: linear-gradient(90deg, #FFD93D, #FFC107); /* 🔥 Dourado moderno */
}

.estabilidade { 
    background: linear-gradient(90deg, #17C3B2, #14A492); /* 🔥 Verde esmeralda sofisticado */
}

.conformidade { 
    background: linear-gradient(90deg, #4D96FF, #2266CC); /* 🔥 Azul oceano refinado */
}

/* 🔥 Valor da porcentagem */
#chart-wrapper .disc-value {
    font-size: 12px;
    font-weight: bold;
    width: 30px;
    text-align: center;
    color: var(--disc-fg-muted);
}

#chart-wrapper .disc-bar.is-top{
  background: var(--disc-top-bg);
  box-shadow: inset 0 0 0 1px var(--disc-top-brd);
  border-radius:6px;
}


/* ===== FOOTER: layout com esquerda/direita e alinhado embaixo ===== */
.custom-footer{
  display:flex;
  justify-content:space-between;   /* botões à esquerda, tag à direita */
  align-items:flex-end;            /* alinha itens ao fundo do footer */
  gap:10px;
  padding: 8px 14px 12px;          /* respiro das bordas do card (L/R) e base */
  width:100%;
  margin-top:10px;
  font-size:12px;
  color: var(--field-color);
}

.custom-footer .footer-left{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:0;                   /* gruda na extrema esquerda (respeita o padding do footer) */
}

.custom-footer .footer-right{
  margin-left:auto;                /* empurra para a extrema direita */
  display:flex;
  align-items:flex-end;            /* garante a tag encostada no fundo */
}

/* opcional: se quiser os botões um pouco mais compactos no footer */
.custom-footer .btn-group .btn{
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
}

/* ===== TAG como pill, com tipografia um pouco maior ===== */
.tag-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;               /* pill mais encorpado */
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;               /* um pouco maior */
  line-height: 1.1;
  letter-spacing: .2px;
  /* o bg, a cor do texto e a borda vêm inline via style="..." calculado no JS */
  /* efeito sutil para dar relevo que funciona no claro e no escuro */
  box-shadow: 
    0 1px 1px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.25);
  user-select: none;
}

/* se quiser um micro ajuste visual para “assentar” a tag na base do footer */
.tag-pill{ margin-bottom: 1px; }

/* ===== (opcional) equaliza os ícones dos botões no footer */
.custom-footer .btn i{ line-height: 1; }

#copy-atual-ideal[disabled]{
  opacity: .6;
  cursor: not-allowed !important;
  pointer-events: none;
}