/* ==========================================================================
   1. RESET BÁSICO E CONFIGURAÇÕES GLOBAIS
   ========================================================================== */

/* Zera margens e paddings para um controle mais preciso */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e borda não afetem o tamanho final do elemento */
}

/* Estilos principais para o corpo da página */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212; /* Cor de fundo escura (tema dark) */
    color: #e0e0e0; /* Cor de texto clara para contraste */
    display: flex;
    flex-direction: column; /* Organiza o conteúdo em coluna (header, main, footer) */
    min-height: 100vh; /* Garante que o corpo ocupe pelo menos 100% da altura da tela */
    text-align: center; /* Centraliza o texto por padrão */
}

/* ==========================================================================
   2. CABEÇALHO (HEADER)
   ========================================================================== */

header {
    display: flex;
    justify-content: space-between; /* Alinha o título à esquerda e a seção do usuário à direita */
    align-items: center; /* Centraliza verticalmente os itens */
    padding: 20px;
    border-bottom: 1px solid #333; /* Linha sutil para separar o cabeçalho do conteúdo */
    width: 100%;
}

h1 {
    color: #ffffff;
    font-size: 2.5rem; /* Tamanho grande para o título principal */
}

/* Seção de boas-vindas e logout do usuário */
#user-section {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaçamento entre a mensagem de boas-vindas e o botão */
}

#welcome-message {
    font-size: 1rem;
}

#logout-button {
    background-color: #6c757d; /* Cinza */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 50px; /* Botão arredondado */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#logout-button:hover {
    background-color: #5a6268; /* Escurece ao passar o mouse */
}

/* ==========================================================================
   3. CONTEÚDO PRINCIPAL (MAIN)
   ========================================================================== */

main {
    flex-grow: 1; /* Permite que o conteúdo principal cresça e ocupe o espaço disponível */
    padding: 20px;
    width: 100%;
    max-width: 900px; /* Largura máxima para manter a legibilidade */
    margin: 0 auto; /* Centraliza o conteúdo principal na página */
}

/* Divisor visual para separar seções */
.section-divider {
    border: none;
    height: 1px;
    background-color: #333;
    margin: 40px 0;
}

/* ==========================================================================
   4. BOTÕES DE CONTROLE GERAL
   ========================================================================== */

#controls, #track-controls {
    margin-bottom: 20px;
}

/* Estilo base para os botões de controle */
#add-pad-button, #remove-mode-button, #add-track-button, #color-mode-button {
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 5px;
}

/* Cores específicas para cada botão */
#add-pad-button, #add-track-button {
    background-color: #1DB954; /* Verde Spotify */
}

#add-pad-button:hover, #add-track-button:hover {
    background-color: #1ed760;
}

#remove-mode-button {
    background-color: #6c757d; /* Cinza */
}

#remove-mode-button:hover {
    background-color: #5a6268;
}

#remove-mode-button.active {
    background-color: #ff4d4d; /* Vermelho quando o modo de remoção está ativo */
}

#color-mode-button {
    background-color: #007bff; /* Azul */
}

#color-mode-button:hover {
    background-color: #0069d9;
}

#color-mode-button.active {
    background-color: #005cbf; /* Azul mais escuro quando o modo de cor está ativo */
}

/* ==========================================================================
   5. PADS DE SOM
   ========================================================================== */

/* Container que segura todos os pads */
#pad-container {
    display: grid;
    /* Cria colunas responsivas: preenche com o máximo de pads de 120px que couberem */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

/* Estilo individual de cada pad */
.pad {
    position: relative; /* Necessário para posicionar elementos filhos (botão de remover, seletor de cor) */
    aspect-ratio: 1 / 1; /* Mantém o pad quadrado */
    background-color: #282828;
    border: 2px solid #404040;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b3b3b3;
    transition: all 0.2s ease; /* Animação suave para todas as propriedades */
}

.pad:hover {
    background-color: #333333;
    border-color: #535353;
}

/* Efeito de "brilho" quando o pad está ativo (tocando) */
.pad.active {
    /* A cor do brilho é definida via JavaScript com a variável CSS --glow-color */
    box-shadow: 0 0 25px 5px var(--glow-color, #7c3aed);
    transform: scale(1.05); /* Leve aumento de tamanho */
    background-color: var(--glow-color, #7c3aed);
}

/* Estilo para indicar que um som pode ser "solto" sobre o pad */
.pad.dragover {
    background-color: #404040;
    border-style: dashed;
    border-color: #1DB954;
}

/* Botão para remover um pad (X) */
.remove-pad-button {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #ff4d4d; /* Vermelho */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* Escondido por padrão */
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 20px;
    font-weight: bold;
    z-index: 10; /* Garante que fique acima do pad */
}

/* Mostra o botão de remover ao passar o mouse sobre o pad ou quando o modo de remoção está ativo */
.pad:hover .remove-pad-button, .remove-mode .remove-pad-button {
    display: flex;
}

.remove-pad-button:hover {
    background-color: #ff1a1a; /* Vermelho mais intenso */
}

/* Animação "tremor" nos pads quando o modo de remoção está ativo */
.remove-mode .pad {
    border-color: #ff4d4d;
    animation: wiggle 0.2s infinite;
}

@keyframes wiggle {
    0% { transform: rotate(0.5deg); }
    50% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0.5deg); }
}

/* Seletor de cor para o brilho do pad */
.color-input, .volume-slider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centraliza horizontalmente */
    width: 80%;
    height: 15px;
    cursor: pointer;
    display: none; /* Escondido por padrão */
    z-index: 10;
}

.color-input {
    bottom: 25px; /* Posição acima do slider de volume */
}

.volume-slider {
    bottom: 5px; /* Posição na base do pad */
}

/* Mostra os controles ao passar o mouse sobre o pad ou nos modos de edição */
.pad:hover .color-input,
.pad:hover .volume-slider,
.color-mode .color-input,
.remove-mode .volume-slider /* Exemplo: mostrar volume no modo remoção */
{
    display: block;
}

.color-mode .pad {
    border-color: #007bff; /* Muda a cor da borda para indicar o modo */
}

/* ==========================================================================
   6. SEÇÃO DE FAIXAS DE ÁUDIO (TRACKS)
   ========================================================================== */

#track-section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

#track-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Estilo para cada item de faixa */
.track-item {
    background-color: #282828;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.track-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.track-name {
    flex-grow: 1; /* Ocupa o espaço restante */
    text-align: left;
    font-size: 16px;
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o texto que transborda */
    text-overflow: ellipsis; /* Adiciona "..." ao final do texto cortado */
}

.track-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Estilo para os botões de controle da faixa (play, mute, etc.) */
.track-controls button {
    background-color: #404040;
    border: 1px solid #505050;
    color: #e0e0e0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Impede que os botões encolham */
}

.track-controls button:hover {
    background-color: #505050;
}

.track-controls button.active {
    background-color: #1DB954; /* Verde quando ativo (ex: play) */
}

/* Controle de volume */
.track-controls input[type="range"] {
    width: 80px;
}

/* Barra de progresso da faixa */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #404040;
    border-radius: 4px;
    overflow: hidden; /* Garante que a barra de progresso fique contida */
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: #1DB954;
    transition: width 0.1s linear; /* Animação suave do progresso */
}

/* ==========================================================================
   7. BIBLIOTECA DE SONS (SOUND LIBRARY)
   ========================================================================== */

#sound-library {
    padding: 20px;
    background-color: #181818; /* Um pouco mais escuro que o resto */
    border-radius: 8px;
    margin-bottom: 20px;
}

#sound-library.hidden {
    display: none;
}

#library-sounds {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Permite que os sons quebrem a linha */
}

/* Estilo para cada som na biblioteca (arrastável) */
.library-sound {
    padding: 10px 15px;
    background-color: #282828;
    border-radius: 5px;
    cursor: move; /* Indica que o elemento é arrastável */
    transition: background-color 0.3s ease;
}

.library-sound:hover {
    background-color: #333;
}

/* ==========================================================================
   8. LAYOUT DRAG AND DROP E REDIMENSIONÁVEL
   ========================================================================== */

#layout-container {
    display: flex;
    gap: 20px;
}

/* Zona onde os elementos podem ser soltos */
.drop-zone {
    flex: 1;
    border: 2px dashed transparent;
    padding: 10px;
    transition: border-color 0.3s ease;
    min-width: 200px;
}

.drop-zone.drag-over {
    border-color: #1DB954; /* Borda verde ao arrastar sobre */
}

/* Elemento que pode ser arrastado */
.draggable {
    cursor: move;
    border: 1px solid #444;
    border-radius: 8px;
    height: 100%;
}

.draggable.dragging {
    opacity: 0.5; /* Torna o elemento semi-transparente ao ser arrastado */
}

/* Divisor redimensionável */
#resizer {
    width: 5px;
    cursor: col-resize; /* Cursor para redimensionamento horizontal */
    background-color: #333;
}

#resizer:hover {
    background-color: #444;
}

/* ==========================================================================
   9. LAYOUTS ALTERNATIVOS E RESPONSIVIDADE
   ========================================================================== */

/* Classes de corpo para layouts alternativos (controladas por JS) */
body.layout-alt1 main {
    max-width: 1200px; /* Layout mais largo */
}

body.layout-alt1 #pad-container {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Pads maiores */
    gap: 25px;
}

body.layout-alt2 #track-section {
    order: -1; /* Move a seção de faixas para cima dos pads */
}

body.layout-alt2 #pad-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

body.layout-alt2 .pad {
    width: 100px;
    height: 100px;
    font-size: 12px;
}

/* Media Query para telas menores (tablets e celulares) */
@media (max-width: 768px) {
    #layout-container {
        flex-direction: column; /* Empilha as seções verticalmente */
    }

    #resizer {
        display: none; /* Esconde o redimensionador em telas pequenas */
    }
}

/* ==========================================================================
   10. RODAPÉ (FOOTER)
   ========================================================================== */

footer {
    padding: 15px;
    border-top: 1px solid #333;
    font-size: 14px;
    color: #888;
}