body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Navbar */
.navbar {
    background-color: var(--primary-color, #007bff); /* Fallback color */
    color: white;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-brand {
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.navbar-nav {
    list-style: none;
    margin-top: 15px;
    padding: 0;
    display: flex;
    align-items: center;
}
.navbar-nav li {
    margin-left: 20px;
}
.navbar-nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.navbar-nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
}

/* Main Content */
.main-content {
    padding: 20px 0;
    min-height: 600px;
    border-radius: 8px;
}

/* Footer */
.footer {
    text-align: center;
    color: black;
}


/*forms novo (teste) */
/* Grupos de Formulário */
.form-group {
    margin-bottom: 20px; /* Mais espaçamento */
    text-align: left; /* Alinha labels à esquerda */
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600; /* Mais negrito */
    color: #555;
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] { /* Inclui text para forgot_password */
    width: 100%;
    padding: 12px 15px; /* Mais padding */
    border: 1px solid #ddd;
    border-radius: 8px; /* Mais arredondado */
    box-sizing: border-box;
    font-size: 1em;
}
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus {
    border-color: #007bff; /* Cor de foco */
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Sombra de foco */
}


/* Forms antigo
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}*/

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}
.btn-primary {
    background-color: var(--primary-color, #007bff);
    color: white;
}
.btn-primary:hover {
    background-color: var(--primary-color, #0056b3);
    transform: translateY(-2px); /* Efeito de levantar */
}
.btn-danger {
    background-color: #dc3545;
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
}

/* Tables */
#stats-table {
    width: 100%;
    }
#stats-table th, #stats-table td {
    width: 50px;
     text-align: center;
}


table {
    border-collapse: collapse;
    margin-top: 20px;
}
table th, table td {
    border: 1px solid #dddddd7a;
    padding: 8px;
    text-align: left;
}
table th {
    background-color: #f2f2f2;
}

/* Background Imagem */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* <<< COLOQUE A URL DA SUA IMAGEM DE FUNDO AQUI */
    background-size: cover;
    background-position: center;
    filter: grayscale(50%); /* Opcional: Deixar a imagem um pouco cinza para focar no formulário */
}

/* Overlay (Camada sobre a imagem para legibilidade) */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Preto semi-transparente */
    backdrop-filter: blur(3px); /* Opcional: Efeito de blur no fundo */
    -webkit-backdrop-filter: blur(3px); /* Para compatibilidade com Safari */
}

/* Wrapper para centralizar o formulário de login */
.login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o wrapper ocupe toda a altura da viewport */
    position: relative; /* Para ficar acima do background e overlay */
    z-index: 1; /* Garante que fique acima do overlay */
    padding: 20px; /* Padding para telas pequenas */
    box-sizing: border-box;
}

/* Contêiner do Formulário de Login (o box branco) */
.login-container {
    background-color: white;
    padding: 40px; /* Mais padding */
    border-radius: 12px; /* Cantos mais arredondados */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra mais suave */
    width: 100%;
    max-width: 400px; /* Largura máxima */
    text-align: center;
}

/* Cabeçalho do Login (Logo e Título) */
.login-header {
    margin-bottom: 30px;
}
.login-logo {
    max-width: 150px; /* Tamanho do logo */
    height: auto;
    margin-bottom: 15px;
}
.login-container h2 {
    font-size: 1.8em; /* Tamanho do título */
    color: #333;
    margin-top: 0;
    margin-bottom: 0;
}


/* Rodapé do Login */
.login-footer {
    margin-top: 30px;
    font-size: 0.8em;
    color: #888;
}

/* Link "Esqueci a Senha?" */
.forgot-password-link {
    margin-top: 20px;
    font-size: 0.9em;
}
.forgot-password-link a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}
.forgot-password-link a:hover {
    color: #0056b3;
    text-decoration: underline;
}


.error-message {
    color: red;
    margin-bottom: 15px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.stat-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.stat-card h3 {
    margin-top: 0;
    color: var(--primary-color, #007bff);
}
.stat-card p {
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0 0;
}

/* Mensagens de feedback */
.message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}
.message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}




.detail-row {
    background-color: #f9f9f9; /* Cor de fundo para destacar */
    border-bottom: 1px solid #ddd;
}

.detail-row td {
    padding: 15px 20px; /* Mais padding para o conteúdo dos detalhes */
}

.detail-content {
    padding-left: 20px; /* Recuo para o conteúdo dos detalhes */
    line-height: 1.6;
}

/* Estilo para o botão de detalhes (opcional, para visual) */
.btn-info {
    background-color: #17a2b8;
    color: white;
}
.btn-info:hover {
    background-color: #138496;
}

/* Estilo para a caixa de busca */
.search-box {
    margin-bottom: 20px;
}
.search-box input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Estilo para cabeçalhos de tabela clicáveis */
#alunosTable th {
    cursor: pointer;
    user-select: none; /* Evita seleção de texto ao clicar */
}
#alunosTable th.asc::after {
    content: " ▲";
}
#alunosTable th.desc::after {
    content: " ▼";
}


.btn-secondary {
    background-color: #6c757d;
    color: white;
    text-decoration: none;
}
.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-warning {
    background-color: #e7f3fe;
    color: white; /* Texto escuro para contraste */
    border-radius: 78px!important;
        padding: 7px!important;
}
.btn-warning:hover {
    background-color: #2196f3;
}



/* Estilo para o box de informação */
.info-box {
    background-color: #e7f3fe; /* Azul claro */
    border-left: 6px solid #2196F3; /* Borda azul */
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    color: #000; /* Cor do texto */
}
.info-box p {
    margin: 0;
    font-size: 0.95em;
}


.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 10px; /* Altura da barra */
    overflow: hidden; /* Garante que a barra colorida não saia do container */
    margin-top: 5px;
}

.progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out; /* Animação suave */
}

.progress-bar-green {
    background-color: #28a745; /* Verde */
}

.progress-bar-yellow {
    background-color: #ffc107; /* Amarelo */
}

.progress-bar-red {
    background-color: #dc3545; /* Vermelho */
}





/* Estilos para colorir as linhas da tabela de Níveis de Inglês */
.level-row-nao-definido { background-color: #adb5bd; } /* Cor do "Não definido" do gráfico */
.level-row-a0 { background-color: #28a745; } /* Cor do "A0" do gráfico */
.level-row-a1 { background-color: #a6fff0; } /* Cor do "A1" do gráfico */
.level-row-a2 { background-color: #007bff; } /* Cor do "A2" do gráfico */
.level-row-b1 { background-color: #ba9def; } /* Cor do "B1" do gráfico */
.level-row-b2 { background-color: #6f42c1; } /* Cor do "B2" do gráfico */
.level-row-c1 { background-color: #ffc107; } /* Cor do "C1" do gráfico */
.level-row-c2 { background-color: #dc3545; } /* Cor do "C2" do gráfico */

/* Opcional: Ajustar cor do texto para melhor contraste em fundos escuros */
.level-row-b2, .level-row-c2, .level-row-a0, .level-row-a2 {
    color: white;
}





/* --- CSS PARA O ASSISTENTE DE IA (COLOQUE ISSO NO SEU ARQUIVO CSS PRINCIPAL, EX: assets/css/style.css) */

.assistant-container { margin-top: 40px; padding: 20px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; }
#assistant-chart-container { position: relative; height: 400px; width: 100%; margin: 20px auto; max-width: 800px; }
.debug-log { margin-top: 25px; border-top: 2px solid #e9ecef; padding-top: 15px; }
.debug-log summary { font-weight: bold; cursor: pointer; color: #6c757d; font-size: 0.9em; margin-bottom: 10px; }
.debug-log pre { background-color: #212529; color: #f8f9fa; padding: 15px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; font-size: 0.8em; }
.assistant-summary { background-color: #e9f7ff; border-left: 4px solid #007bff; padding: 15px; border-radius: 4px; margin-bottom: 20px; }
.assistant-summary p { margin:0; font-style: italic; color: #004085; }
.example-questions button { background-color: #e9ecef; border: 1px solid #ced4da; color: #495057; padding: 5px 10px; margin: 5px; border-radius: 15px; cursor: pointer; font-size: 0.9em; }
.example-questions button:hover { background-color: #dde2e6; }




/* Estilos para a Página de Relatórios */

 .saved-reports-container {
        margin-bottom: 30px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    .saved-reports-container h2 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.25rem;
    }
    .saved-reports-list {
        display: flex;
        flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha */
        gap: 10px; /* Espaçamento entre os botões */
    }
    .btn-saved-report {
        display: inline-flex; /* Alinha o texto e o 'x' */
        align-items: center;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        color: #495057;
        padding: 8px 12px 8px 15px; /* Mais espaço à direita para o 'x' */
        border-radius: 20px;
        cursor: pointer; /* Garante que o cursor mude */
        font-size: 0.9em;
        transition: all 0.2s ease-in-out;
        position: relative;
    }
    .btn-saved-report:hover {
        background-color: #dde2e6;
        border-color: #b9bfc6;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    .delete-report-btn {
        margin-left: 8px;
        font-size: 1.4rem;
        color: #aaa;
        line-height: 1;
        padding: 0 5px;
        border-radius: 50%;
    }
    .btn-saved-report:hover .delete-report-btn {
        color: #888;
    }
    .delete-report-btn:hover {
        background-color: #d3d9df;
        color: #e74a3b !important; /* Cor vermelha forte no hover do 'x' */
    }