/* Tarefas */
.tarefas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

.tarefas-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.tarefas-form .campo-tarefa {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tarefas-form input {
  width: 100%;
}

.tarefas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.tarefas-contador {
  font-size: 0.9rem;
  opacity: 0.75;
}

.lista-tarefas {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.item-tarefa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.item-tarefa:hover {
  transform: translateY(-1px);
}

.checkbox-tarefa {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--clr-primary);
  cursor: pointer;
}

.tarefa-conteudo {
  min-width: 0;
}

.tarefa-titulo {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tarefa-data {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  opacity: 0.6;
}

.item-tarefa.concluida {
  opacity: 0.65;
}

.item-tarefa.concluida .tarefa-titulo {
  text-decoration: line-through;
}

.btn-excluir-tarefa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--clr-danger);
  cursor: pointer;
}

.btn-excluir-tarefa:hover {
  background: color-mix(in srgb, var(--clr-danger) 12%, transparent);
}

.tarefas-vazio,
.tarefas-carregando {
  text-align: center;
  padding: 2.2rem 1rem;
  opacity: 0.7;
}

.campos-tarefa {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.campos-tarefa > div {
  min-width: 0;
}

.campos-tarefa label {
  display: block;
  margin-bottom: 0.45rem;
}

.campos-tarefa input,
.campos-tarefa select {
  width: 100%;
}

.campos-tarefa .btn {
  white-space: nowrap;
}

.campo-tarefa,
.campo-tarefa > div,
.campo-tarefa input {
  width: 100%;
}

.tarefa-informacoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.prioridade-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.prioridade-badge.prioridade-alta {
  background: color-mix(in srgb, var(--clr-danger) 15%, transparent);
  color: var(--clr-danger);
}

.prioridade-badge.prioridade-media {
  background: color-mix(in srgb, var(--clr-attention) 15%, transparent);
  color: var(--clr-attention);
}

.prioridade-badge.prioridade-baixa {
  background: color-mix(in srgb, var(--clr-primary) 15%, transparent);
  color: var(--clr-primary);
}

.item-tarefa.atrasada {
  background: color-mix(in srgb, var(--clr-danger) 8%, var(--clr-white));
}

.item-tarefa.atrasada .tarefa-prazo {
  color: var(--clr-danger);
  font-weight: 700;
}

@media (max-width: 700px) {
  .campos-tarefa {
    grid-template-columns: 1fr 1fr;
  }

  .campos-tarefa .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .campos-tarefa {
    grid-template-columns: 1fr;
  }

  .campos-tarefa .btn {
    grid-column: auto;
  }
}

@media (max-width: 650px) {
  .tarefas-form {
    grid-template-columns: 1fr;
  }

  .tarefas-form .btn {
    width: 100%;
  }

  .tarefas-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Cupom térmico: apenas tarefas pendentes, sem expor dados de outros usuários. */
.tarefas-acoes { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.tarefas-acoes .btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; }
.tarefas-acoes .btn:disabled { opacity:.5; cursor:not-allowed; }
.tarefas-impressao { display:none; }
@media print {
  @page { margin:0; }
  body.imprimindo-tarefas-termica { width:58mm !important; margin:0 !important; background:white !important; }
  body.imprimindo-tarefas-termica > :not(#tarefasImpressao) { display:none !important; }
  body.imprimindo-tarefas-termica #tarefasImpressao {
    display:block !important; box-sizing:border-box; width:46mm !important;
    max-width:46mm !important; margin:0 auto !important; padding:2mm 0 !important;
    color:#000 !important; background:#fff !important; font:9pt/1.25 Arial,sans-serif !important;
    overflow-wrap:anywhere; break-inside:auto;
  }
  #tarefasImpressao header { text-align:center; margin-bottom:3mm; }
  #tarefasImpressao h2 { font-size:11pt; margin:1mm 0; }
  #tarefasImpressao p { font-size:8pt; margin:1mm 0; }
  #tarefasImpressao ol { margin:0; padding-left:5mm; }
  #tarefasImpressao li { padding:1.5mm 0; border-bottom:1px dashed #888; break-inside:avoid; }
  #tarefasImpressao li strong, #tarefasImpressao li small { display:block; }
  #tarefasImpressao li small { font-size:8pt; margin-top:.6mm; }
  #tarefasTotalImpressao { text-align:center; font-weight:bold; padding-top:2mm; }
}


/* Checklist de tarefas: impressão térmica com preto sólido e caixas para caneta. */
@media print {
  body.imprimindo-tarefas-termica #tarefasImpressao,
  body.imprimindo-tarefas-termica #tarefasImpressao * {
    color: #000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  body.imprimindo-tarefas-termica #tarefasImpressao ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.imprimindo-tarefas-termica #tarefasImpressao li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2mm !important;
    padding: 2mm 0 !important;
    border-bottom: 1px solid #000 !important;
  }
  body.imprimindo-tarefas-termica #tarefasImpressao .tarefa-caixa-impressao {
    display: block !important;
    box-sizing: border-box !important;
    width: 4mm !important;
    height: 4mm !important;
    min-width: 4mm !important;
    margin-top: .5mm !important;
    border: 1.5px solid #000 !important;
    background: #fff !important;
    -webkit-text-fill-color: initial !important;
  }
  body.imprimindo-tarefas-termica #tarefasImpressao .tarefa-texto-impressao {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
  }
  body.imprimindo-tarefas-termica #tarefasImpressao li strong { font-weight: 700 !important; }
  body.imprimindo-tarefas-termica #tarefasImpressao li small { font-weight: 600 !important; }
}