@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --light-bg: #f8f9fa; /* Usado como fallback ou cor interna */
    --dark-text: #333;
    --light-text: #f1f1f1;
    --border-color: #dee2e6;
    --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --success-color: #28a745;
    --danger-color: #dc3545;
    --edit-color: #ffc107;
    --header-bg: #0056b3; /* Azul mais escuro para o header */
    --footer-bg: #343a40; /* Cinza escuro para o footer */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark-text);
    line-height: 1.6;
    /* --- Estilos de Fundo --- */
    background-image: url('gerenciador-tarefas.jpg'); /* Nome do arquivo de imagem */
    background-size: cover; /* Cobrir toda a área */
    background-position: center center; /* Centralizar imagem */
    background-attachment: fixed; /* Fundo fixo ao rolar */
    /* --- Layout Flex para centralizar e empurrar footer --- */
    display: flex;
    flex-direction: column; /* Empilha header, container, footer */
    align-items: center; /* Centraliza o container horizontalmente */
    min-height: 100vh; /* Garante que o body ocupe pelo menos a altura da tela */
    padding: 20px; /* Espaçamento geral */
}

/* --- Estilos do Cabeçalho Padrão --- */
.header-compact {
    background-color: var(--header-bg); /* Cor de fundo azul definida */
    color: white;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px; /* Espaço abaixo do header */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra suave */
    flex-shrink: 0; /* Não encolher o header */
}

.header-compact-content {
    display: inline-flex; /* Para centralizar o conteúdo */
    align-items: center;
    gap: 15px; /* Espaço entre logo e texto */
    max-width: 90%; /* Evitar que fique muito largo em telas grandes */
}

.header-logo {
    height: 40px; /* Ajuste a altura conforme necessário */
    width: auto;
}

.header-compact-text {
    text-align: left; /* Alinhar texto à esquerda dentro do bloco */
}

.header-compact-text h1 {
    font-size: 1.3em;
    margin: 0;
    color: white; /* Cor da primeira linha */
    font-weight: 600;
    line-height: 1.1;
}

.header-compact-text p {
    font-size: 0.85em;
    margin: 0;
    color: yellow; /* Cor da segunda linha */
}

/* --- Estilos do Container Principal (com Efeito Vidro) --- */
.container {
    /* --- Efeito Vidro (Glassmorphism) --- */
    background-color: rgba(255, 255, 255, 0.65); /* Fundo branco semi-transparente */
    backdrop-filter: blur(12px); /* Desfoque do fundo */
    -webkit-backdrop-filter: blur(12px); /* Compatibilidade com Safari */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Borda sutil */
    /* --- Estilos Anteriores Mantidos --- */
    padding: 25px 30px;
    border-radius: 10px; /* Bordas mais arredondadas para o efeito */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); /* Sombra mais pronunciada */
    width: 100%;
    max-width: 650px; /* Aumentar um pouco a largura máxima */
    /* margin-top removido, o espaçamento é dado pelo body/header */
    margin-bottom: 30px; /* Espaço antes do footer */
}

/* --- Estilos do Gerenciador de Tarefas (Ajustes Menores) --- */
h1 {
    color: #0056b3; /* Cor um pouco mais escura para contraste no vidro */
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

h1 i {
    margin-right: 10px;
}

h2 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--dark-text);
    font-weight: 400;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Borda mais suave */
    padding-bottom: 5px;
}

#task-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.form-control {
    display: flex;
    flex-direction: column;
}

.form-control label {
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #444; /* Texto do label um pouco mais escuro */
}

#task-input,
#color-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.15); /* Borda sutil */
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    background-color: rgba(255, 255, 255, 0.7); /* Fundo levemente transparente para inputs */
}

#task-input:focus,
#color-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3); /* Sombra de foco mais visível */
}

#add-task-btn {
    background-color: var(--primary-color);
    color: var(--light-text);
    border: none;
    padding: 12px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#add-task-btn:hover {
    background-color: var(--primary-hover);
}
#add-task-btn:active {
    transform: scale(0.98); /* Efeito de clique */
}


hr {
    border: 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1); /* Linha mais suave */
    margin: 25px 0;
}

#task-list {
    list-style: none;
    padding: 0;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    /* background-color definido inline via JS com transparência */
    /* Borda removida para um look mais clean no vidro, mas pode ser adicionada de volta */
    /* border: 1px solid rgba(0, 0, 0, 0.08); */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra muito sutil para cada item */
    transition: all 0.3s ease;
    word-break: break-word;
    border-left: 5px solid transparent; /* Borda lateral mantida para status */
}

.task-item:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.task-item.completed {
    opacity: 0.75; /* Levemente mais opaco que antes */
    border-left-color: var(--success-color);
}

.task-item.completed .task-text {
    text-decoration: line-through;
    opacity: 0.7;
}

.task-text {
    flex-grow: 1;
    margin-right: 15px;
    color: #222; /* Texto das tarefas mais escuro */
}

/* Estilo para edição mantido */
.task-text[contenteditable="true"] {
    outline: 2px solid var(--primary-color);
    padding: 2px 5px;
    background-color: rgba(240, 240, 240, 0.9); /* Fundo da edição */
    border-radius: 3px;
    cursor: text;
    color: #000; /* Garante texto preto na edição */
}
.task-item.editing { cursor: default; }

.task-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.task-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 5px;
    border-radius: 50%;
    width: 32px; /* Botões ligeiramente maiores */
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: #555; /* Cor padrão dos ícones */
}

/* Cores específicas dos ícones */
.complete-btn i { color: var(--success-color); }
.edit-btn i { color: var(--edit-color); }
.delete-btn i { color: var(--danger-color); }
.save-btn i { color: var(--success-color); }

/* Efeitos hover para fundos dos botões */
.task-actions button:hover {
     background-color: rgba(0, 0, 0, 0.08); /* Fundo genérico no hover */
}
.complete-btn:hover i { color: #fff; background-color: var(--success-color); border-radius:50%;} /* Fundo verde no hover */
.edit-btn:hover i { color: #fff; background-color: var(--edit-color); border-radius:50%;} /* Fundo laranja no hover */
.delete-btn:hover i { color: #fff; background-color: var(--danger-color); border-radius:50%;} /* Fundo vermelho no hover */
.save-btn:hover i { color: #fff; background-color: var(--success-color); border-radius:50%;} /* Fundo verde no hover */


/* --- Estilos do Container de Anúncio --- */
.ad-container {
    margin-top: 30px; /* Espaço acima do anúncio */
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center; /* Centraliza o anúncio e o texto 'Publicidade' */
    min-height: 100px; /* Altura mínima para evitar colapso antes do anúncio carregar */
}
.ad-container small {
    display: block;
    font-size: 0.7em;
    color: #888;
    margin-top: 5px;
}


/* --- Estilos do Rodapé Padrão --- */
.tool-footer {
    background-color: var(--footer-bg); /* Cor de fundo cinza escuro */
    color: #ccc; /* Cor do texto clara */
    text-align: center;
    padding: 15px 20px;
    width: 100%;
    margin-top: auto; /* Empurra o rodapé para baixo */
    flex-shrink: 0; /* Não encolher o footer */
    font-size: 0.9em;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1); /* Sombra acima do footer */
}

.tool-footer-links {
    margin-bottom: 8px;
}

.tool-footer-links a {
    color: #efefef; /* Links mais claros */
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.2s ease;
}

.tool-footer-links a:hover {
    color: #fff; /* Links brancos no hover */
    text-decoration: underline;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Reduzir padding geral */
        background-attachment: scroll; /* Fundo rola com a página em mobile */
    }
    .header-compact-content {
        flex-direction: column; /* Empilhar logo e texto em telas menores */
        gap: 5px;
    }
     .header-compact-text {
        text-align: center; /* Centralizar texto no mobile */
    }
    .container {
        padding: 20px;
        margin-bottom: 20px;
        max-width: 100%; /* Ocupar largura total com padding do body */
        backdrop-filter: blur(8px); /* Reduzir blur em mobile (performance) */
        -webkit-backdrop-filter: blur(8px);
    }
    h1 { font-size: 1.6rem; }
    #task-input, #color-select, #add-task-btn { padding: 10px 12px; font-size: 0.95rem; }
    .task-item { padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
    .task-text { margin-right: 0; flex-basis: 100%; margin-bottom: 5px; }
    .task-actions { margin-left: auto; }
    .tool-footer { padding: 10px 15px; font-size: 0.8em;}
}

@media (max-width: 480px) {
    h1 { font-size: 1.4rem; }
    .task-actions button { width: 30px; height: 30px; font-size: 1rem; }
    #add-task-btn span { display: none; }
    #add-task-btn i { margin-right: 0; }
    .header-compact-text h1 { font-size: 1.1em; }
    .header-compact-text p { font-size: 0.8em; }
}