/* =============================================
   TAREFAS — Módulo pessoal
   Paleta de camadas:
   Fundo da página:  #12141c
   Card:             #1e2130
   Card hover:       #232638
   Texto primário:   #ffffff
   Texto secundário: #c4cbd8   (cinza claro — nunca abaixo de #adb5bd)
   ============================================= */

/* --- Fundo da página (scoped) --- */
.page-tarefas .content {
  background: #12141c;
}

/* Labels "text-muted" do painel de filtros — mais claros */
.page-tarefas .text-muted {
  color: #a8b2c4 !important;
}

/* --- Cards --- */
.tarefa-card {
  border-left: 4px solid transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  background-color: #1e2130;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.tarefa-card:hover {
  background-color: #232638;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Borda esquerda por prioridade */
.tarefa-card.prioridade-baixa   { border-left-color: #8895a8; }
.tarefa-card.prioridade-media   { border-left-color: #4d8ef0; }
.tarefa-card.prioridade-alta    { border-left-color: #fd7e14; }
.tarefa-card.prioridade-urgente { border-left-color: #dc3545; }

/* Concluída */
.tarefa-card.concluida {
  opacity: 0.45;
}
.tarefa-card.concluida .tarefa-titulo {
  text-decoration: line-through;
  color: #8895a8;
}

/* Animação ao concluir */
@keyframes concludeTask {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 0.45; }
}
.tarefa-card.animando-conclusao {
  animation: concludeTask 0.4s ease forwards;
}

/* --- Corpo e título --- */
.tarefa-corpo {
  min-width: 0;
}
.tarefa-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

/* --- Descrição truncada --- */
.tarefa-descricao {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  color: #c4cbd8;
  min-height: 1.2rem;
  line-height: 1.5;
}

/* --- Chips de filtro --- */
.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Base de todos os chips — texto sempre branco, cor só na borda */
.chip-filtro,
.chip-filtro-categoria {
  border-radius: 20px;
  font-size: 0.78rem;
  padding: 0.22rem 0.75rem;
  line-height: 1.4;
  background: transparent;
  color: #ffffff;
  border: 1px solid #4a5568;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chip-filtro:hover,
.chip-filtro-categoria:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}
.chip-filtro.active,
.chip-filtro-categoria.ativo {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* --- Seções de agrupamento --- */
.secao-tarefas {
  margin-bottom: 2rem;
}
.secao-header {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8b2c4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.secao-header:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.secao-header .secao-chevron {
  font-size: 1rem;
  color: #ffffff;
  margin-left: auto;
}

/* --- Empty state --- */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: #a8b2c4;
}
.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: #4a5568;
}
.empty-state p {
  font-size: 1.05rem;
}

/* --- Busca --- */
.busca-wrapper {
  position: relative;
}
.busca-wrapper .fa-search {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8895a8;
  pointer-events: none;
}
.busca-wrapper input {
  padding-left: 2.2rem;
}

/* --- Botão conclusão rápida --- */
.btn-concluir-rapido {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #6b7a90;
  background: transparent;
  color: #6b7a90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  margin-top: 2px;
}
.btn-concluir-rapido:hover {
  border-color: #2ecc71;
  color: #2ecc71;
}
.btn-concluir-rapido.concluida {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}
.btn-concluir-rapido i {
  font-size: 0.9rem;
}

/* --- Botão kebab (⋮) --- */
.btn-kebab {
  background: transparent;
  border: none;
  color: #8895a8;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.btn-kebab:hover,
.btn-kebab:focus {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

/* Dropdown do kebab — fixed strategy sai do fluxo do card */
.tarefa-dropdown {
  background: #1e2235;
  border: 1px solid #343850;
  border-radius: 10px;
  min-width: 195px;
  padding: 0.4rem 0;
  z-index: 9999;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}
.tarefa-dropdown .dropdown-item {
  color: #ffffff;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0;
  transition: background 0.12s ease;
}
.tarefa-dropdown .dropdown-item:hover,
.tarefa-dropdown .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}
.tarefa-dropdown .dropdown-item.active {
  background: rgba(77, 142, 240, 0.2);
  color: #ffffff;
}
.tarefa-dropdown .dropdown-item.text-danger {
  color: #f87171 !important;
}
.tarefa-dropdown .dropdown-item.text-danger:hover {
  background: rgba(220, 53, 69, 0.18);
  color: #ffaaaa !important;
}
.tarefa-dropdown .dropdown-divider {
  border-color: #343850;
  margin: 0.3rem 0;
}
.tarefa-dropdown .dropdown-header {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #8895a8;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem 0.2rem;
}

/* --- Chip de categoria no card — texto branco, cor só na borda --- */
.chip-categoria {
  font-size: 0.68rem;
  padding: 0.1rem 0.55rem;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff !important;
  background: transparent !important;
}

/* --- Badges de status — texto branco, cor só na borda --- */
[class^="badge-status-"] {
  background: transparent;
  color: #ffffff;
  font-size: 0.72rem;
}
.badge-status-pendente     { border: 1px solid #8895a8; }
.badge-status-em_progresso { border: 1px solid #0dcaf0; }
.badge-status-bloqueada    { border: 1px solid #fd7e14; }
.badge-status-concluida    { border: 1px solid #2ecc71; }

/* --- Badge de prazo --- */
.badge-prazo {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.badge-prazo-neutro {
  background: rgba(196, 203, 216, 0.08);
  border: 1px solid #5a6480;
  color: #c4cbd8;
  font-size: 0.68rem;
  font-weight: 500;
}

/* --- Hero / cabeçalho --- */
.hero-tarefas h4 {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
.hero-tarefas .subtitulo {
  font-size: 0.95rem;
  color: #a8b2c4;
  min-height: 1.4em;
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}


/* --- Categoria "Outra" reveal --- */
#categoriaCustomWrapper {
  display: none;
  margin-top: 0.5rem;
}
#categoriaCustomWrapper.visivel {
  display: block;
}

/* --- Badges de contagem nos chips --- */
.chip-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2em 0.45em;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 0.3rem;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.chip-badge-danger    { background: rgba(220, 53,  69, 0.3);  border-color: rgba(220, 53,  69, 0.6); color: #ffaaaa; }
.chip-badge-warning   { background: rgba(255,193,   7, 0.2);  border-color: rgba(255,193,   7, 0.5); color: #ffd55a; }
.chip-badge-info      { background: rgba( 13,202, 240, 0.2);  border-color: rgba( 13,202, 240, 0.5); color: #7de8f7; }
.chip-badge-success   { background: rgba( 46,204, 113, 0.2);  border-color: rgba( 46,204, 113, 0.5); color: #6ee09a; }
.chip-badge-bloqueadas{ background: rgba(253,126,  20, 0.2);  border-color: rgba(253,126,  20, 0.5); color: #ffb067; }