/* --- Estilos para os Cards de KPI --- */
.kpi-card {
    min-height: 120px; /* Define uma altura mínima para todos os cards de KPI */
    display: flex; /* Usa flexbox para o conteúdo do card */
    align-items: center; /* Centraliza verticalmente o conteúdo (ícone + texto) */
    padding: 10px 15px !important; /* Ajusta o padding interno do card-panel */
    border-radius: 15px;
}

.card-kpi {
    border-radius: 10px;
}

/* Remove a margem inferior padrão das rows dentro dos cards */
.no-margin-bottom {
    margin-bottom: 0 !important;
}

.kpi-card .kpi-icon {
    font-size: 3.5rem; /* Ajusta o tamanho do ícone */
    line-height: 1; /* Remove espaço extra da linha */
    height: 100%; /* Garante que o ícone ocupe o espaço vertical disponível no valign-wrapper */
    display: flex; /* Usa flex para centralizar o ícone em sua coluna */
    align-items: center; /* Centraliza verticalmente o ícone */
    justify-content: center; /* Centraliza horizontalmente o ícone */
}

.kpi-card .kpi-title {
    font-size: 1rem !important; /* Ajusta o tamanho do título do KPI */
    margin: 0; /* Remove margem padrão */
    line-height: 1.2; /* Ajusta altura da linha */
    text-transform: uppercase; /* Deixa o título em maiúsculas */
    font-weight: 500; /* Levemente mais negrito */
    opacity: 0.7; /* Suaviza a cor do título */
}

.card-title {
    font-size: 1rem !important; /* Ajusta o tamanho do título do KPI */
    margin: 0; /* Remove margem padrão */
    line-height: 1.2; /* Ajusta altura da linha */
    text-transform: uppercase; /* Deixa o título em maiúsculas */
    font-weight: 500; /* Levemente mais negrito */
    opacity: 0.7; /* Suaviza a cor do título */
}

.kpi-card .kpi-value {
    font-size: 1rem !important; /* Tamanho do valor do KPI (maior) */
    font-weight: bold; /* Deixa o valor em negrito */
    margin: 5px 0 0 0; /* Ajusta a margem para separar do título */
    line-height: 1.2;
    white-space: nowrap; /* Impede que o número quebre linha */
    overflow: hidden; /* Esconde o excesso se o número for muito longo */
    text-overflow: ellipsis; /* Adiciona '...' se o número for muito longo */
    text-align: right;
}

.kpi-card .kpi-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0px 0 0 0; /* Ajusta a margem para separar do título */
    line-height: 1;
    white-space: nowrap; /* Impede que o número quebre linha */
    overflow: hidden; /* Esconde o excesso se o número for muito longo */
    text-align: right;
}

/* --- NOVO ESTILO PARA A LINHA DIVISÓRIA --- */
.kpi-divider {
    border: none; /* Remove a borda padrão */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Adiciona uma borda fina e translúcida */
    margin: 10px 15px; /* Margem superior/inferior de 10px e horizontal de 15px */
}

/* Ajustes para cores da tabela no dashboard (se precisar) */
.card table.white-text th {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8); /* Cor do texto das tabelas */
}

.card table.white-text td {
    color: rgba(255, 255, 255, 0.8); /* Cor do texto das tabelas */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Cor da linha divisória da tabela */
}
.card table.white-text th {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
}

.apexcharts-datalabel-value {
    fill: yellow !important; /* Use a cor desejada aqui */
}

.card-meta {
    display: flex; /* Usa flexbox para o conteúdo do card */
    margin-left: 15px;
    margin-right: 15px;
    padding: 10px 15px !important; /* Ajusta o padding interno do card-panel */
    border-radius: 10px;
}
.card-meta .card-content {
    padding: 0; /* Remove o padding interno do card-content */
}
.card-meta table {
    width: 100%; /* Garante que a tabela ocupe toda a largura do card */
    border-collapse: collapse; /* Remove espaçamento entre células */
}
.card-meta th, .card-meta td {
    padding: 8px; /* Adiciona espaçamento interno às células */
    text-align: left; /* Alinha o texto à esquerda */
    color: rgba(255, 255, 255, 0.8); /* Cor do texto das células */
}
.card-meta th {
    font-weight: bold; /* Deixa o texto do cabeçalho em negrito */
    color: rgba(255, 255, 255, 0.9); /* Cor do texto do cabeçalho */
}
.card-meta td {
    border-bottom: 0px solid rgba(255, 255, 255, 0.1); /* Linha divisória entre as células */
}

/**********************
**
** disponibilidade.css
**
**********************/

/* Cor amarela e letras maiores para o título da tabela */
.finance-table-caption {
    color: #e2ff06; /* Amarelo do Materialize */
    font-size: 1.3rem; /* Tamanho maior que o texto padrão */
    font-weight: bold;
    text-align: left; /* Garante alinhamento à esquerda, se necessário */
    padding-bottom: 2px; /* Espaçamento abaixo do título */
}

/* Cor amarela e letras maiores para os cabeçalhos (<th>) */
.finance-table-header th {
    color: #ffc107; /* Amarelo */
    font-size: 1.1rem; /* Um pouco maior que o texto da tabela */
    border-bottom: 2px solid #ffc107; /* Linha amarela grossa divisória */
}

/* Estilo para a linha totalizadora */
.finance-table-total {
    border-top: 2px solid #ffc107; /* Linha divisória amarela no topo */
    font-size: 1.2rem; /* Letras maiores */
    font-weight: bold;
    color: #ffc107; /* Cor amarela */
}

/* Reduz o espaçamento vertical nas células da tabela */
.card-meta table th,
.card-meta table td {
    padding: 2px 5px; /* Altere estes valores conforme sua necessidade */
    /* Exemplo:
       padding: 5px; -> padding de 5px em todos os lados
       padding: 5px 10px; -> 5px em cima/baixo e 10px na direita/esquerda
    */
    line-height: 1.2; /* Ajusta a altura da linha, se necessário */
}

.card-meta table td {
    font-size: 0.8rem;
}

.card-meta table th:nth-child(3),
.card-meta table td:nth-child(3) {
    min-width: 100px; /* Altere este valor para o tamanho mínimo desejado */
    text-align: right; /* Alinhar o texto à direita é uma boa prática para valores monetários */
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
    min-width: 32px;
    text-align: center;
}
/* Cores do ranking (iguais ao de vendedores) */
.first { background-color: gold !important; color: #000 !important; font-weight: bold !important;}
.second { background-color: #90a4ae !important; color: #000 !important; }
.third { background-color: #8d6e63 !important; color: #000 !important; }