/*
 * todos.css — styles for the todos feature.
 *
 * Builds on the shared design system in application.css (.card, .btn, .badge,
 * .form, .page-header, .empty-state, .avatar, etc.) — see that file's top
 * comment for the full component list and the --fh-* design tokens.
 */

/* -------------------------------------------------------------------------- */
/* Todo list index — card grid                                               */
/* -------------------------------------------------------------------------- */

.todo-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fh-space-4);
}

.todo-list-card {
  display: block;
  color: var(--fh-text);
}
.todo-list-card:hover {
  text-decoration: none;
  border-color: var(--fh-accent);
}

.todo-list-card-name { font-size: 1.15rem; margin: 0 0 var(--fh-space-1); }
.todo-list-card-description {
  margin: 0 0 var(--fh-space-3);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.todo-list-card-progress-label {
  margin: 0 0 var(--fh-space-2);
  font-size: 0.85rem;
}

.progress-bar {
  height: 6px;
  border-radius: var(--fh-radius-pill);
  background: var(--fh-surface-muted);
  overflow: hidden;
  margin-bottom: var(--fh-space-3);
}
.progress-bar-fill {
  height: 100%;
  background: var(--fh-accent);
  border-radius: var(--fh-radius-pill);
}

.todo-list-card-avatars {
  display: flex;
  gap: var(--fh-space-1);
  margin-top: var(--fh-space-2);
}

/* -------------------------------------------------------------------------- */
/* Todo list show — header actions                                           */
/* -------------------------------------------------------------------------- */

.todo-list-actions {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  flex: none;
}

/* -------------------------------------------------------------------------- */
/* Todo rows                                                                  */
/* -------------------------------------------------------------------------- */

.todo-rows { display: flex; flex-direction: column; }

.todo-row {
  display: flex;
  align-items: flex-start;
  gap: var(--fh-space-3);
  padding: var(--fh-space-3) 0;
  border-bottom: 1px solid var(--fh-border);
}
.todo-rows .todo-row:last-child { border-bottom: none; }

.todo-empty-message { padding: var(--fh-space-2) 0; }

.todo-check-form { display: flex; margin: 0; padding-top: 2px; }

.todo-check {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--fh-border);
  background: transparent;
  color: transparent;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.todo-check:hover {
  border-color: var(--fh-accent);
  background: var(--fh-accent-soft);
}

.todo-row-completed .todo-check {
  border-color: var(--fh-accent);
  background: var(--fh-accent);
  color: var(--fh-on-fill);
}
.todo-row-completed .todo-check:hover {
  background: var(--fh-accent-dark);
  border-color: var(--fh-accent-dark);
}

.todo-row-main { flex: 1; min-width: 0; }

.todo-row-title { font-weight: 500; }

/* A to-do's notes, and (on the My to-dos page) the list named beneath its title. */
.todo-row-notes,
.todo-row-list { margin: var(--fh-space-1) 0 0; font-size: 0.85rem; }

/* Overdue rows are flagged the same way the dashboard flags them — a coloured
   title, the badge's signal carried up to the whole row. */
.todo-row-overdue .todo-row-title { color: var(--fh-danger-dark); }

.todo-row-completed .todo-row-title {
  text-decoration: line-through;
  color: var(--fh-text-muted);
  font-weight: 400;
}
.todo-row-completed .todo-row-notes { display: none; }

.todo-row-meta {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  flex: none;
}

.badge-overdue { background: var(--fh-danger-soft); color: var(--fh-danger-dark); }

.todo-row-edit {
  font-size: 0.85rem;
  color: var(--fh-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Inline "add a to-do" row                                                   */
/* -------------------------------------------------------------------------- */

.todo-add-form {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  margin-top: var(--fh-space-3);
  padding-top: var(--fh-space-3);
  border-top: 1px solid var(--fh-border);
}

.todo-add-form input[type="text"],
.todo-add-form input[type="date"],
.todo-add-form select {
  padding: var(--fh-space-2) var(--fh-space-3);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--fh-text);
  background: var(--fh-surface);
}

.todo-add-title { flex: 1; min-width: 120px; }
.todo-add-assignee { flex: none; max-width: 140px; }
.todo-add-due { flex: none; max-width: 150px; }

.todo-add-form input:focus,
.todo-add-form select:focus {
  outline: none;
  border-color: var(--fh-accent);
  box-shadow: 0 0 0 3px var(--fh-accent-soft);
}

/* -------------------------------------------------------------------------- */
/* Completed section                                                         */
/* -------------------------------------------------------------------------- */

.todo-completed-details { margin-top: var(--fh-space-4); }

.todo-completed-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fh-text-muted);
  padding: var(--fh-space-2) 0;
  list-style: revert;
}

.todo-completed-details .card { margin-top: var(--fh-space-3); }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .todo-row { flex-wrap: wrap; }
  .todo-row-meta { width: 100%; justify-content: flex-start; margin-left: 34px; }
  .todo-add-form { flex-wrap: wrap; }
  .todo-add-title { width: 100%; }
}