/* ---------- Objetivos and tareas (ObjectivesController, TasksController) ---------- */

/* Objetivos | Tareas, and the year or the tareas' tabs beside them */
.objectives-tabs .segmented__item {
  gap: var(--space-1-5);
}

.objectives-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);

  .tabs {
    margin-bottom: 0;
    border-bottom: 0;
  }
}

.objectives-toolbar__year {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.objectives-group {
  margin-top: var(--space-6);
}

/* One objetivo: its title and details, its progress, its state */
.objective-list,
.task-list {
  padding: 0;
  list-style: none;
}

.objective-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);

  & + & {
    border-top: var(--border);
  }
}

.objective-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.objective-row__title {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* The bar: teal while it's going, green once achieved, red if missed */
.objective-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.objective-progress__bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);

  span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
  }
}

.objective-progress--achieved .objective-progress__bar span { background: var(--color-success); }
.objective-progress--missed .objective-progress__bar span { background: var(--color-danger); }
.objective-progress--cancelled .objective-progress__bar span { background: var(--color-text-subtle); }

.objective-progress__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* One tarea: a round tick, what it is, when */
.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);

  & + & {
    border-top: var(--border);
  }

  form {
    display: contents;
  }
}

.task-row__check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 2px solid var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: transparent;
  cursor: pointer;

  svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  &:hover {
    border-color: var(--color-success);
    color: var(--color-success);
  }
}

.task-row--done .task-row__check {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
}

.task-row__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.task-row__title {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.task-row--done .task-row__title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

@media (max-width: 40rem) {
  .objective-row {
    grid-template-columns: minmax(0, 1fr) auto;

    .objective-progress {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }
}