/* css/style.css */

/* Estilos gerais para o corpo da página */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5; /* Cor de fundo suave */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: flex-start; /* Alinha os itens ao topo do container flex */
    min-height: 100vh; /* Altura mínima da viewport */
    margin: 0;
    padding: 20px;
    box-sizing: border-box; /* Inclui padding na largura/altura total */
}

/* Estilo para containers de conteúdo (formulários, painéis) */
.container {
    background-color: #fff; /* Fundo branco */
    padding: 30px;
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 100%;
    max-width: 600px; /* Largura máxima para formulários e painéis menores */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Estilo para containers mais largos (listagem de canais, página do canal) */
.container.wide {
    max-width: 900px;
}

/* Estilos para títulos h2 e h3 */
h2, h3 {
    color: #333; /* Cor de texto escuro */
    margin-bottom: 25px;
    text-align: center;
}

/* Estilo para grupos de formulário (label + input) */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Estilo para labels dos campos de formulário */
.form-group label {
    display: block; /* Ocupa toda a largura disponível */
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}

/* Estilo para inputs de texto, email, password, file e textareas */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group textarea {
    width: calc(100% - 22px); /* 100% menos o padding e a borda */
    padding: 12px;
    border: 1px solid #ddd; /* Borda cinzenta clara */
    border-radius: 6px; /* Cantos arredondados */
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
    font-size: 16px;
}

/* Estilo para botões de submit e elementos com a classe .button */
button[type="submit"], .button {
    background-color: #007bff; /* Cor azul primária */
    color: white; /* Texto branco */
    padding: 12px 20px;
    border: none; /* Sem borda */
    border-radius: 6px; /* Cantos arredondados */
    cursor: pointer; /* Cursor de ponteiro */
    font-size: 18px;
    width: 100%; /* Ocupa a largura total */
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
    text-decoration: none; /* Remove sublinhado em links */
    display: inline-block; /* Permite padding e largura em links */
    text-align: center;
}

/* Efeito hover para botões e elementos .button */
button[type="submit"]:hover, .button:hover {
    background-color: #0056b3; /* Tom de azul mais escuro no hover */
}

/* Estilo para mensagens de sucesso/informação */
.mensagem {
    background-color: #d4edda; /* Fundo verde claro */
    color: #155724; /* Texto verde escuro */
    border: 1px solid #c3e6cb; /* Borda verde */
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
}

/* Estilo para mensagens de erro */
.mensagem.erro {
    background-color: #f8d7da; /* Fundo vermelho claro */
    color: #721c24; /* Texto vermelho escuro */
    border: 1px solid #f5c6cb; /* Borda vermelha */
}

/* Estilo para parágrafos */
p {
    margin-top: 20px;
    color: #666; /* Cor de texto cinzento */
    text-align: center;
}

/* Estilo para links em parágrafos */
p a {
    color: #007bff; /* Cor azul primária */
    text-decoration: none; /* Sem sublinhado */
    font-weight: bold;
}

/* Efeito hover para links em parágrafos */
p a:hover {
    text-decoration: underline; /* Sublinhado no hover */
}

/* Estilo para a barra de navegação superior */
.navbar {
    background-color: #333; /* Fundo cinzento escuro */
    padding: 10px 0;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra */
}

/* Estilo para os links da barra de navegação */
.navbar a {
    color: white; /* Texto branco */
    text-decoration: none;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 5px; /* Cantos arredondados */
    transition: background-color 0.3s ease; /* Transição suave */
}

/* Efeito hover para os links da barra de navegação */
.navbar a:hover {
    background-color: #555; /* Cor cinzenta mais clara no hover */
}

/* Layout para a lista de canais (usando Grid) */
.channel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colunas responsivas */
    gap: 20px; /* Espaço entre os cartões */
    margin-top: 30px;
}

/* Estilo para cada cartão de canal */
.channel-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Garante que o conteúdo não vaze */
    text-align: center;
    transition: transform 0.2s ease; /* Efeito de translação no hover */
}

/* Efeito hover para o cartão do canal */
.channel-card:hover {
    transform: translateY(-5px); /* Move o cartão ligeiramente para cima */
}

/* Estilo para o título do cartão do canal */
.channel-card h3 {
    margin: 15px 0 10px;
    color: #007bff; /* Cor azul primária */
}

/* Estilo para o parágrafo no cartão do canal */
.channel-card p {
    color: #777;
    font-size: 0.9em;
    padding: 0 15px 15px;
}

/* Estilo para o botão "Ver Canal" no cartão */
.channel-card .button {
    margin: 15px;
    display: block; /* Para que ocupe a largura total do cartão */
    width: auto;
}

/* Estilo para o player de vídeo/iframe */
.video-player {
    width: 100%;
    max-width: 800px; /* Largura máxima para o player */
    margin: 20px auto; /* Centraliza o player horizontalmente */
    background-color: #000; /* Fundo preto para o player */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Estilo para as tags video e iframe dentro do player */
.video-player video, .video-player iframe {
    width: 100%;
    height: 450px; /* Altura fixa para o player */
    display: block;
    border: none;
}

/* ... (conteúdo existente do style.css) ... */

/* Estilo para o botão de remover vídeo na dashboard */
.button.delete-button {
    background-color: #dc3545; /* Cor vermelha para indicar perigo/remoção */
    float: right; /* Alinha à direita na lista */
    width: auto;
    padding: 8px 12px;
    font-size: 14px;
    margin-left: 10px; /* Espaçamento à esquerda */
}

.button.delete-button:hover {
    background-color: #c82333; /* Tom de vermelho mais escuro no hover */
}

.video-list {
    list-style: none; /* Remove marcadores de lista */
    padding: 0;
    margin-top: 20px;
}

.video-list li {
    background-color: #f0f0f0;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between; /* Alinha o texto e o botão */
    align-items: center;
    font-size: 1.1em;
    color: #333;
}

.video-list li span {
    flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
}

/* Garante que o container flex no body não atrapalhe a navbar */
body {
    display: block; /* Mude de flex para block para a navbar se posicionar corretamente */
}

.navbar {
    position: sticky; /* Mantém a navbar no topo ao rolar */
    top: 0;
    z-index: 1000; /* Garante que ela fique acima de outros elementos */
}