/* Estilos base - permanecem como estão */
.parent-dashboard, .stat, .recent-activities table, .chart-container {
    background-color: var(--card-bg);
    color: var(--text-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modo Noturno */
.dark-mode .parent-dashboard,
.dark-mode .stat,
.dark-mode .recent-activities table,
.dark-mode .chart-container {
    background-color: var(--card-bg);
    color: var(--text-light);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

.recent-activities th {
    background-color: var(--table-header-bg);
    color: var(--text-light);
}

/* Modo Noturno */
.dark-mode .recent-activities th {
    background-color: var(--table-header-bg);
}

.dark-mode .recent-activities tbody tr:hover {
    background-color: #444;
}


.stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
    /* Adiciona espaçamento entre elementos */
    flex-wrap: wrap;
    /* Permite que os itens se reorganizem em dispositivos menores */
}

.stat {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 30%;
    flex: 1 1 100%;
    /* Ajusta largura dinâmica em dispositivos menores */
    max-width: 200px;
    /* Define um tamanho máximo para evitar esticar demais */
}

.stat h2 {
    font-size: 1rem;
    /* Reduz o tamanho do texto em dispositivos menores */
}

.stat p {
    font-size: 1.8rem;
    /* Ajusta o tamanho do número */
    color: #28a745;
    margin: 0;
}

@media (max-width: 480px) {
    .parent-dashboard {
        padding: 0.5rem;
        /* Reduz o padding geral */
    }

    .stats {
        gap: 1rem;
        /* Reduz o espaçamento entre os cartões */
    }

    .stat {
        font-size: 0.9rem;
        /* Reduz o tamanho da fonte */
        padding: 0.8rem;
        /* Reduz o padding interno dos cartões */
    }

    .parent-actions ul {
        flex-direction: column;
        /* Alinha as ações em coluna */
        gap: 0.5rem;
        /* Reduz o espaçamento entre os botões */
    }

    .parent-actions a {
        font-size: 0.8rem;
        /* Reduz o tamanho do texto */
        padding: 0.6rem 1rem;
        /* Ajusta o padding */
    }
}


.parent-actions ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /* Permite que os itens se quebrem em linhas */
}

.parent-actions li {
    margin: 0.5rem;
}

.parent-actions a {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    background-color: #28a745;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.parent-actions a:hover {
    background-color: #218838;
}

.recent-activities table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recent-activities th,
.recent-activities td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    /* Reduz o tamanho da fonte */
}

.recent-activities th {
    background-color: #28a745;
    color: #ffffff;
}

.recent-activities tbody tr:hover {
    background-color: #f1f1f1;
}

.recent-activities p {
    color: #555;
    font-style: italic;
    margin: 1rem 0;
    text-align: center;
}

.charts {
    margin-top: 2rem;
}

.chart-container {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.chart-container h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: #333;
}

/* Media Queries para Responsividade */

/* Ajustes para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    .stats {
        flex-direction: column;
        /* Empilha os itens */
        gap: 1.5rem;
    }

    .stat {
        width: 100%;
        /* Cada item ocupa toda a largura */
        max-width: none;
        /* Remove o tamanho máximo */
    }

    .chart-container {
        padding: 1rem;
        /* Reduz o padding */
    }

    .recent-activities th,
    .recent-activities td {
        font-size: 0.8rem;
        /* Reduz o tamanho do texto em tabelas */
    }
}

/* Ajustes para telas menores que 480px (celulares pequenos) */
@media (max-width: 480px) {
    .parent-dashboard {
        padding: 0.5rem;
        /* Reduz o padding geral */
    }

    .stat p {
        font-size: 1.5rem;
        /* Ajusta o tamanho do número */
    }

    .parent-actions a {
        padding: 0.6rem 1rem;
        /* Reduz o tamanho dos botões */
        font-size: 0.8rem;
        /* Reduz o tamanho do texto nos botões */
    }

    .chart-container h3 {
        font-size: 1.2rem;
        /* Reduz o tamanho do título */
    }
}