/* As telas de visao de Tarefas: Hoje, Proximos 7 dias, a carga por pessoa do Quadro e da
   Distribuicao, e o aviso de tarefa parada no cartao. Arquivo proprio para nao disputar linhas
   com tasks.css, que outras frentes editam. */

/* Parada e atencao, nao alarme: o ambar puxado para o texto, sem fundo nem borda. O vermelho fica
   so para o prazo vencido. Misturado com o texto para ler bem nos dois temas em letra tao pequena. */
.task-card__age--stalled {
  color: color-mix(in oklch, var(--color-alert) 60%, var(--txt));
}

.tasks-readable,
#tasks_incomplete_items,
#tasks_list_state,
#tasks_completed_wrapper,
#new_task_form {
  max-width: 46rem;
  margin-inline: auto;
}

/* ---- Hoje ---- */
.tasks-inbox__block + .tasks-inbox__block {
  margin-top: 1.5rem;
}

.tasks-inbox__heading {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--txt);
}

.tasks-inbox__subheading {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-muted);
}

.tasks-inbox__subheading--overdue {
  color: var(--color-negative);
}

.tasks-inbox__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tasks-inbox__empty {
  margin: 0;
  padding: 0.5rem 0.25rem;
  font-size: 0.85rem;
  color: var(--txt-muted);
}

.tasks-inbox__agenda-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* O que ja passou fica na tela, mais apagado: continua legivel, so deixa de chamar. */
.tasks-inbox__agenda-row--past {
  opacity: 0.55;
}

.tasks-inbox__time {
  padding: 0.35rem 0.25rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--txt-muted);
}

.tasks-inbox__event,
.tasks-inbox__conversation {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border-radius: 0.75rem;
  color: var(--txt);
  text-decoration: none;
}

.tasks-inbox__event {
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.875rem;
}

.tasks-inbox__event:hover,
.tasks-inbox__conversation:hover {
  background: var(--hover);
}

.tasks-inbox__conversation-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.tasks-inbox__event-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* A linha do agora: um traco na cor de destaque com a hora, entre o que passou e o que vem. */
.tasks-inbox__now {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-link);
}

.tasks-inbox__now::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--color-link);
}

/* ---- Carga por pessoa (Quadro por pessoa e Distribuicao) ---- */
.task-load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  font-size: 0.72rem;
  color: var(--txt-muted);
}

.task-load__sep {
  color: var(--txt-subtle, var(--txt-muted));
}

.task-distribution__person {
  --task-distribution-avatar: 22px;

  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-distribution__avatar {
  --avatar-size: var(--task-distribution-avatar);

  flex-shrink: 0;
  block-size: var(--avatar-size);
}

.task-distribution__load {
  padding-top: 0.25rem;
  padding-inline-start: calc(22px + 0.5rem);
}

.task-distribution__load .task-load > .task-load__filter:first-child {
  margin-inline-start: calc(-0.4rem - 1px);
}

/* Os numeros que filtram sao botoes; o _reset.css e o base.css ficam fora de @layer e venceriam
   as utilitarias, entao o botao se desenha aqui, inteiro. */
.task-load .task-load__filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 0 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: none;
}

.task-load .task-load__filter:hover {
  border-color: var(--border);
}

.task-load .task-load__filter--late {
  color: var(--color-negative);
}

.task-load .task-load__filter[aria-pressed="true"] {
  border-color: currentColor;
  background: oklch(from currentColor l c h / 0.1);
  font-weight: 600;
}

/* Filtrar e so esconder na tela o que nao casa; o cartao continua la, e clicar de novo o traz. */
[data-load-filter="late"] [data-controller~="tasks-item"]:not(:has([data-deadline="late"])),
[data-load-filter="stalled"] [data-controller~="tasks-item"]:not(:has([data-stalled])) {
  display: none;
}