/* ====== CORES QUE VOCÊ PODE AJUSTAR ====== */
:root {
  /* Fundo geral do calendário */
  --cal-bg: var(--field-background);         /* ex.: azul bem escuro (slate-900) */
  --cal-text: #e5e7eb;       /* texto claro */
  --cal-border: #334155;     /* bordas discretas */

  --darken: 22%; /* ajuste aqui */
  --main-color-dark: color-mix(
    in oklab,
    var(--main-color) calc(100% - var(--darken)),
    black var(--darken)
  );

  /* Botões */
  --cal-btn-bg: var(--main-color);     
  --cal-btn-border: var(--button-border);
  --cal-btn-text: #ffffff;
  --cal-btn-bg-hover: var(--main-color);
  --cal-btn-border-hover: var(--button-border);
  --cal-btn-bg-active: var(--main-color-dark);

  /* Destaques */
  --cal-today-bg: rgba(34,197,94,0.12);  /* dia de hoje */
  --cal-title: #ffffff;                  /* título do mês */
}

.v-center {
  display: flex !important;
  align-items: center !important; /* centraliza no eixo vertical quando o flex-direction é 'row' (padrão) */
}

/* ====== CARD DO GRÁFICO ====== */
.panel.chart-header,
.panel.chart-header .panel-heading,
.panel.chart-header .panel-body,
.panel.chart-header .panel-footer {
  background: var(--cal-bg) !important;
  border-color: var(--tab-active-border-color) !important;
}

.chart-container {
  background: var(--cal-bg) !important;
  border-color: var(--tab-active-border-color) !important;
}

/* título dentro do header */
.panel.chart-header .chart-title,
.panel.chart-header .card-title {
  color: var(--text-color) !important;
}

/* ====== C3.JS (área do gráfico) ====== */
.panel.chart-header .chart-body .c3 {
  background: var(--cal-bg) !important; /* o SVG é transparente; o fundo vem do card */
  color: var(--text-color) !important;
}

/* eixos e grades */
.panel.chart-header .c3 .domain,
.panel.chart-header .c3 .tick line,
.panel.chart-header .c3 .grid line {
  stroke: var(--tab-active-border-color) !important;
}

/* pinta o card que CONTÉM a tabela #OrientacaoAgendaList_datagrid */
.card.panel:has(> .card-body.panel-body.table-responsive > table#OrientacaoAgendaList_datagrid) {
  background: var(--cal-bg) !important;
}


/* ====== FUNDO E TEXTO GERAL ====== */
.tfullcalendar {
  background: var(--cal-bg) !important;
}

/* Título (ex.: "outubro de 2025") 
.tfullcalendar .fc-toolbar-title {
  color: var(--cal-title) !important;
}*/

/* Header (seg, ter, …) e células do grid usam o mesmo fundo */
.tfullcalendar .fc-col-header-cell,
.tfullcalendar .fc-daygrid-day,
.tfullcalendar .fc-scrollgrid,
.tfullcalendar .fc-view-harness,
.tfullcalendar .fc-daygrid {
  background: var(--cal-bg) !important;
}

/* Bordas das tabelas/linhas 
.tfullcalendar .table-bordered > :not(caption) > * ,
.tfullcalendar .fc-scrollgrid,
.tfullcalendar .fc-daygrid-day,
.tfullcalendar .fc-col-header-cell {
  border-color: var(--cal-border) !important;
}*/

/* Dia de hoje (realce leve) */
.tfullcalendar .fc-day-today {
  background: var(--cal-today-bg) !important;
}

/* Números dos dias e header 
.tfullcalendar .fc-daygrid-day-number,
.tfullcalendar .fc-col-header-cell-cushion {
  color: var(--cal-text) !important;
}*/

/* ====== BOTÕES (prev/next, Hoje, Dia/Semana/Mês/Agenda) ====== */
/* Seu tema usa Bootstrap, então os botões vêm como .btn.btn-primary */
.tfullcalendar .btn.btn-primary {
  background-color: var(--cal-btn-bg) !important;
  border-color: var(--cal-btn-border) !important;
  color: var(--cal-btn-text) !important;
}

/* Hover/focus */
.tfullcalendar .btn.btn-primary:hover,
.tfullcalendar .btn.btn-primary:focus {
  background-color: var(--cal-btn-bg-hover) !important;
  border-color: var(--cal-btn-border-hover) !important;
  color: var(--cal-btn-text) !important;
}

/* Active/pressed e o botão “ativo” do grupo (ex.: Mês) */
.tfullcalendar .btn.btn-primary:active,
.tfullcalendar .btn.btn-primary.active,
.tfullcalendar .show > .btn.btn-primary.dropdown-toggle {
  background-color: var(--cal-btn-bg-active) !important;
  border-color: var(--cal-btn-bg-active) !important;
  color: var(--cal-btn-text) !important;
}

/* Botão desabilitado (ex.: Hoje quando já está em hoje) */
.tfullcalendar .btn.btn-primary:disabled,
.tfullcalendar .btn.btn-primary.disabled {
  background-color: var(--cal-btn-bg) !important;
  border-color: var(--cal-btn-border) !important;
  opacity: .6; /* indica desabilitado */
  color: var(--cal-btn-text) !important;
}

/* Ícones de navegação (font-awesome) herdam a cor do botão */
.tfullcalendar .btn.btn-primary .fa {
  color: var(--cal-btn-text) !important;
}

/* Espaçamento da toolbar (opcional) */
.tfullcalendar .fc-header-toolbar {
  background: transparent; /* ou uma barra sólida se preferir */
  padding: .5rem .25rem;
}

.nav-tabs {
  border-bottom:1px solid var(--content-border-color) !important;
}


.tab-pane {
  border:1px solid transparent !important;
}

.splash-user-att {
  display: none !important;
}

.min-h-0 {
  min-height: 0 !important;
}

[form="bcontainer_individual"] {
  margin: 0px !important;
}

[form="bcontainer_escritorio"] {
  margin: 0px !important;
}

[form="bcontainer_produto"] {
  margin: 0px !important;
}

[form="bcontainer_ciclo"] {
  margin: 0px !important;
}

[form="bcontainer_nivel"] {
  margin: 0px !important;
}

[form="bcontainer_turma"] {
  margin: 0px !important;
}

.tabpanel_bcontainer_individual {
  padding: 0px !important;
}

.tabpanel_bcontainer_escritorio {
  padding: 0px !important;
}

.tabpanel_bcontainer_produto {
  padding: 0px !important;
}

.tabpanel_bcontainer_ciclo {
  padding: 0px !important;
}

.tabpanel_bcontainer_nivel {
  padding: 0px !important;
}

.tabpanel_bcontainer_turma {
  padding: 0px !important;
}

.bem-vindo {
    border:13px solid transparent;
    padding: 12px;
    z-index: 0; /* Garante que o conteúdo fique acima do pseudo-elemento */
}

/* container do banner */
.bem-vindo-banner{
  height: 208px;
  box-sizing: border-box;
  padding: 6px;                     /* “borda” interna */
  border-radius: 33px;
  background: var(--cal-bg, #0f172a);
  background-clip: content-box;     /* <<< deixa o padding TRANSPARENTE */
  

  width: 100%;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
}

/* ajuste no wrapper interno que o Adianti cria */
.bem-vindo-banner .fb-inline-field-container{
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;

  border-radius: calc(33px - 6px);      /* 27px */
  overflow: hidden;                      /* <<< corte acontece AQUI (na parte interna) */
  background: var(--cal-bg, #0f172a);    /* garante mesma cor atrás da imagem */
}

/* garante que o <a> preencha e centralize o conteúdo */
.bem-vindo-banner .fb-inline-field-container a{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}

/* mantém as regras existentes da imagem */
.bem-vindo-banner .fb-inline-field-container img{
  display:block;
  height:100% !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
  object-position:center;
}




.bem-vindo::before {
    content: "";
    position: absolute;
    top: -6px; /* Espaço entre a borda transparente e a original */
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 0px solid silver; /* Define a borda */
    border-radius: 30px; /* Deve ser maior para acompanhar o border-radius da borda original */
    z-index: -1; /* Fica atrás do conteúdo do elemento */
    background: var(--field-background) !important;
}

.bem-vindo-panel {
    content: "";
    position: absolute;
    top: -6px; /* Espaço entre a borda transparente e a original */
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 0px solid silver; /* Define a borda */
    border-radius: 30px; /* Deve ser maior para acompanhar o border-radius da borda original */
    background: var(--field-background) !important;
}

.bem-vindob {
    width: 145px !important; 
    height: 145px !important; 
}

.bem-vindoc {
    width: calc(100% - 145px) !important; 
    height: calc(100% - 145px) !important;  
    margin-bottom: 10px;
}

.bem-vindod {
    width: 100% !important; 
    height: 100% !important;  
    margin-bottom: 10px;
}

.bem-vindoe {
    width: 100% !important; 
    height: 100% !important;  
    margin-bottom: 10px;
    display: grid;
    place-items: center;
}

.foto-com-borda-gradiente {
    width: 60px;
    height: 60px;
    border-radius: 20%;
    object-fit: cover;
    border: 3px solid transparent; /* Define a borda transparente */
    background-image: linear-gradient(225deg, #d3d3d3, #a9a9a9, #808080, #696969, #333333); /* Gradiente de borda */
    background-origin: border-box; /* Aplica o fundo ao redor da borda */
}

/* Classe para sucesso */
.pill-success {
    display: inline-block;
    padding: 2px 10px;
    background-color: green;
    color: white;
    border-radius: 50px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 6px solid transparent; /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para falha */
.pill-failure {
    display: inline-block;
    padding: 2px 10px;
    background-color: red;
    color: white;
    border-radius: 50px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 6px solid transparent; /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para labels */
.label-dados {
    display: inline-block;
    padding: 4px 14px;
    background-color: transparent;
    border-radius: 20px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 1px solid rgba(204,204,204,0.5); /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}

/* Classe para labels */
.label-nome {
    display: inline-block;
    padding: 2px 14px;
    background-color: transparent;
    border-radius: 20px; /* Borda arredondada para o formato pill */
    text-align: center;
    border: 1px solid rgba(204,204,204,0.5); /* Adiciona borda transparente */
    background-clip: padding-box; /* Impede que o fundo se estenda até a borda */
    margin-bottom: 12px;
}


/* Estilo geral do container */
.barra-container {
    position: relative; /* Permite posicionamento absoluto do texto e da linha */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 20px; /* Espaçamento */
    width: 30px; /* Mesma largura da barra */
}

/* Texto do nível */
.texto-nivel1 {
    position: absolute;
    bottom: calc(33% + 2px); /* Relativo à altura preenchida (ajustado dinamicamente) */
    left: 50%;                /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a centralização */
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0px 3px rgba(0, 0, 0, 1);
    padding: 1px 2px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)); /* Fundo escuro para contraste */
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;      /* Evita quebra de linha no texto */
    z-index: 2;               /* Fica acima da barra */
}

.texto-nivel2 {
    position: absolute;
    bottom: calc(66% + 2px); /* Relativo à altura preenchida (ajustado dinamicamente) */
    left: 50%;                /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a centralização */
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0px 3px rgba(0, 0, 0, 1);
    padding: 1px 2px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)); /* Fundo escuro para contraste */
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;      /* Evita quebra de linha no texto */
    z-index: 2;               /* Fica acima da barra */
}



/* Barra vertical em formato de pílula */
.barra-vertical {
    position: relative;
    width: 30px;
    height: 200px;
    background: linear-gradient(to bottom, #999999, #1a1a1a); /* Fundo mais escuro com gradiente */
    border-radius: 15px; /* Arredonda as bordas para formar a pílula */
    overflow: visible; /* Permite elementos visuais saírem da barra */
    box-shadow: inset 0px 8px 10px rgba(0, 0, 0, 0.5); /* Efeito de profundidade */
}

/* Porção preenchida da barra */
.nivel {
    position: absolute;
    bottom: 0; /* Começa do fundo para preencher verticalmente */
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #0e69d0, #102c5d 90%, #111111); /* Gradiente moderno */
    border-bottom-left-radius: 15px; /* Mantém o arredondamento na parte de baixo */
    border-bottom-right-radius: 15px; /* Mantém o arredondamento na parte de baixo */
    
    z-index: 1; /* Garante que o preenchimento fique atrás do texto */
}

/* Linha cinza acima da barra preenchida */
.nivel::after {
    content: '';
    position: absolute;
    top: 0; /* Alinha ao topo da porção preenchida */
    left: -35%; /* Faz a linha ultrapassar 25% dos limites da barra */
    width: 170%; /* 100% da largura da barra + 25% para cada lado */
    height: 2px; /* Espessura da linha */
    background-color: white; /* Cor da linha cinza */
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8); /* Efeito de profundidade */
    z-index: 1; /* Garante que a linha esteja acima do preenchimento */
}

/* Nível 1 (33% preenchido) */
.nivel-1 {
    height: 33%;
}

/* Nível 2 (66% preenchido) */
.nivel-2 {
    height: 66%;
}