.card-custom {
    width: 100%;
    /* 100% da largura da viewport */
    max-width: 100%;
    /* Garante que não ultrapasse o limite */
    min-height: 400px;
    /* Mantém a altura maior para os cards com gráfico */
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    /* Evita que o gráfico ultrapasse as bordas */
}

/* Garante que o texto do card fique preto */
.card-custom h2 {
    color: #031D49 !important;
}

/* Faz com que o card cresça dentro do layout flexível */
.card-custom {
    flex-grow: 1 !important;
}

.card-body {
    text-align: left !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Texto destacado */
.text-highlight {

    border-radius: 6px;
    /* Bordas arredondadas */
    display: inline-flex;
    /* Para alinhar o ícone e o texto */
    align-items: center;
    /* Garante alinhamento vertical */
    gap: 5px;
    /* Espaço entre ícone e texto */

}



/* Subtítulo */
.subtitle {
    color: #6b7280;
    /* Cor do texto */
    font-size: 16px;
    /* Ajuste do tamanho da fonte */
    margin-top: 8px;
    /* Espaçamento entre o título e o texto */
}

/* Breadcrumb (trilha de navegação) */
.breadcrumb {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-bottom: 16px;
    /* Dá um espaço entre a trilha e o card */
    background: none;
    /* Remove fundo padrão do Bootstrap */
}

.breadcrumb-item a {
    text-decoration: none;
    color: #374151;
    /* Cor semelhante à da imagem */
    font-weight: 500;
}

.breadcrumb-item.active {
    color: #6b7280;
    /* Cor mais apagada para a página atual */
}

.breadcrumb-item i {
    margin-right: 5px;
    /* Espaço entre o ícone e o texto */
}

/* Card do título (Painel de Consultas e Métricas) */
.card-title-custom {
    width: 100%;
    max-width: 100%;
    min-height: 20px !important;
    /* Altura menor apenas para esse card */
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border-left: 6px solid #031D49 !important;
    display: flex;
    flex-direction: column;
    /* Organiza os elementos em coluna */
    align-items: flex-start;
    /* Alinha os itens à esquerda */
    justify-content: center;
    /* Centraliza verticalmente */
    padding: 20px;
    text-align: left;
    /* Garante que todo o texto fique alinhado à esquerda */
    padding: 5px 10px;
}

/* Ajustes no título e ícone dentro do card de título */
.card-title-custom h2 {
    display: flex;
    align-items: center;
    /* Alinha o ícone ao texto */
    gap: 10px;
    /* Espaçamento entre ícone e texto */
    color: #031D49 !important;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Ícone dentro do título */
.card-title-custom h2 i {
    font-size: 24px;
    /* Ajuste do tamanho do ícone */
    color: #031D49;
    /* Cor do ícone */
    background-color: #efebeb;
    /* Cor de fundo */
    border-radius: 8px;
    /* Bordas arredondadas */
    padding: 6px;
    /* Espaçamento interno para dar tamanho ao fundo */
    display: inline-flex;
    /* Mantém alinhado ao conteúdo */
    align-items: center;
    /* Alinha verticalmente */
    justify-content: center;
    /* Centraliza o ícone */
}

/* Ajuste no subtítulo do card de título */
.card-title-custom .subtitle {
    color: #6b7280;
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 2px;
    /* Espaçamento entre título e subtítulo */
}

/* Ajuste no container do gráfico */
#chart-container {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

/* Ajuste no próprio gráfico */
#chart {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}


#chart-container02 {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}


.avatar-img {
    width: 40px;
    /* largura fixa */
    height: 40px;
    /* altura fixa */
    object-fit: cover;
    /* recorta proporcionalmente, se necessário */
    border-radius: 50%;
    /* arredonda */
}

.badge {
    border-radius: 20px;
    font-size: 12px;
    line-height: 1;
    padding: .375rem .5625rem;
    font-weight: normal;

}

.badge-danger {
    color: #F95F53;
    border: 1px solid #F95F53;
}

.badge-success {
    color: #5cb85c;
    border: 1px solid #5cb85c;
}

.badge-blue {
    color: #031D49;
    border: 1px solid #031D49;
}

/* ajuste de altura dos filtros, se quiser */
.form-control-sm,
.form-select-sm {
    height: calc(1.5em + .5rem + 2px);
}

/* 1) Container pai como flex */
/* 1) Wrapper flexível que expande com o conteúdo e permite scroll global */
.wrapper {
    display: flex;
    min-height: 100vh;
    /* garante ao menos a altura da tela */
    /* overflow: hidden;  --> REMOVER! */
}

/* 2) Sidebar conserva seu width/min-width e não encolhe */
#sidebar {
    flex-shrink: 0;
    /* opcional: para que a sidebar acompanhe o topo ao rolar */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* se quiser scroll interno na sidebar */
}

/* 3) Conteúdo ao lado ocupa o espaço restante */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* overflow: hidden;  --> REMOVER! */
}

/* 4) O <main> passa a ter altura automática e herda o scroll do body */
.main-content>main {
    /* flex: 1;       <-- opcional manter, mas sem overflow */
    /* overflow: auto; <-- REMOVER para não gerar scroll interno */
    padding: 1rem;
    /* seu p-4 */
    transition: all .25s ease-in-out;
}

.select-table td:nth-child(3) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.icon-summernote {
    /* basta trocar este hex pelo que você quiser */
    color: #012945;
}