/* Reseta margens padrões do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    
    /* Define que o body ocupa 100% da altura da tela */
    min-height: 100vh;
    
    /* Habilita o Flexbox */
    display: flex;
    
    /* O SEGREDO: Muda a direção para COLUNA (um embaixo do outro) */
    flex-direction: column;
    
    background-color: #f4f4f4;
}

/* 1. O Cabeçalho */
header {
    background-color: #2c3e50; /* Cor escura */
    color: white;
    padding: 2rem;
    text-align: center;
    /* Ocupa a largura toda por padrão em flex-column */
}

/* 2. O Conteúdo Principal */
main {
    /* O SEGREDO 2: flex: 1 faz o main crescer e ocupar TODO o espaço vazio 
       empurrando o footer para o final da tela */
    flex: 1; 
    
    width: 100%;
    max-width: 600px; /* Limita a largura para não ficar muito esticado */
    margin: 2rem auto; /* Centraliza o bloco do main na horizontal */
    padding: 0 1rem;
}


/* 1. O PAI (Section) manda os filhos ficarem lado a lado */
.todo-input-section {
    display: flex;        /* Transforma em linha */
    align-items: center;  /* Centraliza verticalmente */
    gap: 10px;           /* Espaço entre o Form e o Botão Vermelho */
    width: 100%;          /* Garante que ocupe a largura toda */
    margin-bottom: 20px;
}

/* 2. O FILHO MAIS VELHO (Formulário) */
#form-tarefa {
    display: flex;        /* O formulário também é flex para seus próprios filhos */
    flex: 1;              /* ISSO É IMPORTANTE: Ocupa todo o espaço sobrando */
    gap: 10px;
}

/* 3. O NETO (Input dentro do form) */
#input-tarefa {
    flex-grow: 1;         /* Estica para preencher o formulário */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 4. O FILHO CAÇULA (Botão Apagar Memória) */
/* Ele fica quieto no canto dele, ocupando só o espaço necessário */
#deleteBtn {
    white-space: nowrap; /* Garante que o texto não quebre em duas linhas */
    height: 40px;        /* Mesma altura aproximada dos inputs para ficar bonito */
}

input {
    flex: 1; /* Input ocupa o espaço restante da linha */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #219150;
}

/* 3. O Rodapé */
footer {
    background-color: #333;
    color: #ccc;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}

footer a {
    color: white;
    text-decoration: none;
}

.completed {
    text-decoration: line-through;
    color: gray;
    opacity: 0.6;
}

/* 1. Estilizando o Container da Lista (<ul>) */
#lista-tarefas {
    list-style-type: none; /* Remove as bolinhas padrão da lista */
    padding: 0;            /* Remove o espaçamento padrão à esquerda */
    margin-top: 20px;      /* Um respiro entre o filtro e a lista */
}

/* 2. Estilizando cada Item da Tarefa (<li>) */
#lista-tarefas li {
    /* O SEGREDO: Transforma o <li> em um container flexível */
    display: flex;
    
    /* Alinha os itens verticalmente no centro */
    align-items: center; 
    
    /* Joga o texto para a esquerda e o botão para a extrema direita */
    justify-content: space-between;
    
    /* Estilos visuais para cada linha */
    background-color: #fff; /* Fundo branco para destacar do fundo cinza */
    padding: 12px 15px;     /* Espaçamento interno */
    margin-bottom: 10px;    /* Espaço entre uma tarefa e outra */
    border-radius: 8px;     /* Cantos arredondados modernos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Uma sombra super leve para dar profundidade */
}

/* (Opcional) Classe para o texto da tarefa, se você quiser dar um ajuste fino */
.task-text {
    font-size: 1rem;
    color: #333;
}

/* 3. Melhorando o Botão "Marcar" (.task-button) */
.task-button {
    /* Usando um estilo sólido e moderno, similar à sua imagem mas mais polido */
    background-color: lightgreen; /* Um vermelho vibrante e moderno */
    color: white;
    border: none;
    
    /* Ajustando o tamanho */
    padding: 8px 16px;
    font-size: 0.9rem; /* Fonte um pouco menor para ficar proporcional */
    font-weight: 600;  /* Texto em negrito */
    
    border-radius: 6px; /* Bordas arredondadas no botão também */
    cursor: pointer;
    transition: background-color 0.2s; /* Efeito suave ao passar o mouse */
}

/* Efeito Hover do Botão */
.task-button:hover {
    background-color: green; /* Vermelho mais escuro ao passar o mouse */
}

.danger {
    background-color: #ae2727;
}

.danger:hover {
    background-color: #912121;
}



/* Fundo escuro que cobre a tela toda */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Preto 50% transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Fica em cima de tudo */
    animation: fadeIn 0.2s;
}

/* A caixinha do popup */
.modal-box {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 300px;
}

.modal-titulo {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

.modal-botoes {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    gap: 10px;
}

/* Botões do modal */
.btn-confirmar {
    background-color: #ff1744;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-confirmar:hover{
    background-color: #912121;

}

.btn-cancelar {
    background-color: #ccc;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
}