/* Estilos globais para garantir consistência no layout */
* {
    box-sizing: border-box; /* Inclui padding e borda nas dimensões dos elementos, evitando que quebrem o layout */
}

/* Estilização do corpo da página */
body {
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove padding padrão */
    height: 100vh; /* Garante que o body ocupe toda a altura da janela */
    display: flex; /* Usa flexbox para organizar header, content e footer */
    flex-direction: column; /* Alinha os elementos verticalmente */
    background-color: #2c3034; /* Fundo cinza escuro para tema dark */
    color: #e9ecef; /* Texto claro para contraste */
    overflow: hidden; /* Impede rolagem no body, delegando ao .table-responsive */
}

/* Estilização do cabeçalho fixo */
.header {
    position: fixed; /* Fixa o cabeçalho no topo da página */
    top: 0; /* Alinha à borda superior */
    left: 0; /* Alinha à borda esquerda */
    width: 100%; /* Ocupa toda a largura */
    background: #07406d; /* Cor azul da empresa */
    color: white; /* Texto branco para contraste */
    padding: 1rem; /* Espaçamento interno */
    z-index: 100; /* Garante que fique acima de outros elementos */
    display: flex; /* Usa flexbox para alinhar conteúdo */
    justify-content: flex-end; /* Alinha o conteúdo (título e logo) à direita */
    align-items: center; /* Centraliza verticalmente */
}

/* Contêiner do conteúdo do cabeçalho (título e logo) */
.header-content {
    display: flex; /* Usa flexbox para alinhar título e logo */
    align-items: center; /* Centraliza verticalmente */
    justify-content: flex-end; /* Alinha à direita */
    padding-right: 1rem; /* Espaço à direita para estética */
}

/* Estilização da logo no cabeçalho */
.header-content img {
    height: 40px; /* Define a altura da logo */
    margin-left: 0.5rem; /* Espaço entre o título e a logo */
}

/* Estilização da barra lateral (sidebar) */
.sidebar {
    position: fixed; /* Fixa a sidebar à esquerda */
    top: 60px; /* Posiciona abaixo do header (altura do header) */
    left: 0; /* Alinha à borda esquerda */
    width: 80px; /* Largura fixa da sidebar */
    height: calc(100vh - 60px); /* Ocupa a altura restante, menos o header */
    background: #212529; /* Fundo cinza escuro */
    padding-top: 1rem; /* Espaço no topo */
    z-index: 90; /* Fica abaixo do header, mas acima do conteúdo */
    display: flex; /* Usa flexbox para alinhar ícones */
    flex-direction: column; /* Alinha ícones verticalmente */
    align-items: center; /* Centraliza ícones horizontalmente */
}

/* Estilização dos links (ícones) na sidebar */
.sidebar a {
    color: #e9ecef; /* Cor clara para ícones */
    padding: 1rem; /* Espaçamento interno */
    text-align: center; /* Centraliza o conteúdo */
    width: 100%; /* Ocupa toda a largura da sidebar */
    margin-bottom: 1rem; /* Espaço entre ícones */
    transition: background 0.3s; /* Animação suave para hover */
}

/* Efeito hover nos links da sidebar */
.sidebar a:hover {
    background: #0d6efd; /* Fundo azul claro ao passar o mouse */
}

/* Estilização do link ativo na sidebar */
.sidebar a.active {
    background: #0d6efd; /* Fundo azul claro para página ativa */
}

/* Estilização do conteúdo principal */
.content {
    margin-top: 60px; /* Espaço para o header fixo */
    margin-left: 80px; /* Espaço para a sidebar fixa */
    margin-bottom: 10px; /* Espaço para o footer fixo (mantém <tfoot> 10px acima do .footer) */
    flex: 1; /* Ocupa o espaço restante na direção vertical */
    background-color: #2c3034; /* Fundo cinza escuro, igual ao body */
    overflow: hidden; /* Impede rolagem no .content, delegando ao .table-responsive */
    display: flex; /* Usa flexbox para organizar o .container */
    flex-direction: column; /* Alinha o .container verticalmente */
}

/* Contêiner principal do conteúdo */
.container {
    max-width: 1200px; /* Largura máxima para centralizar */
    margin: 0 auto; /* Centraliza horizontalmente */
    padding: 1rem; /* Espaçamento interno */
    flex: 1; /* Ocupa o espaço restante no .content */
    display: flex; /* Usa flexbox para organizar .table-container */
    flex-direction: column; /* Alinha .table-container verticalmente */
    overflow: hidden; /* Impede rolagem no .container */
}

/* Contêiner da tabela e filtros */
.table-container {
    background: #343a40; /* Fundo cinza escuro para o quadro */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 1rem; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(7, 64, 109, 0.2); /* Sombra sutil */
    border: 1px solid #07406d; /* Borda azul da empresa */
    flex: 1; /* Ocupa o espaço restante no .container */
    display: flex; /* Usa flexbox para organizar filtros e tabela */
    flex-direction: column; /* Alinha filtros e tabela verticalmente */
    overflow: hidden; /* Impede rolagem no .table-container */
}

/* Estilização do título de seções (não usado diretamente em tabela_ddb.php) */
.section-title {
    color: #0d6efd; /* Azul claro para destaque */
    margin-bottom: 1rem; /* Espaço abaixo */
    font-size: 1.25rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
}

/* Estilização do formulário de filtros */
.form-filter {
    display: flex; /* Usa flexbox para alinhar controles */
    align-items: center; /* Centraliza verticalmente */
    gap: 1rem; /* Espaço entre controles */
    margin-bottom: 1.5rem; /* Espaço abaixo do formulário */
}

/* Estilização dos labels do formulário de filtros */
.form-filter label {
    color: #e9ecef; /* Texto claro para contraste */
}

/* Estilização dos selects do formulário de filtros */
.form-filter .form-select {
    background-color: #343a40; /* Fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #07406d; /* Borda azul */
}

/* Estilização dos selects em foco */
.form-filter .form-select:focus {
    background-color: #343a40; /* Mantém fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #0d6efd; /* Borda azul claro */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra azul clara */
}

/* Contêiner da tabela com rolagem */
.table-responsive {
    flex: 1; /* Ocupa o espaço restante no .table-container */
    max-height: calc(100vh - 260px); /* Limita altura considerando header (60px), footer (60px), filtros/título (80px), margens/padding (60px) */
    overflow-y: auto; /* Habilita rolagem vertical apenas na tabela */
    -webkit-overflow-scrolling: touch; /* Rolagem suave em dispositivos móveis */
    scrollbar-width: thin; /* Barra de rolagem fina */
}

/* Estilização da tabela */
.table-dark-theme {
    color: #e9ecef; /* Texto claro */
    background-color: #42484e; /* Fundo cinza escuro */
    border-color: #07406d; /* Borda azul */
    margin-bottom: 0; /* Remove margem inferior padrão */
    width: 100%; /* Ocupa toda a largura */
    table-layout: fixed; /* Garante larguras de colunas consistentes */
}

/* Estilização dos cabeçalhos da tabela */
.table-dark-theme thead th {
    background: #07406d; /* Fundo azul escuro */
    color: white; /* Texto branco */
    border-color: #07406d; /* Borda azul */
    position: sticky; /* Fixa o <thead> no topo */
    top: 0; /* Alinha ao topo do .table-responsive */
    z-index: 20; /* Garante que fique acima do <tbody> */
}

/* Estilização das bordas das linhas do corpo da tabela */
.table-dark-theme tbody tr {
    border-color: #07406d; /* Borda azul */
}

/* Efeito hover nas linhas do corpo da tabela */
.table-dark-theme tbody tr:hover {
    background-color: #0d6efd; /* Fundo azul claro ao passar o mouse */
    color: #425f7b; /* Texto ajustado para contraste */
}

/* Estilização de linhas alternadas no corpo da tabela */
.table-dark-theme tbody tr:nth-of-type(odd) {
    background-color: #3a3f44; /* Fundo cinza escuro para linhas ímpares */
}

/* Estilização das células do corpo da tabela */
.table-dark-theme tbody td {
    background-color: #c8c8c8 !important; /* Fundo cinza claro, sobrescreve outros estilos */
    padding: 0.25rem !important; /* Padding compacto */
}

/* Estilização das células do rodapé da tabela */
.table-dark-theme tfoot td {
    background: #07406d; /* Mesmo fundo azul do <thead> */
    color: white; /* Texto branco */
    border-color: #07406d; /* Borda azul */
    font-weight: bold; /* Negrito para destaque */
    position: sticky; /* Fixa o <tfoot> na parte inferior */
    bottom: 0; /* Alinha à parte inferior do .table-responsive */
    z-index: 15; /* Garante que fique acima do <tbody>, mas abaixo do <thead> */
}

/* Estilização do footer fixo da página */
.footer {
    position: fixed; /* Fixa o footer na parte inferior */
    bottom: 0; /* Alinha à borda inferior */
    left: 0; /* Alinha à borda esquerda */
    width: 100%; /* Ocupa toda a largura */
    background: #07406d; /* Mesmo fundo azul do header */
    color: white; /* Texto branco */
    padding: 1rem; /* Espaçamento interno */
    z-index: 100; /* Garante que fique acima de outros elementos */
    text-align: center; /* Centraliza o texto */
}

/* Estilos para a tela de login */
.login-body {
    background-color: #2c3034; /* Fundo cinza escuro */
    display: flex; /* Usa flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Garante altura total da janela */
    margin: 0; /* Remove margens */
    overflow: hidden; /* Impede rolagem */
}

/* Contêiner do formulário de login */
.login-container {
    background: #343a40; /* Fundo cinza escuro */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 2rem; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(7, 64, 109, 0.2); /* Sombra sutil */
    border: 1px solid #07406d; /* Borda azul */
    width: 100%; /* Ocupa a largura disponível */
    max-width: 400px; /* Limita a largura máxima */
    margin: 0 auto; /* Centraliza horizontalmente */
    display: flex; /* Usa flexbox para organizar conteúdo */
    flex-direction: column; /* Alinha elementos verticalmente */
    align-items: center; /* Centraliza elementos horizontalmente */
    text-align: center; /* Centraliza texto */
}

/* Estilização da logo no formulário de login */
.login-logo {
    height: 30px; /* Altura reduzida da logo */
    max-width: 150px; /* Limita a largura para evitar estiramento */
    object-fit: contain; /* Preserva proporções da imagem */
    display: block; /* Garante que seja um bloco */
    margin: 0 auto 1rem; /* Centraliza e adiciona espaço abaixo */
}

/* Estilização do formulário de login */
.login-form {
    width: 100%; /* Ocupa toda a largura do contêiner */
    margin: 0 auto; /* Reforça centralização */
}

/* Estilização dos campos de input no formulário de login */
.login-form .form-control {
    background-color: #343a40; /* Fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #07406d; /* Borda azul */
}

/* Estilização dos campos de input em foco */
.login-form .form-control:focus {
    background-color: #343a40; /* Mantém fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #0d6efd; /* Borda azul claro */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra azul clara */
}

/* Estilização dos ícones nos campos de input */
.login-form .input-group-text {
    background-color: #07406d; /* Fundo azul */
    border-color: #07406d; /* Borda azul */
    color: #e9ecef; /* Ícones claros */
}

/* Estilização do botão primário no formulário de login */
.login-form .btn-primary {
    background-color: #07406d; /* Fundo azul */
    border-color: #07406d; /* Borda azul */
}

/* Efeito hover no botão primário */
.login-form .btn-primary:hover {
    background-color: #0d6efd; /* Fundo azul claro */
    border-color: #0d6efd; /* Borda azul clara */
}

/* Estilos para formulário de admin.php */
.admin-form .form-control {
    background-color: #343a40; /* Fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #07406d; /* Borda azul */
}

/* Estilização dos campos de input em foco no admin */
.admin-form .form-control:focus {
    background-color: #343a40; /* Mantém fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #0d6efd; /* Borda azul claro */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra azul clara */
}

/* Estilização dos selects no formulário de admin */
.admin-form .form-select {
    background-color: #343a40; /* Fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #07406d; /* Borda azul */
}

/* Estilização dos selects em foco no admin */
.admin-form .form-select:focus {
    background-color: #343a40; /* Mantém fundo cinza escuro */
    color: #e9ecef; /* Texto claro */
    border-color: #0d6efd; /* Borda azul claro */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra azul clara */
}

/* Estilização do botão primário no formulário de admin */
.admin-form .btn-primary {
    background-color: #07406d; /* Fundo azul */
    border-color: #07406d; /* Borda azul */
}

/* Efeito hover no botão primário no admin */
.admin-form .btn-primary:hover {
    background-color: #0d6efd; /* Fundo azul claro */
    border-color: #0d6efd; /* Borda azul clara */
}

/* Estilização do contêiner de métricas no dashboard */
.metrics-container {
    margin-bottom: 2rem; /* Espaço entre métricas e gráficos */
}

/* Estilização do contêiner de gráficos no dashboard */
.charts-container {
    flex: 1; /* Ocupa o espaço restante */
}

/* Responsividade para telas menores (576px ou menos) */
@media (max-width: 576px) {
    .login-container {
        max-width: 90%; /* Ajusta a largura para telas pequenas */
        padding: 1.5rem; /* Reduz padding */
    }
    .header {
        padding: 0.5rem; /* Reduz padding no header */
    }
    .header-content {
        padding-right: 0.5rem; /* Ajusta espaço à direita */
    }
    .form-filter {
        flex-direction: column; /* Alinha filtros verticalmente */
        align-items: flex-start; /* Alinha à esquerda */
        gap: 0.5rem; /* Reduz espaço entre controles */
    }
    .form-filter .d-flex {
        width: 100%; /* Ocupa toda a largura */
    }
}

/* Estilização dos cards de informações no dashboard */
.card-info {
    background: #495057; /* Fundo cinza escuro */
    padding: 1rem; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    text-align: center; /* Centraliza texto */
    box-shadow: 0 2px 4px rgba(7, 64, 109, 0.3); /* Sombra sutil */
    color: #e9ecef; /* Texto claro */
    border: 1px solid #07406d; /* Borda azul */
    min-height: 120px; /* Altura mínima */
    display: flex; /* Usa flexbox para centralizar conteúdo */
    flex-direction: column; /* Alinha conteúdo verticalmente */
    justify-content: center; /* Centraliza verticalmente */
}

/* Estilização do título nos cards */
.card-info h6 {
    color: #0d6efd; /* Azul claro para destaque */
    margin-bottom: 0.5rem; /* Espaço abaixo */
}

/* Estilização do contêiner de gráficos */
.chart-container, .chart-placeholder {
    width: 100%; /* Ocupa toda a largura */
    max-width: 500px; /* Limita a largura máxima */
    height: 300px; /* Altura fixa */
    margin: 0 auto; /* Centraliza horizontalmente */
    background: #495057; /* Fundo cinza escuro */
    padding: 1rem; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 4px rgba(7, 64, 109, 0.3); /* Sombra sutil */
    display: flex; /* Usa flexbox para centralizar conteúdo */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    text-align: center; /* Centraliza texto */
}

/* Estilização do canvas dentro do contêiner de gráficos */
.chart-container canvas {
    width: 100% !important; /* Garante que o canvas ocupe a largura */
    height: 100% !important; /* Garante que o canvas ocupe a altura */
}

/* Estilização do placeholder de gráficos */
.chart-placeholder p {
    color: #6c757d; /* Texto cinza para indicar ausência de dados */
    margin: 0; /* Remove margens */
}

/* Estilização para mensagem de ausência de dados */
.no-data {
    text-align: center; /* Centraliza texto */
    color: #6c757d; /* Texto cinza */
    margin: 0; /* Remove margens */
}