/* Lista e itens de tarefas */
.tasks{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}

/* Cartão da tarefa
   - Fundo via --task-bg (ou gradiente do card)
   - Faixa de prioridade via --task-stripe
*/
.task{
  display:grid; grid-template-columns: 36px 1fr 180px; gap:10px; align-items:center;
  padding:10px; border:1px solid var(--border); border-radius:12px;
  background: var(--task-bg, linear-gradient(180deg, color-mix(in oklab, var(--card) 85%, #000 15%), var(--card)));
  border-left: 8px solid var(--task-stripe, var(--prio-med));
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: background-color .2s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
.task:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.18) }

.task .left{display:grid; place-items:center}
.task .mid{display:flex; flex-direction:column; gap:6px}
.task-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.task .right{display:flex; align-items:center; gap:8px; justify-content:flex-end}

.task .task-title{
  width:100%; padding:.55rem .65rem; border-radius:8px; border:1px solid var(--border); background:transparent
}
.title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* Botão de status */
.status-btn{
  border-radius:999px; padding:.35rem .7rem; font-size:.9rem; border:1px solid var(--border);
  background:var(--chip); color:var(--fg);
}
.task.done .status-btn{
  background:color-mix(in oklab, var(--status-done) 35%, var(--card));
  border-color:color-mix(in oklab, var(--status-done) 45%, var(--border))
}
.task:not(.done) .status-btn{
  background:color-mix(in oklab, var(--status-pend) 25%, var(--card))
}

/* Detalhes colapsáveis */
.details{display:block}
.task.collapsed .details{display:none}

/* Metadados */
.task .meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.task .created-at{font-size:.82rem; color:var(--muted); user-select:text}

/* Seletor de cor dentro do item */
.task .task-color{
  min-width:110px; padding:.4rem .6rem; border-radius:8px; border:1px solid var(--border); background:transparent
}

/* Concluídas */
.task.done{ filter: saturate(.9) brightness(.98) }
.task.done .task-title{ text-decoration:line-through }

/* Seleção múltipla */
.selbox{display:none}
.selection-on .selbox{display:block}

/* Estado vazio */
#empty-state{margin-top:16px; text-align:center}
/* Prioridade compacta (sempre visivel) */
.task-priority-compact{
  width:auto;
  min-width:fit-content;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--chip);
  color:inherit;
  font-size:.9rem;
  flex:0 0 auto;
}


/* Esconde a cor quando o item está colapsado (porque está dentro de .details) */
.task.collapsed .details { display:none; } /* já existia */

/* Due date compact display */
.due-compact{display:flex;align-items:center;gap:6px;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);background:var(--chip);color:inherit;font-size:.9rem;cursor:pointer;min-width:120px;}
.due-compact-icon{font-size:1rem;line-height:1;}
.due-compact-text{white-space:nowrap;}
.due-compact.no-date .due-compact-text{color:var(--muted);}

.due-control{display:flex;align-items:center;position:relative;}
.due-control .task-date{position:absolute;inset:0;opacity:0;pointer-events:none;width:0;height:0;border:0;margin:0;padding:0;}
.meta-due-slot{display:flex;align-items:center;}