/* ===== Progress List ===== */
.progress-list-card {
  background-color: var(--layer-background);
  border-radius: var(--radius-medium);
  padding: var(--size-4);
  box-shadow: var(--elevation-1);
  width: 100%;
  max-width: 450px;
}

.progress-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-4);
}

.progress-list-title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-background);
}

.progress-list-actions {
  display: flex;
  align-items: center;
  gap: var(--size-2);
}

.progress-list-icon {
  color: var(--primary);
  display: flex;
  align-items: center;
}

.progress-list-select {
  font-size: var(--font-size-body-small);
  color: var(--on-layer-widget);
  background-color: transparent;
  border: none;
  padding-right: var(--size-4);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 16px;
}

.progress-list-body {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
}

.progress-item-info {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.progress-item-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--dot-background-color, var(--primary));
}

.progress-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-size: cover;
  background-position: center;
}

.progress-item-label {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-5);
  color: var(--on-layer-background);
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.progress-bar-track {
  height: 8px;
  background-color: var(--layer-widget);
  border-radius: var(--radius-full);
  flex-grow: 1;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--bar-background-color, var(--primary));
  border-radius: var(--radius-full);
}

.progress-bar-value {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-6);
  color: var(--on-layer-widget);
  min-width: 36px;
  text-align: right;
}