/* Escala_Ninfas/public/assets/css/style.css */

/* Estilos gerais para corpo e container de conteúdo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha no topo para layouts maiores */
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box; /* Garante que padding não adicione largura extra */
}

/* Estilos para o container principal da página */
.container, .dashboard-container, .login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 100%;
}
.container {
    max-width: 960px; /* Largura máxima para a lista de ninfas */
}
.dashboard-container {
    max-width: 960px; /* Largura máxima para o dashboard */
    display: flex;
    flex-direction: column; /* Organiza em coluna */
}
.login-container {
    max-width: 400px; /* Largura máxima para o formulário de login */
    text-align: center;
    /* Adiciona sombra um pouco mais suave e centraliza verticalmente para o login */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* Ajusta a altura automaticamente */
}

/* Estilos para títulos */
h1, h2 {
    color: #333;
    margin-bottom: 20px;
}
.login-container h1 {
    margin-top: 0;
}

/* Estilos para formulários (usados no login e futuramente em create/edit) */
.form-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%; /* Garante que o form-group ocupe a largura completa do container */
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
select {
    width: calc(100% - 22px); /* 100% - padding */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Inclui padding e borda no width */
}
button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%; /* Botões de formulário ocupam a largura total */
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #0056b3;
}

/* Mensagens de erro */
.error-message {
    color: red;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Estilos específicos do Dashboard */
.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}
.header-section h1 {
    margin: 0;
    font-size: 1.8em;
}
.user-info {
    font-size: 1.1em;
    color: #555;
    text-align: right;
}
.user-info strong {
    color: #007bff;
}
.main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.sidebar-menu {
    flex: 0 0 200px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.sidebar-menu h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.2em;
    margin-bottom: 15px;
}
.sidebar-menu a {
    display: block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    margin-bottom: 10px;
    text-align: center;
    transition: background-color 0.3s ease;
}
.sidebar-menu a:hover {
    background-color: #0056b3;
}
.sidebar-menu .admin-link {
    background-color: #28a745;
}
.sidebar-menu .admin-link:hover {
    background-color: #218838;
}
.sidebar-menu .logout-button {
    background-color: #dc3545;
    margin-top: 20px;
}
.sidebar-menu .logout-button:hover {
    background-color: #c82333;
}
.main-scale-display {
    flex: 1;
    background-color: #e9ecef;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.main-scale-display h2 {
    margin-top: 0;
    color: #333;
}
.scale-content {
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    color: #555;
    text-align: center;
}

/* Estilos para a Tabela de Ninfas (já existiam no ninfas/index.php) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
    color: #333;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
tr:hover {
    background-color: #f1f1f1;
}
.actions a {
    margin-right: 10px;
    text-decoration: none;
    color: #007bff;
}
.actions a:hover {
    text-decoration: underline;
}
.add-ninfa-button {
    background-color: #28a745; /* Cor para o botão de adicionar */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
}
.add-ninfa-button:hover {
    background-color: #218838;
}
.return-link {
    display: block;
    margin-top: 20px;
    color: #007bff;
    text-decoration: none;
}
.return-link:hover {
    text-decoration: underline;
}

/* Estilo para o Botão Cancelar com cor de fundo vermelha */
.btn-cancelar-custom {
    background-color: #dc3545; /* Vermelho vibrante */
    color: white; /* Texto branco */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: auto; /* A largura se ajusta ao conteúdo */
    flex-grow: 1; /* Permite que o botão cresça dentro do flex container */
    text-align: center;
    text-decoration: none; /* Remove o sublinhado padrão de links */
    display: inline-block; /* Garante que padding e largura funcionem como em um bloco */
    box-sizing: border-box; /* Inclui padding e borda no cálculo da largura/altura */
    transition: background-color 0.3s ease; /* Transição suave no hover */
}

.btn-cancelar-custom:hover {
    background-color: #c82333; /* Vermelho um pouco mais escuro no hover */
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
        align-items: flex-start;
    }
    .user-info {
        text-align: left;
        margin-top: 10px;
    }
    .main-content {
        flex-direction: column; /* Coloca sidebar e conteúdo principal em coluna */
    }
    .sidebar-menu {
        flex: none; /* Remove flex-grow, flex-shrink */
        width: 100%; /* Ocupa a largura total */
    }

    /* Estilos para mensagens de alerta */

    .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: bold;
}

    .alert-success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
}


/* ... (outros estilos) ... */

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espaçamento entre os formulários e botões */
    margin-bottom: 20px;
    align-items: flex-end; /* Alinha os itens na parte inferior */
}

.filter-form, .generate-form, .report-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap; /* Permite que os itens quebrem em linhas menores */
}

.filter-form label {
    margin-bottom: 0; /* Remove margem inferior para alinhamento */
}

.button-generate {
    background-color: #ffc107; /* Amarelo/Laranja para geração */
    color: #333; /* Texto escuro para contraste */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.button-generate:hover {
    background-color: #e0a800; /* Tom mais escuro no hover */
}

.button-report {
    background-color: #17a2b8; /* Azul claro para relatórios */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.button-report:hover {
    background-color: #138496;
}

.button-whatsapp {
    background-color: #28a745; /* Verde para WhatsApp */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.button-whatsapp:hover {
    background-color: #218838;
}

/* Ajuste para botões gerais */
.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Para links estilizados como botões */
    display: inline-block; /* Para que padding e largura funcionem */
}
.button:hover {
    background-color: #0056b3;
}

/* ... (outros estilos) ... */

/* Estilos para células da escala */
.escala-cell {
    cursor: default; /* Padrão, para células não clicáveis */
}

.escala-cell.clickable-vago {
    cursor: pointer; /* Muda o cursor para indicar clicável */
    background-color: #e6ffe6; /* Fundo verde claro para VAGO clicável */
    font-weight: bold;
    color: #28a745; /* Texto verde para VAGO clicável */
    transition: background-color 0.2s ease;
}

.escala-cell.clickable-vago:hover {
    background-color: #d4f8d4; /* Fundo um pouco mais escuro no hover */
}