/* --- Estilos Globais (Happy Digital) --- */
:root {
    --cor-primaria: #FFD700; /* Amarelo Ouro */
    --cor-fundo: #121212;
    --cor-container: #1E1E1E;
    --cor-texto: #FFFFFF;
    --cor-texto-secundario: #AAAAAA;
    --cor-borda: #333;
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    min-height: 100vh;
}

/* --- Wrapper da Tela de Login --- */
.login-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- Tela de Login (index.php) --- */
.login-container {
    background-color: var(--cor-container);
    padding: 2.5rem 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--cor-borda);
}

.login-container h1 {
    color: var(--cor-primaria);
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.login-container h1 span {
    color: var(--cor-texto);
}

.login-container p {
    text-align: center;
    color: var(--cor-texto-secundario);
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cor-texto-secundario);
}

.form-group input {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 5px;
    color: var(--cor-texto);
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
}

.btn-login {
    width: 100%;
    padding: 0.9rem;
    border: none;
    border-radius: 5px;
    background-color: var(--cor-primaria);
    color: #000;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-login:hover {
    background-color: #ffc400;
}

/* --- Estrutura do Dashboard (Admin e Aluno) --- */
.dashboard-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: var(--cor-fundo);
}

.sidebar {
    width: 250px;
    flex-shrink: 0; /* Impede que a sidebar encolha */
    background-color: var(--cor-container);
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--cor-borda);
}

.sidebar-header {
    text-align: center;
    padding: 0 1rem 2rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
}

.sidebar-header h2 {
    color: var(--cor-primaria);
    margin: 0;
}

.sidebar-header h2 span {
    color: var(--cor-texto);
}

.sidebar nav {
    flex-grow: 1; /* Ocupa o espaço disponível */
    overflow-y: auto; /* Adiciona scroll se os links não couberem */
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.sidebar nav ul li {
    padding: 1rem 2rem;
    color: var(--cor-texto-secundario);
    text-decoration: none;
    display: block;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar nav ul li.active,
.sidebar nav ul li:hover {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--cor-primaria);
    border-right: 3px solid var(--cor-primaria);
}

.sidebar nav ul li a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.sidebar .logout-link {
    padding: 1rem 2rem;
    color: #ff6b6b;
    text-decoration: none;
}

.sidebar .logout-link:hover {
    background-color: rgba(255, 107, 107, 0.1);
}

.main-content {
    flex-grow: 1; /* Ocupa todo o espaço restante */
    padding: 2rem 3rem;
    overflow-y: auto; /* Permite scroll no conteúdo principal */
    background-color: var(--cor-fundo);
}

.main-content h1 {
    color: var(--cor-primaria);
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* --- Módulos (Página Index Aluno) --- */
.modulo {
    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.modulo-header {
    background-color: var(--cor-borda);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cor-borda);
    border-radius: 8px 8px 0 0;
}

.modulo-header h2 {
    margin: 0;
    color: var(--cor-primaria);
}

.modulo-aulas {
    padding: 1.5rem;
}

.modulo-aulas ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modulo-aulas li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--cor-borda);
}

.modulo-aulas li:last-child {
    border-bottom: none;
}

.modulo-aulas li a {
    text-decoration: none;
    color: var(--cor-texto);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.modulo-aulas li a:hover {
    color: var(--cor-primaria);
}

/* --- Estilos CRUD (Gerenciamento Admin) --- */
.crud-form-container {
    background-color: var(--cor-container);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    margin-bottom: 2rem;
}

.crud-form-container h3 {
    margin-top: 0;
    color: var(--cor-primaria);
}

.crud-form .form-group {
    margin-bottom: 1rem;
}

.crud-form .form-group input,
.crud-form .form-group textarea,
.crud-form .form-group select {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 5px;
    color: var(--cor-texto);
    box-sizing: border-box; 
    font-family: 'Arial', sans-serif;
}

.crud-form .form-group textarea {
    resize: vertical;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-primary, .btn-secondary, .btn-edit, .btn-delete {
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    text-align: center;
}

.btn-primary {
    background-color: var(--cor-primaria);
    color: #000;
    transition: background-color 0.3s;
}
.btn-primary:hover {
    background-color: #ffc400;
}

.btn-secondary {
    background-color: var(--cor-borda);
    color: var(--cor-texto);
    transition: background-color 0.3s;
}
.btn-secondary:hover {
    background-color: #444;
}

.separator {
    border: 0;
    border-top: 1px solid var(--cor-borda);
    margin: 2.5rem 0;
}

/* --- Tabela de Conteúdo (Admin) --- */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.content-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    overflow: hidden;
}

.content-table thead tr {
    background-color: #000;
    color: var(--cor-primaria);
    text-align: left;
}

.content-table th,
.content-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--cor-borda);
    overflow-wrap: break-word;
}

.content-table tbody tr:last-of-type td {
    border-bottom: none;
}

.content-table tbody tr {
    transition: background-color 0.2s;
}

.content-table tbody tr:hover {
    background-color: #2a2a2a;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

/* --- Novos Estilos para Botões de Ação na Tabela --- */

.btn-edit {
    background-color: transparent; /* Fundo transparente */
    border: 1px solid var(--cor-borda); /* Borda cinza */
    color: var(--cor-texto-secundario); /* Texto cinza claro */
    transition: all 0.3s ease;
}
.btn-edit:hover {
    background-color: var(--cor-primaria); /* Fundo amarelo */
    border-color: var(--cor-primaria); /* Borda amarela */
    color: #000; /* Texto preto */
}

.btn-delete {
    background-color: transparent; /* Fundo transparente */
    border: 1px solid #5c1a1a; /* Borda vermelha escura */
    color: #ff9e9e; /* Texto vermelho claro */
    transition: all 0.3s ease;
}
.btn-delete:hover {
    background-color: #5c1a1a; /* Fundo vermelho escuro */
    border-color: #7a2323;
    color: #f7c5c5; /* Texto vermelho mais claro */
}

/* --- Mensagens de Feedback --- */
.success-message {
    background-color: #1a5c1e;
    color: #c5f7c9;
    padding: 0.9rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}
.error-message {
    background-color: #5c1a1a;
    color: #f7c5c5;
    padding: 0.9rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

/* "Breadcrumb" para mostrar o nome do módulo */
.modulo-breadcrumb {
    color: var(--cor-texto-secundario);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

/* =========================================================
--- Layout da Página de Aula (Vídeo e Playlist) ---
   (VERSÃO FINAL - COM CSS GRID)
=========================================================
*/

.aula-layout-container {
    display: grid;
    grid-template-columns: 1fr; /* Padrão: 1 coluna para mobile */
    gap: 2rem;
}

.aula-player-content {
    min-width: 0; /* Corrige bug de overflow */
}

/* --- Wrapper do Player de Vídeo --- */
.aula-video-wrapper {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    margin-bottom: 2rem;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Descrição da Aula (abaixo do vídeo) --- */
.aula-details {
    background-color: var(--cor-container);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
}
.aula-details h2 {
    color: var(--cor-primaria);
    margin-top: 0;
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 0.5rem;
}
.aula-details p, .aula-details ul {
    color: var(--cor-texto-secundario);
    line-height: 1.6;
}
.aula-details a {
    color: var(--cor-primaria);
}


/* --- Playlist (Sidebar da Direita) --- */
.aula-playlist-sidebar {
    background-color: var(--cor-container);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    height: fit-content; /* Altura se ajusta ao conteúdo */
    overflow: hidden; /* Para os cantos arredondados */
}

.aula-playlist-sidebar h3 {
    margin: 0;
    padding: 1.2rem 1.5rem;
    color: var(--cor-primaria);
    background-color: #000;
    border-bottom: 1px solid var(--cor-borda);
}

.aula-playlist-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Ajusta a altura da playlist para não passar da tela */
    max-height: calc(100vh - 250px); 
    overflow-y: auto;
}

.aula-playlist-sidebar li a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    text-decoration: none;
    color: var(--cor-texto-secundario);
    border-bottom: 1px solid var(--cor-borda);
    transition: background-color 0.2s;
}

.aula-playlist-sidebar li:last-child a {
    border-bottom: none;
}

.aula-playlist-sidebar li a:hover {
    background-color: #2a2a2a;
    color: var(--cor-texto);
}

.aula-playlist-sidebar li.active a {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--cor-primaria);
    font-weight: bold;
    border-left: 4px solid var(--cor-primaria);
    padding-left: calc(1.5rem - 4px); /* Compensa a borda */
}

.aula-playlist-sidebar .aula-numero {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--cor-texto-secundario);
    min-width: 20px;
    text-align: right;
}
.aula-playlist-sidebar li.active .aula-numero {
    color: var(--cor-primaria);
}


/* --- Media Query para telas maiores (Desktop) --- */
/* Esta é a parte que faz o vídeo ficar grande */
@media (min-width: 992px) {
    .aula-layout-container {
        /* Define 2 colunas: 
           1fr = O vídeo (ocupa todo o espaço que sobrar)
           350px = A playlist (largura fixa)
        */
        display: grid; /* Esta era a linha que faltava no seu ficheiro antigo */
        grid-template-columns: 1fr 350px; 
        align-items: flex-start; /* Alinha no topo */
    }
}
/* =========================================================
--- Estilos dos Cards de Módulo (Aluno Index) ---
=========================================================
*/

.modulo-grid-container {
    display: grid;
    /* Cria colunas automáticas de 280px, que se ajustam */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem; /* Espaçamento entre os cards */
    margin-top: 2rem;
}

.card-modulo {
    background-color: var(--cor-container);
    border-radius: 8px;
    border: 1px solid var(--cor-borda);
    overflow: hidden; /* Garante que a imagem não vaze */
    text-decoration: none;
    color: var(--cor-texto);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-modulo:hover {
    transform: translateY(-5px); /* Efeito de "levantar" */
    border-color: var(--cor-primaria);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.card-modulo-imagem {
    height: 160px; /* Altura fixa para a imagem */
    background-size: cover; /* Faz a imagem cobrir o espaço */
    background-position: center;
    background-color: #000; /* Fundo preto caso a imagem falhe */
    border-bottom: 1px solid var(--cor-borda);
}

.card-modulo-conteudo {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o conteúdo ocupar o espaço */
}

.card-modulo-conteudo h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--cor-texto); /* Texto branco, se destaca mais */
    font-size: 1.3rem;
}

.card-modulo-conteudo p {
    color: var(--cor-texto-secundario);
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1; /* Empurra o link "Começar" para baixo */
    margin-bottom: 1rem;
}

.card-modulo-link {
    display: inline-block;
    background-color: var(--cor-primaria);
    color: #000;
    padding: 0.6rem 1rem;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.card-modulo:hover .card-modulo-link {
    background-color: #ffc400;
}
/* =========================================================
--- Responsividade (Mobile) ---
=========================================================
*/

/* Aplica estas regras em ecrãs com 800px de largura ou menos */
@media (max-width: 800px) {

    /* 1. Converte o layout geral para vertical */
    .dashboard-container {
        flex-direction: column; /* Em vez de lado a lado, fica um em cima do outro */
        height: auto; /* Altura automática */
        min-height: 100vh;
    }

    /* 2. Transforma a sidebar numa top-bar */
    .sidebar {
        width: 100%; /* Largura total */
        height: auto; /* Altura automática */
        border-right: none;
        border-bottom: 1px solid var(--cor-borda);
        padding: 0;
        flex-direction: row; /* Itens da barra em linha */
        justify-content: space-between; /* Logo na esquerda, Sair na direita */
    }

    /* 3. Ajusta o logo */
    .sidebar-header {
        padding: 1rem 1.5rem;
        border-bottom: none;
    }
    .sidebar-header h2 {
        font-size: 1.5rem;
    }
    .sidebar-header small {
        display: none; /* Esconde "Área do Aluno" */
    }

    /* 4. Transforma os links de navegação */
    .sidebar nav {
        flex-grow: 0; /* Remove o espaço extra */
    }
    .sidebar nav ul {
        margin: 0;
        display: flex; /* Links lado a lado */
    }
    .sidebar nav ul li {
        padding: 1rem 1.2rem;
        border-right: 1px solid var(--cor-borda); /* Separa os links */
    }
    .sidebar nav ul li.active,
    .sidebar nav ul li:hover {
        border-right: 1px solid var(--cor-borda); /* Remove a borda amarela */
    }
    .sidebar nav ul li a {
        font-size: 0.9rem;
    }

    /* 5. Ajusta o botão de Sair */
    .sidebar .logout-link {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        border-left: 1px solid var(--cor-borda);
    }

    /* 6. Ajusta o conteúdo principal */
    .main-content {
        padding: 1.5rem; /* Menos padding no mobile */
    }

    /* 7. Ajusta os cards de módulo (força 1 coluna) */
    .modulo-grid-container {
        grid-template-columns: 1fr;
    }
    
    /* 8. Ajusta a página da aula (remove a largura fixa da playlist) */
    @media (min-width: 0px) { /* Sobrescreve a regra dos 992px */
        .aula-layout-container {
            grid-template-columns: 1fr !important; /* Força 1 coluna */
        }
    }
    
    /* 9. Ajusta as tabelas do Admin (bónus) */
    .action-buttons {
        flex-direction: column; /* Botões um em cima do outro */
        align-items: flex-start;
        gap: 0.8rem;
    }
}