/* =============================================
   TASKFLOW — style.css
   Gustavo Alves · Portfólio Front-end

   ÍNDICE:
   1. Variáveis CSS e Reset
   2. Layout Base
   3. Header
   4. App Container
   5. Cabeçalho do App
   6. Formulário de Nova Tarefa
   7. Filtros
   8. Lista de Tarefas
   9. Item de Tarefa
   10. Estado Vazio
   11. Footer do App
   12. Footer da Página
   13. Animações
   14. Responsivo
============================================= */


/* ══════════════════════════════════════
   1. VARIÁVEIS CSS E RESET

   Mesmas variáveis do portfólio: isso
   garante identidade visual consistente
   entre todos os projetos.

   CSS Custom Properties (variáveis):
   - Declaradas em :root = disponíveis globalmente
   - Sintaxe: --nome: valor;
   - Uso: color: var(--nome);
══════════════════════════════════════ */

/* Seletor universal: aplica o reset em TUDO.
   ::before e ::after são pseudo-elementos que
   também precisam do reset. */
*, *::before, *::after {
  box-sizing: border-box; /* padding e border incluídos na largura total */
  margin: 0;
  padding: 0;
}

:root {
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --bg3:     #1a1a1a;
  --card:    #141414;
  --accent:  #c8ff00;  /* verde-limão: confirmar, concluir */
  --accent2: #ff4d6d;  /* rosa: urgente, excluir */
  --accent3: #00d4ff;  /* azul: alta prioridade */
  --text:    #f0f0f0;
  --muted:   #666;
  --border:  #222;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  display: flex;         /* layout flex para header/main/footer */
  flex-direction: column;
  overflow-x: hidden;
  cursor: none;          /* esconde cursor nativo — usamos o customizado */
}

/* ── CURSOR CUSTOMIZADO (mesmo do portfólio) ── */
#cursor {
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
  mix-blend-mode: difference;
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  opacity: 0.5;
}


/* ══════════════════════════════════════
   2. LAYOUT BASE
══════════════════════════════════════ */

/* flex: 1 faz o main crescer e ocupar
   todo espaço entre header e footer */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;    /* centraliza horizontalmente */
  padding: 48px 24px;
}


/* ══════════════════════════════════════
   3. HEADER
══════════════════════════════════════ */

.header {
  position: sticky; /* gruda no topo ao rolar */
  top: 0;
  z-index: 100;     /* camada acima dos outros elementos */
  /* rgba: red, green, blue, alpha(transparência 0-1) */
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(12px); /* efeito de vidro fosco */
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--accent);
  text-decoration: none;
  margin-right: auto; /* empurra itens restantes para a direita */
}

.project-badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.back-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 6px 14px;
  transition: color 0.2s, border-color 0.2s;
}
.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* ══════════════════════════════════════
   4. APP CONTAINER

   max-width + width: 100% é o padrão
   para layouts responsivos centralizados:
   em telas grandes fica no máximo 560px,
   em telas menores ocupa tudo.
══════════════════════════════════════ */

.app {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0; /* sem gap — as bordas internas separam as seções */
  border: 1px solid var(--border);
  background: var(--card);
  /* Animação de entrada: definida em @keyframes mais abaixo */
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ══════════════════════════════════════
   5. CABEÇALHO DO APP
══════════════════════════════════════ */

.app-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* alinha pela base */
}

.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.app-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  /* clamp: min, ideal, max — tamanho responsivo */
  line-height: 1;
  color: var(--text);
}

.app-subtitle {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Contador de tarefas pendentes */
.task-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.counter-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1;
  /* transition anima a mudança de número */
  transition: color 0.3s;
}

/* Quando chega a zero, muda de cor para indicar que está tudo feito */
.counter-number.zero { color: var(--muted); }

.counter-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════
   6. FORMULÁRIO DE NOVA TAREFA

   display: flex com gap permite layout
   em linha com espaçamento uniforme.
══════════════════════════════════════ */

.task-form {
  display: flex;
  gap: 0; /* sem gap — as bordas se tocam para parecer um campo único */
  border-bottom: 1px solid var(--border);
}

/* Campo de texto */
.task-input {
  flex: 1;  /* cresce para ocupar todo espaço disponível */
  background: var(--bg2);
  border: none;   /* sem bordas individuais — o pai tem a borda */
  border-right: 1px solid var(--border);
  padding: 16px 20px;
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;  /* remove o contorno azul padrão do browser ao focar */
  transition: background 0.2s;
}
/* :focus = quando o campo está selecionado (clicou ou Tab) */
.task-input:focus {
  background: var(--bg3);
}
/* ::placeholder estiliza o texto de dica do input */
.task-input::placeholder {
  color: var(--muted);
  font-style: italic;
}

/* Seletor de prioridade */
.priority-select {
  background: var(--bg2);
  border: none;
  border-right: 1px solid var(--border);
  padding: 0 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  /* appearance: none remove o estilo padrão do select do sistema operacional */
  appearance: none;
  transition: background 0.2s, color 0.2s;
}
.priority-select:focus,
.priority-select:hover {
  background: var(--bg3);
  color: var(--text);
}

/* Botão adicionar */
.btn-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--accent);
  color: #000;
  border: none;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap; /* impede que o texto quebre em duas linhas */
}
.btn-add:hover  { background: #d4ff1a; }
.btn-add:active { transform: scale(0.97); }

/* Ícone "+" maior */
.btn-add-icon {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
}


/* ══════════════════════════════════════
   7. FILTROS

   Os botões de filtro mudam a visualização
   das tarefas. O botão ativo recebe a classe
   "active" via JavaScript.
══════════════════════════════════════ */

.filters {
  display: flex;
  border-bottom: 1px solid var(--border);
  /* overflow-x: auto permite scroll horizontal
     em telas muito pequenas */
  overflow-x: auto;
}

.filter-btn {
  flex: 1;          /* divide o espaço igualmente entre os 3 botões */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  /* position: relative necessário para o ::after (linha de destaque) */
  position: relative;
}
/* Remove a borda do último botão */
.filter-btn:last-child { border-right: none; }

.filter-btn:hover { color: var(--text); }

/* Linha de destaque embaixo do botão ativo.
   ::after cria um elemento visual logo depois do botão,
   sem precisar de um elemento HTML extra. */
.filter-btn.active {
  color: var(--accent);
  background: rgba(200, 255, 0, 0.04); /* verde-limão muito sutil no fundo */
}
.filter-btn.active::after {
  content: '';  /* obrigatório para pseudo-elementos aparecerem */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Badge com contagem dentro do botão de filtro */
.filter-count {
  background: var(--bg3);
  color: var(--muted);
  font-size: 0.55rem;
  padding: 1px 5px;
  border-radius: 99px; /* border-radius grande = formato de pílula */
  min-width: 16px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.filter-btn.active .filter-count {
  background: rgba(200, 255, 0, 0.15);
  color: var(--accent);
}


/* ══════════════════════════════════════
   8. LISTA DE TAREFAS

   list-style: none remove os marcadores
   bullet (•) padrão das listas HTML.
══════════════════════════════════════ */

.task-list {
  list-style: none;
  min-height: 80px; /* mantém um tamanho mínimo para não colapsar */
}


/* ══════════════════════════════════════
   9. ITEM DE TAREFA

   Cada <li> é um item da lista.
   O checkbox, texto e botão ficam em
   linha via flexbox.
══════════════════════════════════════ */

.task-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  /* group: ao fazer hover no item, os botões internos aparecem */
  position: relative;
  transition: background 0.2s;
  /* Animação de entrada ao criar a tarefa */
  animation: taskIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.task-item:hover { background: var(--bg3); }
/* Remove a borda do último item */
.task-item:last-child { border-bottom: none; }

/* ── CHECKBOX CUSTOMIZADO ──
   O <input type="checkbox"> padrão é feio.
   Escondemos com opacity: 0 e criamos um
   visual customizado com o label::before. */
.task-checkbox {
  /* position: relative + absolute no ::before para posicionar o checkmark */
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* não encolhe mesmo com pouco espaço */
}

/* O <input> real: invisível mas funcional (clicável, focável) */
.task-checkbox input {
  position: absolute;
  opacity: 0;    /* invisível */
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  z-index: 1;    /* fica na frente para receber cliques */
}

/* Caixa visual do checkbox criada com ::before */
.task-checkbox label::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--border);
  background: var(--bg3);
  transition: background 0.2s, border-color 0.2s;
}

/* Checkmark (✓) com ::after, visível só quando marcado */
.task-checkbox label::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #000;
  opacity: 0; /* invisível por padrão */
  transition: opacity 0.15s;
}

/* :checked = estado do input quando está marcado.
   ~ é o seletor de irmão: seleciona o label que
   vem depois do input marcado. */
.task-checkbox input:checked ~ label::before {
  background: var(--accent);
  border-color: var(--accent);
}
.task-checkbox input:checked ~ label::after {
  opacity: 1; /* mostra o ✓ */
}

/* ── LABEL: texto da tarefa ── */
.task-checkbox label {
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
}

/* Conteúdo de texto da tarefa */
.task-content {
  flex: 1; /* ocupa todo o espaço disponível entre checkbox e botões */
  min-width: 0; /* permite que o texto seja cortado com ellipsis */
}

/* Texto da tarefa */
.task-text {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
  /* overflow + text-overflow: evita que texto muito longo quebre o layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s, text-decoration 0.2s;
}

/* Tarefa concluída: texto riscado e mais escuro */
.task-item.done .task-text {
  text-decoration: line-through; /* linha no meio do texto */
  color: var(--muted);
}

/* Badge de prioridade */
.task-priority {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Bolinha colorida antes do texto da prioridade */
.task-priority::before {
  content: '●';
  font-size: 0.4rem;
}

/* Cores diferentes para cada nível de prioridade */
.task-priority.normal  { color: var(--muted); }
.task-priority.alta    { color: var(--accent3); }
.task-priority.urgente { color: var(--accent2); }

/* Grupo de botões de ação (editar, deletar)
   Ficam ocultos por padrão e aparecem no hover */
.task-actions {
  display: flex;
  gap: 4px;
  opacity: 0;       /* invisível por padrão */
  transition: opacity 0.2s;
}
/* Mostra ao fazer hover no item pai */
.task-item:hover .task-actions { opacity: 1; }

/* Botão de ação individual */
.action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Botão de deletar: vermelho no hover */
.action-btn.delete:hover {
  background: var(--accent2);
  color: #fff;
  border-color: var(--accent2);
}

/* Animação de saída ao deletar tarefa */
.task-item.removing {
  animation: taskOut 0.25s ease forwards;
}


/* ══════════════════════════════════════
   10. ESTADO VAZIO

   Exibido quando não há tarefas.
   Controlado pelo JS: display flex/none.
══════════════════════════════════════ */

.empty-state {
  display: none;  /* escondido por padrão; JS muda para flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 8px;
  text-align: center;
}

.empty-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 8px;
  /* Animação giratória sutil */
  animation: spin 8s linear infinite;
}

.empty-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: var(--muted);
}

.empty-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  opacity: 0.6;
}


/* ══════════════════════════════════════
   11. FOOTER DO APP
══════════════════════════════════════ */

.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Botão para limpar tarefas concluídas */
.btn-clear {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px 0;
}
.btn-clear:hover { color: var(--accent2); }

.footer-hint {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  opacity: 0.6;
}


/* ══════════════════════════════════════
   12. FOOTER DA PÁGINA
══════════════════════════════════════ */

.footer {
  border-top: 1px solid var(--border);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* empurra para o fundo da página */
}
.footer p {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.footer span { color: var(--accent); }


/* ══════════════════════════════════════
   13. ANIMAÇÕES

   @keyframes define estados de uma animação:
   - "from" = estado inicial (0%)
   - "to"   = estado final (100%)
   Pode usar porcentagens para mais controle.
══════════════════════════════════════ */

/* App entra de baixo */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tarefa nova aparece vindo de cima */
@keyframes taskIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tarefa deletada sai para a direita */
@keyframes taskOut {
  from { opacity: 1; transform: translateX(0); max-height: 60px; }
  to   { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0; }
}

/* Ícone de estado vazio gira lentamente */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ══════════════════════════════════════
   14. RESPONSIVO

   @media (max-width: 600px) = estilos
   aplicados APENAS quando a tela
   tem no máximo 600px de largura.
══════════════════════════════════════ */

@media (max-width: 600px) {
  .header { padding: 12px 20px; }
  .project-badge { display: none; }
  .main { padding: 24px 0; }    /* sem padding lateral em mobile (app ocupa tudo) */

  /* Formulário vira coluna em telas pequenas */
  .task-form { flex-direction: column; }
  .task-input { border-right: none; border-bottom: 1px solid var(--border); }
  .priority-select { border-right: none; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .btn-add { padding: 14px 20px; justify-content: center; }

  .app-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer { flex-direction: column; gap: 6px; text-align: center; }
}