/*
 * Telas de Projects/Tasks (Fatia 2.3). Reusa os componentes genéricos de catalog.css
 * (page-header, data-table, empty-state, form-stack, form-hint). Aqui só o que é
 * específico: bolinha de cor, grid de swatches e a seção de tasks inline.
 * Só tokens; denso; claro/escuro automático (Q64).
 */

/* --- Bolinha da cor do projeto na lista (Q52) ------------------------------- */
.project-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  border-radius: 50%;
  vertical-align: baseline;
}

/* Marca "do cliente" na rate herdada (Q22) — pequena e discreta. */
.project-rate-source {
  font-size: var(--text-xs);
}

/* --- Grid de swatches de cor (radio estilizados, zero JS — Q52) ------------- */
.swatch-grid {
  border: 0;
  padding: 0;
  margin: 0;
}

.swatch-grid legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
}

.swatch-grid__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.swatch {
  position: relative;
  cursor: pointer;
  line-height: 0;
}

/* O input radio real fica invisível mas acessível (foco via teclado no chip). */
.swatch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch__chip {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background-color: var(--swatch);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Selecionado: anel de acento em volta do chip. */
.swatch__input:checked + .swatch__chip {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), var(--focus-ring);
}

/* Foco por teclado no radio → mesmo anel (acessibilidade). */
.swatch__input:focus-visible + .swatch__chip {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), var(--focus-ring);
}

/* --- Seção de Tarefas aninhada no projeto (TELA 02) ------------------------- */
.project-tasks {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  max-width: 32rem;
}

.project-tasks h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.task-list__items {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}

.task-list__empty {
  margin: var(--space-3) 0;
}

.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.task-row__name {
  font-size: var(--text-sm);
}

.task-row__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.task-row__actions form {
  margin: 0;
}

/* Form de criar/renomear task inline. */
.task-form {
  margin-top: var(--space-3);
}

.task-form__row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.task-form__row input[type="text"] {
  flex: 1;
  margin: 0;
}

.task-form__error {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.task-row--editing {
  flex-wrap: wrap;
}

/* Badge do projeto padrão — no ACENTO, não no cinza do tag-badge: é estado
   importante (afeta o form do timer), não metadado; o cinza passava batido
   (feedback do dono). Mesmo tint 12% do item de nav atual. */
.default-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}

/* --- Mobile (≤48rem): lista de projetos SEM scroll lateral -------------------- */
/* A regra genérica do catálogo (data-table rola na horizontal) cortava o ⋮ fora
   da tela (feedback do dono 07/07). Aqui a linha empilha em 2 andares, como o
   Detalhado dos reports: nome + ⋮ em cima; cliente à esquerda e registrado ·
   valor/hora à direita embaixo. Células: 1 projeto · 2 cliente · 3 registrado ·
   4 valor/hora · 5 ações. */
@media (max-width: 48rem) {
  .projects-table {
    overflow-x: visible;
  }

  .projects-table tbody {
    display: block;
  }

  .projects-table thead {
    display: none;
  }

  /* Hierarquia da linha (2 andares): nome forte + REGISTRADO protagonista à
     direita (o dado que importa numa lista de projetos) + ⋮ discreto; embaixo,
     cliente e valor/hora quietos. Mesma gramática do tracker. */
  .projects-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "proj reg  menu"
      "cli  rate rate";
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .projects-table td {
    display: block;
    padding: 0;
    border: none;
  }

  .projects-table td:nth-child(1) { grid-area: proj; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .projects-table td:nth-child(2) { grid-area: cli; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-subtle); font-size: var(--text-xs); }
  .projects-table td:nth-child(3) { grid-area: reg; text-align: right; font-weight: var(--weight-medium); }
  .projects-table td:nth-child(4) { grid-area: rate; text-align: right; color: var(--color-text-subtle); font-size: var(--text-xs); white-space: nowrap; }
  .projects-table td:nth-child(5) { grid-area: menu; justify-self: end; width: auto; }
}